perf(offline indicator): improve reliability

src/hooks/use-is-subplebbit-offline.ts

@@ -3,11 +3,13 @@ import { useEffect } from 'react';
 import { Subplebbit } from '@plebbit/plebbit-react-hooks';
 import { getFormattedTimeAgo } from '../lib/utils/time-utils';
 import useSubplebbitOfflineStore from '../stores/use-subplebbit-offline-store';
+import useSubplebbitsLoadingStartTimestamps from './use-subplebbits-loading-start-timestamps-store';
 
 const useIsSubplebbitOffline = (subplebbit: Subplebbit) => {
   const { t } = useTranslation();
   const { address, state, updatedAt, updatingState } = subplebbit || {};
   const { subplebbitOfflineState, setSubplebbitOfflineState, initializesubplebbitOfflineState } = useSubplebbitOfflineStore();
+  const subplebbitsLoadingStartTimestamps = useSubplebbitsLoadingStartTimestamps([address]);
 
   useEffect(() => {
     if (address && !subplebbitOfflineState[address]) {
@@ -22,15 +24,13 @@ const useIsSubplebbitOffline = (subplebbit: Subplebbit) => {
   }, [address, state, updatedAt, updatingState, setSubplebbitOfflineState]);
 
   const subplebbitOfflineStore = subplebbitOfflineState[address] || { initialLoad: true };
+  const loadingStartTimestamp = subplebbitsLoadingStartTimestamps[0] || 0;
 
-  const isLoading =
+  const isLoading = subplebbitOfflineStore.initialLoad && (!updatedAt || Date.now() / 1000 - updatedAt >= 60 * 60) && Date.now() / 1000 - loadingStartTimestamp < 30;
-    updatingState === 'resolving-address' ||
-    (updatingState === 'stopped' && state === 'stopped' && !updatedAt) ||
-    (subplebbitOfflineStore.initialLoad && updatingState === 'fetching-ipns' && !updatedAt);
 
-  const isOffline =
+  const isOffline = !isLoading && ((updatedAt && updatedAt < Date.now() / 1000 - 60 * 60) || (!updatedAt && Date.now() / 1000 - loadingStartTimestamp >= 30));
-    !isLoading && ((updatedAt && updatedAt < Date.now() / 1000 - 60 * 60) || updatingState === 'failed' || (updatingState === 'fetching-ipns' && !updatedAt));
 
+  const isOnline = updatedAt && Date.now() / 1000 - updatedAt < 60 * 60;
   const offlineIconClass = isLoading ? 'yellowOfflineIcon' : isOffline ? 'redOfflineIcon' : '';
 
   const offlineTitle = isLoading
@@ -39,7 +39,7 @@ const useIsSubplebbitOffline = (subplebbit: Subplebbit) => {
     ? isOffline && t('posts_last_synced_info', { time: getFormattedTimeAgo(updatedAt), interpolation: { escapeValue: false } })
     : t('subplebbit_offline_info');
 
-  return { isOffline, isOnlineStatusLoading: isLoading, offlineIconClass, offlineTitle };
+  return { isOffline: !isOnline && isOffline, isOnlineStatusLoading: !isOnline && isLoading, offlineIconClass, offlineTitle };
 };
 
 export default useIsSubplebbitOffline;

src/hooks/use-subplebbits-loading-start-timestamps-store.ts

@@ -0,0 +1,42 @@
+import { useEffect, useMemo } from 'react';
+import { create } from 'zustand';
+
+interface SubplebbitsLoadingStartTimestampsState {
+  timestamps: Record<string, number>;
+  addSubplebbits: (subplebbitAddresses: string[]) => void;
+}
+
+const useSubplebbitsLoadingStartTimestampsStore = create<SubplebbitsLoadingStartTimestampsState>((set, get) => ({
+  timestamps: {},
+  addSubplebbits: (subplebbitAddresses) => {
+    const { timestamps } = get();
+    const newTimestamps: Record<string, number> = {};
+    subplebbitAddresses.forEach((subplebbitAddress) => {
+      if (!timestamps[subplebbitAddress]) {
+        newTimestamps[subplebbitAddress] = Math.round(Date.now() / 1000);
+      }
+    });
+    if (Object.keys(newTimestamps).length) {
+      set((state) => ({ timestamps: { ...state.timestamps, ...newTimestamps } }));
+    }
+  },
+}));
+
+const useSubplebbitsLoadingStartTimestamps = (subplebbitAddresses?: string[]) => {
+  const timestampsStore = useSubplebbitsLoadingStartTimestampsStore((state) => state.timestamps);
+  const addSubplebbits = useSubplebbitsLoadingStartTimestampsStore((state) => state.addSubplebbits);
+
+  useEffect(() => {
+    if (subplebbitAddresses) {
+      addSubplebbits(subplebbitAddresses);
+    }
+  }, [subplebbitAddresses, addSubplebbits]);
+
+  const subplebbitsLoadingStartTimestamps = useMemo(() => {
+    return subplebbitAddresses?.map((subplebbitAddress) => timestampsStore[subplebbitAddress]) || [];
+  }, [timestampsStore, subplebbitAddresses]);
+
+  return subplebbitsLoadingStartTimestamps;
+};
+
+export default useSubplebbitsLoadingStartTimestamps;