Fix: update status syncing atom so its not perpetually syncing (#1948)

Author: neocybereth

apps/namadillo/src/App/Layout/SyncIndicator.tsx

@@ -33,13 +33,14 @@ export const SyncIndicator = (): JSX.Element => {
   const syncStatus = useAtomValue(syncStatusAtom);
   const indexerServicesSyncStatus = useAtomValue(indexerServicesSyncStatusAtom);
   const chainStatus = useAtomValue(chainStatusAtom);
+  const [blockHeightSync, setBlockHeightSync] = useState<boolean | null>(null);
   const [indexerBlockHeight, setIndexerBlockHeight] = useState<number | null>(
     null
   );
   const { errors } = syncStatus;
   const { services } = indexerServicesSyncStatus;
   const isChainStatusError =
-    !chainStatus?.height || !chainStatus?.epoch || !indexerBlockHeight;
+    !chainStatus?.height || !chainStatus?.epoch || !blockHeightSync;
   const api = useAtomValue(indexerApiAtom);
 
   const isError =
@@ -50,7 +51,7 @@ export const SyncIndicator = (): JSX.Element => {
   const isSyncing =
     syncStatus.isSyncing ||
     indexerServicesSyncStatus.isSyncing ||
-    indexerBlockHeight !== chainStatus?.height;
+    !blockHeightSync;
 
   useEffect(() => {
     (async () => {
@@ -59,6 +60,7 @@ export const SyncIndicator = (): JSX.Element => {
         Date.now()
       );
       setIndexerBlockHeight(indexerBlockHeight);
+      setBlockHeightSync(indexerBlockHeight === chainStatus?.height);
     })();
   }, [chainStatus?.height]);
 

apps/namadillo/src/atoms/syncStatus/atoms.ts

@@ -32,7 +32,12 @@ export const syncStatusAtom = atom((get) => {
     get(votedProposalsAtom),
   ];
 
-  const isSyncing = queries.some((q) => q.isFetching);
+  // Change the logic here to only consider a query as "syncing" if:
+  // 1. It's fetching AND not yet successful (initial load) OR
+  // 2. It's in an error state and fetching (trying to recover)
+  const isSyncing = queries.some(
+    (q) => (q.isFetching && !q.isSuccess) || (q.isError && q.isFetching)
+  );
   const isError = queries.some((q) => q.isError);
   const errors = queries.filter((q) => q.isError).map((q) => q.error);