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>

1 files changed, 9 insertions, 9 deletions

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>
   );
 }