diff --git a/apps/passport-client/new-components/screens/Home/SyncIndicator.tsx b/apps/passport-client/new-components/screens/Home/SyncIndicator.tsx index 273012c69a..3b6fd79902 100644 --- a/apps/passport-client/new-components/screens/Home/SyncIndicator.tsx +++ b/apps/passport-client/new-components/screens/Home/SyncIndicator.tsx @@ -1,5 +1,8 @@ import { ReactElement, useEffect, useState } from "react"; -import { useIsSyncSettled } from "../../../src/appHooks"; +import { + useExtraSubscriptionFetchRequested, + useIsSyncSettled +} from "../../../src/appHooks"; import { NewLoader } from "../../shared/NewLoader"; import { Typography } from "../../shared/Typography"; @@ -24,12 +27,16 @@ const getSyncState = (seconds: number): keyof typeof syncStates => { }; export const SyncIndicator = (): ReactElement => { const [syncState, setSyncState] = useState(); + + const extraFetchSubscriptionRequested = useExtraSubscriptionFetchRequested(); const isSyncSettled = useIsSyncSettled(); + const isBackgroundSyncSettled = + isSyncSettled && !extraFetchSubscriptionRequested; useEffect(() => { let seconds = 0; const interval = setInterval(() => { - if (isSyncSettled) { + if (isBackgroundSyncSettled) { seconds += 10; setSyncState(syncStates[getSyncState(seconds)](seconds)); } else { @@ -38,7 +45,7 @@ export const SyncIndicator = (): ReactElement => { } }, 10000); - if (isSyncSettled) { + if (isBackgroundSyncSettled) { seconds += 10; setSyncState(syncStates[getSyncState(seconds)](seconds)); } else { @@ -46,9 +53,9 @@ export const SyncIndicator = (): ReactElement => { seconds = 0; } return () => clearInterval(interval); - }, [isSyncSettled]); + }, [isBackgroundSyncSettled]); - if (isSyncSettled && syncState) { + if (isBackgroundSyncSettled && syncState) { return {syncState}; } return ( diff --git a/apps/passport-client/src/appHooks.ts b/apps/passport-client/src/appHooks.ts index d400d1fb16..a0b32f360b 100644 --- a/apps/passport-client/src/appHooks.ts +++ b/apps/passport-client/src/appHooks.ts @@ -235,8 +235,7 @@ export function useUserShouldAgreeNewPrivacyNotice(): void { export function useIsSyncSettled(): boolean { const isDownloaded = useIsDownloaded(); const loadedIssued = useLoadedIssuedPCDs(); - const extraFetchSubscriptionRequested = useExtraSubscriptionFetchRequested(); - return isDownloaded && loadedIssued && !extraFetchSubscriptionRequested; + return isDownloaded && loadedIssued; } export function useIsLoggedIn(): boolean {