Tweak loading states (#541)

browser-extensions/chrome/src/app/pages/CredentialsList.tsx

@@ -26,7 +26,7 @@ const CredentialsList: React.FC = () => {
   /**
    * Loading state with minimum duration for more fluid UX.
    */
-  const [isLoading, setIsLoading] = useMinDurationLoading(true, 150);
+  const [isLoading, setIsLoading] = useMinDurationLoading(true, 100);
 
   /**
    * Retrieve latest vault and refresh the page.
@@ -56,7 +56,6 @@ const CredentialsList: React.FC = () => {
         const results = dbContext.sqliteClient.getAllCredentials();
         setCredentials(results);
         setIsLoading(false);
-        setIsInitialLoading(false);
       } catch (err) {
         console.error('Error loading credentials:', err);
       }
@@ -87,7 +86,6 @@ const CredentialsList: React.FC = () => {
         const results = dbContext.sqliteClient.getAllCredentials();
         setCredentials(results);
         setIsLoading(false);
-        setIsInitialLoading(false);
       } catch (err) {
         console.error('Error loading credentials:', err);
       }
@@ -96,6 +94,15 @@ const CredentialsList: React.FC = () => {
     checkStatus();
   }, [authContext, dbContext?.sqliteClient, dbContext?.vaultRevision, onRefresh, webApi, setIsInitialLoading, setIsLoading]);
 
+  /**
+   * Make sure the initial loading state is set to false when this component is loaded itself.
+   */
+  useEffect(() => {
+    if (!isLoading) {
+      setIsInitialLoading(false);
+    }
+  }, [setIsInitialLoading, isLoading]);
+
   /**
    * Manually refresh the credentials list.
    */

browser-extensions/chrome/src/app/pages/EmailsList.tsx

@@ -20,7 +20,7 @@ const EmailsList: React.FC = () => {
   /**
    * Loading state with minimum duration for more fluid UX.
    */
-  const [isLoading, setIsLoading] = useMinDurationLoading(true, 150);
+  const [isLoading, setIsLoading] = useMinDurationLoading(true, 100);
 
   /**
    * Loads emails from the web API.

browser-extensions/chrome/src/app/pages/Home.tsx

@@ -15,39 +15,40 @@ const Home: React.FC = () => {
   const authContext = useAuth();
   const dbContext = useDb();
   const navigate = useNavigate();
-  const webApi = useWebApi();
   const { setIsInitialLoading } = useLoading();
   const [isInlineUnlockMode, setIsInlineUnlockMode] = useState(false);
-  const initialized = authContext.isInitialized && dbContext.dbInitialized;
-  const needsUnlock = initialized && (!authContext.isLoggedIn || !dbContext.dbAvailable);
+
+  // Initialization state.
+  const isFullyInitialized = authContext.isInitialized && dbContext.dbInitialized;
+  const isAuthenticated = authContext.isLoggedIn;
+  const isDatabaseAvailable = dbContext.dbAvailable;
+  const requireLoginOrUnlock = isFullyInitialized && (!isAuthenticated || !isDatabaseAvailable);
 
   useEffect(() => {
-    // Detect if the user is coming from the unlock page with mode=inline_unlock
+    // Detect if the user is coming from the unlock page with mode=inline_unlock.
     const urlParams = new URLSearchParams(window.location.search);
     const isInlineUnlockMode = urlParams.get('mode') === 'inline_unlock';
     setIsInlineUnlockMode(isInlineUnlockMode);
 
-    // Do a status check to see if the auth tokens are still valid, if not, redirect to the login page.
-    const checkStatus = async () => {
-      const status = await webApi.get('Status');
-      if (status.status !== 0) {
-        authContext.logout();
-      }
-    };
-
-    if (initialized && !needsUnlock) {
+    // Redirect to credentials if fully initialized and doesn't need unlock.
+    if (isFullyInitialized && !requireLoginOrUnlock) {
       navigate('/credentials', { replace: true });
     }
-  }, [initialized,needsUnlock, isInlineUnlockMode, navigate]);
+  }, [isFullyInitialized, requireLoginOrUnlock, isInlineUnlockMode, navigate]);
+
+  // Show loading state if not fully initialized or when about to redirect to credentials.
+  if (!isFullyInitialized || (isFullyInitialized && !requireLoginOrUnlock)) {
+    // Global loading spinner will be shown by the parent component.
+    return null;
+  }
 
-  // Set initial loading state to false once the page is loaded until here.
   setIsInitialLoading(false);
 
-  if (!authContext.isLoggedIn) {
+  if (!isAuthenticated) {
     return <Login />;
   }
 
-  if (needsUnlock) {
+  if (requireLoginOrUnlock) {
     return <Unlock />;
   }