fix: react suspense race condition

The top-level Suspense might trigger before the StoreProvider sets the
store, which causes an error to be thrown in the useStore hook.

We pass the store explicitly as a prop into the components that should
load before the Suspense, which gets rid of the error.

Signed-off-by: Kristóf Marussy <kristof@marussy.com>

4 files changed, 61 insertions, 53 deletions

diff --git a/package.json b/package.json
index ba09979..a43b84b 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
   "type": "module",
   "main": "packages/main/dist/index.cjs",
   "scripts": {
-    "clean": "rimraf coverage dist packages/*/dist packages/*/*.tsbuildinfo .vite",
+    "clean": "rimraf coverage dist 'packages/*/dist' 'packages/*/*.tsbuildinfo' .vite",
     "test": "node --experimental-vm-modules --no-warnings $(yarn bin jest)",
     "test:ci": "yarn test --ci --coverage --reporters=default --reporters=jest-junit",
     "test:integ": "electron scripts/electronJest.cjs --user-data-dir=userDataDir/integ --config=jest.integ.config.cjs --runInBand",
diff --git a/packages/renderer/src/components/ThemeProvider.tsx b/packages/renderer/src/components/ThemeProvider.tsx
index 2ea2186..0273234 100644
--- a/packages/renderer/src/components/ThemeProvider.tsx
+++ b/packages/renderer/src/components/ThemeProvider.tsx
@@ -23,48 +23,56 @@ import {
   ThemeProvider as MuiThemeProvider,
 } from '@mui/material/styles';
 import { observer } from 'mobx-react-lite';
-import React from 'react';
+import React, { type ReactNode } from 'react';
 
-import { useStore } from './StoreProvider';
+import type RendererStore from '../stores/RendererStore';
 
-export default observer(
-  ({ children }: { children: JSX.Element | JSX.Element[] }) => {
-    const {
-      shared: { shouldUseDarkColors, writingDirection },
-    } = useStore();
-
-    const theme = createTheme({
-      direction: writingDirection,
-      palette: shouldUseDarkColors
-        ? {
-            mode: 'dark',
-            divider: 'rgba(255, 255, 255, 0.22)',
-          }
-        : {
-            mode: 'light',
-            divider: 'rgba(0, 0, 0, 0.24)',
-          },
-      components: {
-        MuiBadge: {
-          styleOverrides: {
-            standard: {
-              // Reduce badge with to make the unread message badge with "99+" unread messages
-              // fit within the sidebar. Applied for all badges for consistency.
-              paddingLeft: 4,
-              paddingRight: 4,
-            },
+function ThemeProvider({
+  children,
+  store: {
+    shared: { shouldUseDarkColors, writingDirection },
+  },
+}: {
+  children?: ReactNode;
+  store: RendererStore;
+}) {
+  const theme = createTheme({
+    direction: writingDirection,
+    palette: shouldUseDarkColors
+      ? {
+          mode: 'dark',
+          divider: 'rgba(255, 255, 255, 0.22)',
+        }
+      : {
+          mode: 'light',
+          divider: 'rgba(0, 0, 0, 0.24)',
+        },
+    components: {
+      MuiBadge: {
+        styleOverrides: {
+          standard: {
+            // Reduce badge with to make the unread message badge with "99+" unread messages
+            // fit within the sidebar. Applied for all badges for consistency.
+            paddingLeft: 4,
+            paddingRight: 4,
           },
         },
-        MuiIconButton: {
-          styleOverrides: {
-            sizeMedium: {
-              padding: 6,
-            },
+      },
+      MuiIconButton: {
+        styleOverrides: {
+          sizeMedium: {
+            padding: 6,
           },
         },
       },
-    });
+    },
+  });
 
-    return <MuiThemeProvider theme={theme}>{children}</MuiThemeProvider>;
-  },
-);
+  return <MuiThemeProvider theme={theme}>{children}</MuiThemeProvider>;
+}
+
+ThemeProvider.defaultProps = {
+  children: undefined,
+};
+
+export default observer(ThemeProvider);
diff --git a/packages/renderer/src/i18n/RtlCacheProvider.tsx b/packages/renderer/src/i18n/RtlCacheProvider.tsx
index be770b8..1303314 100644
--- a/packages/renderer/src/i18n/RtlCacheProvider.tsx
+++ b/packages/renderer/src/i18n/RtlCacheProvider.tsx
@@ -21,21 +21,21 @@
 import type { EmotionCache } from '@emotion/cache';
 import { CacheProvider } from '@emotion/react';
 import { observer } from 'mobx-react-lite';
-import React, { ReactNode } from 'react';
+import React, { type ReactNode } from 'react';
 
-import { useStore } from '../components/StoreProvider';
+import type RendererStore from '../stores/RendererStore';
 
 function RtlCacheProvider({
   children,
+  store: {
+    shared: { writingDirection },
+  },
   rtlCache,
 }: {
   children?: ReactNode;
+  store: RendererStore;
   rtlCache: EmotionCache;
 }): JSX.Element {
-  const {
-    shared: { writingDirection },
-  } = useStore();
-
   return writingDirection === 'rtl' ? (
     <CacheProvider value={rtlCache}>{children}</CacheProvider>
   ) : (
diff --git a/packages/renderer/src/index.tsx b/packages/renderer/src/index.tsx
index 726e00e..9971469 100644
--- a/packages/renderer/src/index.tsx
+++ b/packages/renderer/src/index.tsx
@@ -74,16 +74,16 @@ const App = lazy(() => import('./components/App'));
 function Root(): JSX.Element {
   return (
     <React.StrictMode>
-      <StoreProvider store={store}>
-        <RtlCacheProvider rtlCache={rtlCache}>
-          <ThemeProvider>
-            <CssBaseline enableColorScheme />
-            <Suspense fallback={<Loading />}>
+      <RtlCacheProvider store={store} rtlCache={rtlCache}>
+        <ThemeProvider store={store}>
+          <CssBaseline enableColorScheme />
+          <Suspense fallback={<Loading />}>
+            <StoreProvider store={store}>
               <App devMode={isDevelopment} />
-            </Suspense>
-          </ThemeProvider>
-        </RtlCacheProvider>
-      </StoreProvider>
+            </StoreProvider>
+          </Suspense>
+        </ThemeProvider>
+      </RtlCacheProvider>
     </React.StrictMode>
   );
 }