Merge pull request #308 from Build-Squad/minor-fixes-prod

Refactor layout component to include PersistGate for Redux state pers…
Build-Squad · Apr 8, 2024 · add6fcd · add6fcd
2 parents f8b46e5 + 0c9012b
commit add6fcd
Showing 1 changed file with 22 additions and 8 deletions.
diff --git a/src/ui/app/layout.tsx b/src/ui/app/layout.tsx
@@ -9,6 +9,9 @@ import { Provider } from "react-redux";
 import ThemeRegistry from "./ThemeRegistry";
 import Navbar from "./components/navbar";
 import "./globals.css";
+import { PersistGate } from "redux-persist/es/integration/react";
+import persistStore from "redux-persist/es/persistStore";
+import { Backdrop, CircularProgress } from "@mui/material";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -23,6 +26,8 @@ export default function RootLayout({
     storeRef.current = makeStore();
   }
 
+  const persistor = persistStore(storeRef.current);
+
   return (
     <html lang="en">
       <head>
@@ -38,14 +43,23 @@ export default function RootLayout({
           }}
           preventDuplicate
         >
-          <Provider store={storeRef.current}>
-            <ThemeRegistry options={{ key: "mui-theme" }}>
-              <WalletContextProvider>
-                <Navbar />
-                {children}
-              </WalletContextProvider>
-            </ThemeRegistry>
-          </Provider>
+          <PersistGate
+            loading={
+              <Backdrop open={true}>
+                <CircularProgress color="secondary" />
+              </Backdrop>
+            }
+            persistor={persistor}
+          >
+            <Provider store={storeRef.current}>
+              <ThemeRegistry options={{ key: "mui-theme" }}>
+                <WalletContextProvider>
+                  <Navbar />
+                  {children}
+                </WalletContextProvider>
+              </ThemeRegistry>
+            </Provider>
+          </PersistGate>
         </SnackbarProvider>
       </body>
     </html>