Fix display of loading indicator in management app (#853)

Fixes #852.

packages/desktop-client/src/components/App.js

@@ -114,13 +114,13 @@ class App extends React.Component {
         ) : budgetId ? (
           <FinancesApp />
         ) : (
-          <React.Fragment>
+          <>
             <AppBackground
               initializing={initializing}
               loadingText={loadingText}
             />
-            <ManagementApp />
-          </React.Fragment>
+            <ManagementApp isLoading={loadingText != null} />
+          </>
         )}
 
         <UpdateNotification />

packages/desktop-client/src/components/manager/ImportActual.js

@@ -64,7 +64,7 @@ function Import({ modalProps, availableImports }) {
             <P>
               You can import data from another Actual account or instance. First
               export your data from a different account, and it will give you a
-              compressed file. This file is a simple zip file that contains the
+              compressed file. This file is a simple zip file that contains the{' '}
               <code>db.sqlite</code> and <code>metadata.json</code> files.
             </P>
 

packages/desktop-client/src/components/manager/ManagementApp.js

@@ -50,9 +50,9 @@ function Version() {
 }
 
 function ManagementApp({
+  isLoading,
   files,
   userData,
-  loadingText,
   managerHasInitialized,
   setAppState,
   getUserData,
@@ -66,7 +66,6 @@ function ManagementApp({
     // An action may have been triggered from outside, and we don't
     // want to override its loading message so we only show the
     // initial loader if there isn't already a message
-    let alreadyLoading = loadingText != null;
 
     // Remember: this component is remounted every time the user
     // closes a budget. That's why we keep `managerHasInitialized` in
@@ -74,7 +73,7 @@ function ManagementApp({
     // loading spinner on first run, but never again since we'll have
     // a cached list of files and can show them
     if (!managerHasInitialized) {
-      if (!alreadyLoading) {
+      if (!isLoading) {
         setAppState({ loadingText: '' });
       }
     }
@@ -86,13 +85,13 @@ function ManagementApp({
       }
 
       // TODO: There is a race condition here. The user could perform an
-      // action that starts loading in between where `alreadyLoading`
+      // action that starts loading in between where `isLoading`
       // was captured and this would clear it. We really only want to
       // ever clear the initial loading screen, so we need a "loading
       // id" of some kind.
       setAppState({
         managerHasInitialized: true,
-        ...(!alreadyLoading ? { loadingText: null } : null),
+        ...(!isLoading ? { loadingText: null } : null),
       });
     }
 
@@ -103,6 +102,10 @@ function ManagementApp({
     return null;
   }
 
+  if (isLoading) {
+    return null;
+  }
+
   return (
     <Router history={history}>
       <View style={{ height: '100%' }}>
@@ -215,7 +218,6 @@ export default connect(state => {
     files: state.budgets.allFiles,
     userData: state.user.data,
     managerHasInitialized: state.app.managerHasInitialized,
-    loadingText: state.app.loadingText,
     currentModals: modalStack.map(modal => modal.name),
   };
 }, actions)(ManagementApp);

upcoming-release-notes/853.md

+---
+category: Bugfix
+authors: [j-f1]
+---
+
+Hide the file list/import screens when loading a budget