diff --git a/package/src/components/Chat/Chat.tsx b/package/src/components/Chat/Chat.tsx index 428d409388..c946864db8 100644 --- a/package/src/components/Chat/Chat.tsx +++ b/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) => 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 ( value={chatContext}> diff --git a/package/src/components/Chat/hooks/__tests__/useAppSettings.test.tsx b/package/src/components/Chat/hooks/__tests__/useAppSettings.test.tsx index 76ce016b0b..3f96bdab75 100644 --- a/package/src/components/Chat/hooks/__tests__/useAppSettings.test.tsx +++ b/package/src/components/Chat/hooks/__tests__/useAppSettings.test.tsx @@ -22,6 +22,7 @@ describe('useAppSettings', () => { } as unknown as StreamChat, isOnline, false, + false, ); return {JSON.stringify(appSettings)}; diff --git a/package/src/components/Chat/hooks/useAppSettings.ts b/package/src/components/Chat/hooks/useAppSettings.ts index 3eb4bbd4ce..b02965c3ae 100644 --- a/package/src/components/Chat/hooks/useAppSettings.ts +++ b/package/src/components/Chat/hooks/useAppSettings.ts @@ -10,12 +10,14 @@ export const useAppSettings = < client: StreamChat, isOnline: boolean | null, enableOfflineSupport: boolean, + initialisingDatabase: boolean, ): AppSettingsAPIResponse | null => { const [appSettings, setAppSettings] = useState(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; };