fix: image load flash by setting emotion cache true in next config, r…

…emoved cache provider (#1038)
chaynHQ · Jul 17, 2024 · 8400046 · 8400046
1 parent 36d42e6
commit 8400046
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 20 deletions.
diff --git a/next.config.js b/next.config.js
@@ -30,6 +30,9 @@ module.exports = withBundleAnalyzer(
       NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
       NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID: process.env.NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID,
     },
+    compiler: {
+      emotion: true,
+    },
     images: {
       domains: ['a.storyblok.com'],
     },

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,4 +1,4 @@
-import { CacheProvider, EmotionCache } from '@emotion/react';
+import { EmotionCache } from '@emotion/react';
 import CssBaseline from '@mui/material/CssBaseline';
 import { ThemeProvider } from '@mui/material/styles';
 // Import the functions you need from the SDKs you need
@@ -82,25 +82,23 @@ function MyApp(props: MyAppProps) {
           <title>Bloom</title>
           <meta name="viewport" content="initial-scale=1, width=device-width" />
         </Head>
-        <CacheProvider value={emotionCache}>
-          <CrispScript />
-          <ThemeProvider theme={theme}>
-            <CssBaseline />
-            <TopBar />
-            <AppBarSpacer />
-            {pathHead !== 'partner-admin' && <LeaveSiteButton />}
-            <AuthGuard>
-              <Component {...pageProps} />
-            </AuthGuard>
-            <Footer />
-            <Consent />
-            {!!process.env.NEXT_PUBLIC_HOTJAR_ID && process.env.NEXT_PUBLIC_ENV !== 'local' && (
-              <Hotjar id={process.env.NEXT_PUBLIC_HOTJAR_ID} sv={6} strategy="lazyOnload" />
-            )}
-            {/* Vercel analytics */}
-            <Analytics />
-          </ThemeProvider>
-        </CacheProvider>
+        <CrispScript />
+        <ThemeProvider theme={theme}>
+          <CssBaseline />
+          <TopBar />
+          <AppBarSpacer />
+          {pathHead !== 'partner-admin' && <LeaveSiteButton />}
+          <AuthGuard>
+            <Component {...pageProps} />
+          </AuthGuard>
+          <Footer />
+          <Consent />
+          {!!process.env.NEXT_PUBLIC_HOTJAR_ID && process.env.NEXT_PUBLIC_ENV !== 'local' && (
+            <Hotjar id={process.env.NEXT_PUBLIC_HOTJAR_ID} sv={6} strategy="lazyOnload" />
+          )}
+          {/* Vercel analytics */}
+          <Analytics />
+        </ThemeProvider>
       </NextIntlClientProvider>
     </ErrorBoundary>
   );