fix: avoid flash target page show

web/src/layout/AuthLayout.tsx

@@ -11,12 +11,15 @@ const AuthLayout = () => {
 
   const loadingAccounts = useAuth((state) => state.loadingAccounts);
   const loadAccounts = useAuth((state) => state.loadAccounts);
+  const hasLoadedAccounts = useAuth((state) => state.hasLoadedAccounts);
+
   const activeAccount = useAuth((state) => state.activeAccount);
 
   const hasAccounts = useAuth((state) => state.accounts.length > 0);
 
-  const fetchingProfile = useAuth((state) => state.authenticating);
+  const authenticating = useAuth((state) => state.authenticating);
   const authenticate = useAuth((state) => state.authenticate);
+  const hasAuthenticated = useAuth((state) => state.hasAuthenticated);
 
   const signInRequired = useAuth((state) => state.signInRequired);
 
@@ -32,20 +35,12 @@ const AuthLayout = () => {
     return true;
   }, [location.pathname]);
 
-  console.log({
-    isAuthPage,
-    loadingAccounts,
-    fetchingProfile,
-    connecting,
-    dbConnected,
-  });
-
   const loading = useMemo(() => {
     if (isAuthPage) {
       return connecting;
     }
-    return loadingAccounts || fetchingProfile || connecting;
-  }, [connecting, fetchingProfile, isAuthPage, loadingAccounts]);
+    return (!hasAuthenticated || !hasLoadedAccounts) || loadingAccounts || authenticating || connecting;
+  }, [isAuthPage, hasAuthenticated, hasLoadedAccounts, loadingAccounts, authenticating, connecting]);
 
   useEffect(() => {
     connect();

web/src/store/auth.ts

@@ -17,6 +17,9 @@ export interface IAuthState {
   accounts: LocalAccount[];
   signInRequired: boolean;
 
+  hasAuthenticated: boolean;
+  hasLoadedAccounts: boolean;
+
   loadAccounts: () => Promise<void>;
   updateActiveAccount: (account: LocalAccount) => Promise<void>;
   authenticate: () => Promise<void>;
@@ -47,6 +50,9 @@ export const useAuth = create<IAuthState>((set, get) => ({
   loadingAccounts: false,
   signInRequired: false,
 
+  hasAuthenticated: false,
+  hasLoadedAccounts: false,
+
   updateActiveAccount: async (account) => {
     set({ activeAccount: account });
 
@@ -82,7 +88,12 @@ export const useAuth = create<IAuthState>((set, get) => ({
       set({ signInRequired: true });
     }
 
-    set({ activeAccount: account, accounts, loadingAccounts: false });
+    set({
+      activeAccount: account,
+      accounts,
+      loadingAccounts: false,
+      hasLoadedAccounts: true,
+    });
   },
 
   authenticate: async () => {
@@ -114,7 +125,7 @@ export const useAuth = create<IAuthState>((set, get) => ({
       // TODO: set error
       console.log(err);
     } finally {
-      set({ authenticating: false });
+      set({ authenticating: false, hasAuthenticated: true });
     }
   },