Merge pull request #751 from CodeForAfrica/fix/robot_ui_fouc

@/Roboshield fix FOUC bug
CodeForAfrica · Jul 3, 2024 · 6c26fd0 · 6c26fd0
2 parents 44b7bf9 + 07c9473
commit 6c26fd0
Show file tree

Hide file tree

Showing 5 changed files with 367 additions and 460 deletions.
diff --git a/apps/roboshield/package.json b/apps/roboshield/package.json
@@ -23,6 +23,7 @@
     "@emotion/styled": "^11.11.5",
     "@mui/icons-material": "^5.15.20",
     "@mui/material": "^5.15.20",
+    "@mui/material-nextjs": "^5.15.11",
     "@mui/utils": "^5.15.20",
     "@mui/x-date-pickers": "^7.7.1",
     "@next/env": "^14.2.4",

diff --git a/apps/roboshield/src/pages/_app.tsx b/apps/roboshield/src/pages/_app.tsx
@@ -7,20 +7,19 @@ import React, { ReactNode } from "react";
 import Page from "@/roboshield/components/Page";
 import { GlobalProvider } from "@/roboshield/context/GlobalContext";
 import theme from "@/roboshield/theme";
-import createEmotionCache from "@/roboshield/utils/createEmotionCache";
-const clientSideEmotionCache = createEmotionCache();
+import { AppCacheProvider } from "@mui/material-nextjs/v14-pagesRouter";
 
 function getDefaultLayout(page: ReactNode, pageProps: any) {
   return <Page {...pageProps}>{page}</Page>;
 }
 
 export default function App(props: AppProps | any) {
-  const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;
+  const { Component, pageProps } = props;
   const getLayout = Component.getLayout || getDefaultLayout;
 
   return (
     <>
-      <CacheProvider value={emotionCache}>
+      <AppCacheProvider {...props}>
         <Head>
           <meta name="viewport" content="initial-scale=1, width=device-width" />
           <title>RoboShield</title>
@@ -31,7 +30,7 @@ export default function App(props: AppProps | any) {
             {getLayout(<Component {...pageProps} />, pageProps)}
           </GlobalProvider>
         </ThemeProvider>
-      </CacheProvider>
+      </AppCacheProvider>
     </>
   );
 }
diff --git a/apps/roboshield/src/pages/_document.tsx b/apps/roboshield/src/pages/_document.tsx
@@ -1,13 +1,37 @@
-import { Html, Head, Main, NextScript } from "next/document";
+import * as React from "react";
+import {
+  Html,
+  Head,
+  Main,
+  NextScript,
+  DocumentProps,
+  DocumentContext,
+} from "next/document";
+import {
+  DocumentHeadTags,
+  DocumentHeadTagsProps,
+  documentGetInitialProps,
+} from "@mui/material-nextjs/v14-pagesRouter";
 
-export default function Document() {
+export default function MyDocument(
+  props: DocumentProps & DocumentHeadTagsProps,
+) {
   return (
     <Html lang="en">
-      <Head />
+      <Head>
+        <link rel="shortcut icon" href="/favicon.ico" />
+        <meta name="emotion-insertion-point" content="" />
+        <DocumentHeadTags {...props} />
+      </Head>
       <body>
         <Main />
         <NextScript />
       </body>
     </Html>
   );
 }
+
+MyDocument.getInitialProps = async (ctx: DocumentContext) => {
+  const finalProps = await documentGetInitialProps(ctx);
+  return finalProps;
+};
diff --git a/apps/roboshield/src/utils/createEmotionCache.ts b/apps/roboshield/src/utils/createEmotionCache.ts