feat: only fetch files quota when prefs are opened (#999)

app/assets/javascripts/Components/Preferences/Panes/Account/Files.tsx

@@ -1,36 +1,71 @@
+import { WebApplication } from '@/UIModels/Application'
 import { AppState } from '@/UIModels/AppState'
 import { formatSizeToReadableString } from '@standardnotes/filepicker'
+import { SubscriptionSettingName } from '@standardnotes/snjs'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent } from 'preact'
+import { useEffect, useState } from 'preact/hooks'
 import { PreferencesGroup, PreferencesSegment, Subtitle, Title } from '../../PreferencesComponents'
 
 type Props = {
+  application: WebApplication
   appState: AppState
 }
 
-export const FilesSection: FunctionComponent<Props> = observer(({ appState }) => {
-  if (!appState.features.isEntitledToFiles) {
+export const FilesSection: FunctionComponent<Props> = observer(({ application, appState }) => {
+  if (!application.getUser() || !appState.features.isEntitledToFiles) {
     return null
   }
 
-  const filesQuotaUsed = appState.files.filesQuotaUsed
-  const filesQuotaTotal = appState.files.filesQuotaTotal
+  const [isLoading, setIsLoading] = useState(true)
+  const [filesQuotaUsed, setFilesQuotaUsed] = useState<number>(0)
+  const [filesQuotaTotal, setFilesQuotaTotal] = useState<number>(0)
+
+  useEffect(() => {
+    const getFilesQuota = async () => {
+      const filesQuotaUsed = await application.settings.getSubscriptionSetting(
+        SubscriptionSettingName.FileUploadBytesUsed,
+      )
+      const filesQuotaTotal = await application.settings.getSubscriptionSetting(
+        SubscriptionSettingName.FileUploadBytesLimit,
+      )
+
+      if (filesQuotaUsed) {
+        setFilesQuotaUsed(parseFloat(filesQuotaUsed))
+      }
+      if (filesQuotaTotal) {
+        setFilesQuotaTotal(parseFloat(filesQuotaTotal))
+      }
+
+      setIsLoading(false)
+    }
+
+    getFilesQuota().catch(console.error)
+  })
 
   return (
     <PreferencesGroup>
       <PreferencesSegment>
         <Title>Files</Title>
         <Subtitle>Storage Quota</Subtitle>
-        <div className="mt-1 mb-1">
-          <span className="font-semibold">{formatSizeToReadableString(filesQuotaUsed)}</span> of{' '}
-          <span>{formatSizeToReadableString(filesQuotaTotal)}</span> used
-        </div>
-        <progress
-          className="w-full progress-bar"
-          aria-label="Files storage used"
-          value={appState.files.filesQuotaUsed}
-          max={filesQuotaTotal}
-        />
+        {isLoading ? (
+          <div className="mt-2">
+            <div className="sk-spinner spinner-info w-3 h-3"></div>
+          </div>
+        ) : (
+          <>
+            <div className="mt-1 mb-1">
+              <span className="font-semibold">{formatSizeToReadableString(filesQuotaUsed)}</span> of{' '}
+              <span>{formatSizeToReadableString(filesQuotaTotal)}</span> used
+            </div>
+            <progress
+              className="w-full progress-bar"
+              aria-label="Files storage used"
+              value={filesQuotaUsed}
+              max={filesQuotaTotal}
+            />
+          </>
+        )}
       </PreferencesSegment>
     </PreferencesGroup>
   )

app/assets/javascripts/Components/Preferences/Panes/Account/index.tsx

@@ -25,7 +25,7 @@ export const AccountPreferences = observer(({ application, appState }: Props) =>
       </>
     )}
     <Subscription application={application} appState={appState} />
-    <FilesSection appState={appState} />
+    <FilesSection application={application} appState={appState} />
     <SignOutWrapper application={application} appState={appState} />
   </PreferencesPane>
 ))

app/assets/javascripts/UIModels/AppState/AppState.ts

@@ -110,7 +110,7 @@ export class AppState {
     this.subscription = new SubscriptionState(application, this.appEventObserverRemovers)
     this.purchaseFlow = new PurchaseFlowState(application)
     this.notesView = new NotesViewState(application, this, this.appEventObserverRemovers)
-    this.files = new FilesState(application, this.appEventObserverRemovers)
+    this.files = new FilesState(application)
     this.addAppEventObserver()
     this.streamNotesAndTags()
     this.onVisibilityChange = () => {

app/assets/javascripts/UIModels/AppState/FilesState.ts

@@ -7,61 +7,12 @@ import {
   ClassicFileSaver,
   parseFileName,
 } from '@standardnotes/filepicker'
-import {
-  ApplicationEvent,
-  ClientDisplayableError,
-  ContentType,
-  SNFile,
-  SubscriptionSettingName,
-} from '@standardnotes/snjs'
+import { ClientDisplayableError, SNFile } from '@standardnotes/snjs'
 import { addToast, dismissToast, ToastType } from '@standardnotes/stylekit'
-import { action, makeObservable, observable } from 'mobx'
-
 import { WebApplication } from '../Application'
 
 export class FilesState {
-  filesQuotaUsed: number
-  filesQuotaTotal: number
-
-  constructor(private application: WebApplication, appObservers: (() => void)[]) {
-    this.filesQuotaUsed = 0
-    this.filesQuotaTotal = 0
-
-    makeObservable(this, {
-      filesQuotaUsed: observable,
-      filesQuotaTotal: observable,
-      getFilesQuota: action,
-    })
-
-    appObservers.push(
-      application.addEventObserver(async (event) => {
-        switch (event) {
-          case ApplicationEvent.Launched:
-          case ApplicationEvent.SignedIn:
-            this.getFilesQuota().catch(console.error)
-        }
-      }),
-      application.streamItems(ContentType.File, () => {
-        this.getFilesQuota().catch(console.error)
-      }),
-    )
-  }
-
-  public async getFilesQuota() {
-    const filesQuotaUsed = await this.application.settings.getSubscriptionSetting(
-      SubscriptionSettingName.FileUploadBytesUsed,
-    )
-    const filesQuotaTotal = await this.application.settings.getSubscriptionSetting(
-      SubscriptionSettingName.FileUploadBytesLimit,
-    )
-
-    if (filesQuotaUsed) {
-      this.filesQuotaUsed = parseFloat(filesQuotaUsed)
-    }
-    if (filesQuotaTotal) {
-      this.filesQuotaTotal = parseFloat(filesQuotaTotal)
-    }
-  }
+  constructor(private application: WebApplication) {}
 
   public async downloadFile(file: SNFile): Promise<void> {
     let downloadingToastId = ''