diff --git a/web/src/layout/AuthLayout.tsx b/web/src/layout/AuthLayout.tsx index 7b4114d..09a4d7d 100644 --- a/web/src/layout/AuthLayout.tsx +++ b/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(); diff --git a/web/src/store/auth.ts b/web/src/store/auth.ts index 5f1cc7f..26efb71 100644 --- a/web/src/store/auth.ts +++ b/web/src/store/auth.ts @@ -17,6 +17,9 @@ export interface IAuthState { accounts: LocalAccount[]; signInRequired: boolean; + hasAuthenticated: boolean; + hasLoadedAccounts: boolean; + loadAccounts: () => Promise; updateActiveAccount: (account: LocalAccount) => Promise; authenticate: () => Promise; @@ -47,6 +50,9 @@ export const useAuth = create((set, get) => ({ loadingAccounts: false, signInRequired: false, + hasAuthenticated: false, + hasLoadedAccounts: false, + updateActiveAccount: async (account) => { set({ activeAccount: account }); @@ -82,7 +88,12 @@ export const useAuth = create((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((set, get) => ({ // TODO: set error console.log(err); } finally { - set({ authenticating: false }); + set({ authenticating: false, hasAuthenticated: true }); } },