fix: offline mode channel hydration issues

package/src/components/ChannelList/hooks/usePaginatedChannels.ts

@@ -191,30 +191,33 @@ export const usePaginatedChannels = <
   const sortStr = useMemo(() => JSON.stringify(sort), [sort]);
 
   useEffect(() => {
-    const loadOfflineChannels = () => {
+    const loadOfflineChannels = async () => {
       if (!client?.user?.id) return;
 
-      getChannelsForFilterSort({
-        currentUserId: client.user.id,
-        filters,
-        sort,
-      })
-        .then((channelsFromDB) => {
-          if (channelsFromDB) {
-            const offlineChannels = client.hydrateActiveChannels(channelsFromDB, {
-              offlineMode: true,
-              skipInitialization: [], // passing empty array will clear out the existing messages from channel state, this removes the possibility of duplicate messages
-            });
-
-            setChannels(offlineChannels);
-            setStaticChannelsActive(true);
-          }
-        })
-        .catch((e) => {
-          console.warn('Failed to get channels from database: ', e);
+      try {
+        const channelsFromDB = await getChannelsForFilterSort({
+          currentUserId: client.user.id,
+          filters,
+          sort,
         });
 
+        if (channelsFromDB) {
+          const offlineChannels = client.hydrateActiveChannels(channelsFromDB, {
+            offlineMode: true,
+            skipInitialization: [], // passing empty array will clear out the existing messages from channel state, this removes the possibility of duplicate messages
+          });
+
+          setChannels(offlineChannels);
+          setStaticChannelsActive(true);
+        }
+      } catch (e) {
+        console.warn('Failed to get channels from database: ', e);
+        return false;
+      }
+
       setActiveQueryType(null);
+
+      return true;
     };
 
     let listener: ReturnType<typeof DBSyncManager.onSyncStatusChange>;
@@ -223,20 +226,24 @@ export const usePaginatedChannels = <
       // and then call queryChannels to ensure any new channels are added to UI.
       listener = DBSyncManager.onSyncStatusChange(async (syncStatus) => {
         if (syncStatus) {
-          loadOfflineChannels();
-          await reloadList();
-          setForceUpdate((u) => u + 1);
+          const loadingChannelsSucceeded = await loadOfflineChannels();
+          if (loadingChannelsSucceeded) {
+            await reloadList();
+            setForceUpdate((u) => u + 1);
+          }
         }
       });
       // On start, load the channels from local db.
-      loadOfflineChannels();
-
-      // If db is already synced (sync api and pending api calls), then
-      // right away call queryChannels.
-      const dbSyncStatus = DBSyncManager.getSyncStatus();
-      if (dbSyncStatus) {
-        reloadList();
-      }
+      loadOfflineChannels().then((success) => {
+        // If db is already synced (sync api and pending api calls), then
+        // right away call queryChannels.
+        if (success) {
+          const dbSyncStatus = DBSyncManager.getSyncStatus();
+          if (dbSyncStatus) {
+            reloadList();
+          }
+        }
+      });
     } else {
       listener = client.on('connection.changed', async (event) => {
         if (event.online) {