fix: missing userSyncStatus db table upon clean install (#2001)

* fix: missing userSyncStatus db upon clean install

* fix: broken test

* fix: failing test

package/src/components/Chat/Chat.tsx

@@ -167,6 +167,8 @@ const ChatWithContext = <
     closeConnectionOnBackground,
   );
 
+  const [initialisingDatabase, setInitialisingDatabase] = useState(enableOfflineSupport);
+
   /**
    * Setup muted user listener
    * TODO: reimplement
@@ -196,7 +198,16 @@ const ChatWithContext = <
 
   const setActiveChannel = (newChannel?: Channel<StreamChatGenerics>) => setChannel(newChannel);
 
-  const appSettings = useAppSettings(client, isOnline, enableOfflineSupport);
+  useEffect(() => {
+    if (client.user?.id && enableOfflineSupport) {
+      setInitialisingDatabase(true);
+      QuickSqliteClient.initializeDatabase();
+      DBSyncManager.init(client as unknown as StreamChat);
+      setInitialisingDatabase(false);
+    }
+  }, [client?.user?.id, enableOfflineSupport]);
+
+  const appSettings = useAppSettings(client, isOnline, enableOfflineSupport, initialisingDatabase);
 
   const chatContext = useCreateChatContext({
     appSettings,
@@ -210,19 +221,12 @@ const ChatWithContext = <
     setActiveChannel,
   });
 
-  useEffect(() => {
-    if (client.user?.id && enableOfflineSupport) {
-      QuickSqliteClient.initializeDatabase();
-      DBSyncManager.init(client as unknown as StreamChat);
-    }
-  }, [client?.user?.id]);
-
   useSyncDatabase({
     client,
     enableOfflineSupport,
   });
 
-  if (loadingTranslators) return null;
+  if (loadingTranslators || initialisingDatabase) return null;
 
   return (
     <ChatProvider<StreamChatGenerics> value={chatContext}>

package/src/components/Chat/hooks/__tests__/useAppSettings.test.tsx

@@ -22,6 +22,7 @@ describe('useAppSettings', () => {
         } as unknown as StreamChat,
         isOnline,
         false,
+        false,
       );
 
       return <Text>{JSON.stringify(appSettings)}</Text>;

package/src/components/Chat/hooks/useAppSettings.ts

@@ -10,12 +10,14 @@ export const useAppSettings = <
   client: StreamChat<StreamChatGenerics>,
   isOnline: boolean | null,
   enableOfflineSupport: boolean,
+  initialisingDatabase: boolean,
 ): AppSettingsAPIResponse | null => {
   const [appSettings, setAppSettings] = useState<AppSettingsAPIResponse | null>(null);
   const isMounted = useRef(true);
 
   useEffect(() => {
     async function enforeAppSettings() {
+      if (initialisingDatabase) return;
       if (!client.userID) return;
 
       if (!isOnline && enableOfflineSupport) {
@@ -46,7 +48,7 @@ export const useAppSettings = <
     return () => {
       isMounted.current = false;
     };
-  }, [client, isOnline]);
+  }, [client, isOnline, initialisingDatabase]);
 
   return appSettings;
 };