fix: background sync loading issue (#2168)

fixes the issue where zupass accounts without a devcon ticket will get
into an interstitial loading state every time a background sync happens

cc @ororsatti @ichub

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<string | undefined>();
+
+  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,17 +45,17 @@ export const SyncIndicator = (): ReactElement => {
       }
     }, 10000);
 
-    if (isSyncSettled) {
+    if (isBackgroundSyncSettled) {
       seconds += 10;
       setSyncState(syncStates[getSyncState(seconds)](seconds));
     } else {
       setSyncState(undefined);
       seconds = 0;
     }
     return () => clearInterval(interval);
-  }, [isSyncSettled]);
+  }, [isBackgroundSyncSettled]);
 
-  if (isSyncSettled && syncState) {
+  if (isBackgroundSyncSettled && syncState) {
     return <Typography color="var(--text-tertiary)">{syncState}</Typography>;
   }
   return (

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 {