Lazily compute cache size (#1404)

Computing the cache size can take a long time if the cache is large.
Previously, cache size computation was triggered by opening the Settings
pane, which slowed down changing settings even if the user wasn't
interested in the cache size.

This patch defers cache size computation until the Advanced tab is open
in the Setting page.

Additionally, cache size rendering (in MB / GB) is moved from the
AppStore into the EditSettingsForm to fix the notCleared functionality.

1 files changed, 17 insertions, 3 deletions

diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index f7840c5bb..7a0aead15 100644
--- a/src/components/settings/settings/EditSettingsForm.js
+++ b/src/components/settings/settings/EditSettingsForm.js
@@ -2,6 +2,7 @@ import { remote } from 'electron';
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
+import prettyBytes from 'pretty-bytes';
 import { defineMessages, intlShape } from 'react-intl';
 
 import Form from '../../../lib/Form';
@@ -165,7 +166,7 @@ export default @observer class EditSettingsForm extends Component {
     updateIsReadyToInstall: PropTypes.bool.isRequired,
     isClearingAllCache: PropTypes.bool.isRequired,
     onClearAllCache: PropTypes.func.isRequired,
-    cacheSize: PropTypes.string.isRequired,
+    getCacheSize: PropTypes.func.isRequired,
     isSpellcheckerIncludedInCurrentPlan: PropTypes.bool.isRequired,
     isTodosEnabled: PropTypes.bool.isRequired,
     isTodosActivated: PropTypes.bool.isRequired,
@@ -221,7 +222,7 @@ export default @observer class EditSettingsForm extends Component {
       updateIsReadyToInstall,
       isClearingAllCache,
       onClearAllCache,
-      cacheSize,
+      getCacheSize,
       isSpellcheckerIncludedInCurrentPlan,
       isTodosEnabled,
       isWorkspaceEnabled,
@@ -248,7 +249,20 @@ export default @observer class EditSettingsForm extends Component {
       lockingFeatureEnabled,
       scheduledDNDEnabled,
     } = window.ferdi.stores.settings.all.app;
-    const notCleared = this.state.clearCacheButtonClicked && isClearingAllCache === false && cacheSize !== 0;
+
+    let cacheSize;
+    let notCleared;
+    if (this.state.activeSetttingsTab === 'advanced') {
+      const cacheSizeBytes = getCacheSize();
+      if (typeof cacheSizeBytes === 'number') {
+        cacheSize = prettyBytes(cacheSizeBytes);
+        notCleared = this.state.clearCacheButtonClicked && isClearingAllCache === false && cacheSizeBytes !== 0;
+      } else {
+        cacheSize = '…';
+        notCleared = false;
+      }
+    }
+
     return (
       <div className="settings__main">
         <div className="settings__header">