refactor: remove emotion cache to stop logos from flashing

joachimzeelmaekers · joachimzeelmaekers · commit c5ca53f32039 · 2024-09-11T10:48:12.000+02:00
diff --git a/package.json b/package.json
@@ -10,7 +10,6 @@
   },
   "dependencies": {
     "@datacamp/waffles": "5.12.0",
-    "@emotion/cache": "^11.13.1",
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
     "@octokit/graphql": "^4.5.8",
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,23 +1,19 @@
 import '../styles/index.css';
 
 import { ToastProvider } from '@datacamp/waffles/toast';
-import createCache from '@emotion/cache';
-import { CacheProvider } from '@emotion/react';
 import type { AppProps } from 'next/app';
 import { createContext, useEffect, useState } from 'react';
 import ReactGA4 from 'react-ga4';
 
 import * as gtag from '../lib/gtag';
 
-const emotionCache = createCache({ key: 'rdocs' });
-
 export const ThemeContext = createContext({
   theme: 'light',
   toggleTheme: () => null,
 });
 
 export default function MyApp({ Component, pageProps }: AppProps) {
-  const [theme, setTheme] = useState('light');
+  const [theme, setTheme] = useState<string>();
 
   function toggleTheme() {
     if (theme === 'light') {
@@ -44,12 +40,10 @@ export default function MyApp({ Component, pageProps }: AppProps) {
   }, [theme]);
 
   return (
-    <CacheProvider value={emotionCache}>
-      <ThemeContext.Provider value={{ theme, toggleTheme }}>
-        <ToastProvider>
-          <Component {...pageProps} />
-        </ToastProvider>
-      </ThemeContext.Provider>
-    </CacheProvider>
+    <ThemeContext.Provider value={{ theme, toggleTheme }}>
+      <ToastProvider>
+        <Component {...pageProps} />
+      </ToastProvider>
+    </ThemeContext.Provider>
   );
 }
diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -1,18 +1,11 @@
 /* eslint-disable class-methods-use-this */
-import Document, {
-  DocumentContext,
-  Head,
-  Html,
-  Main,
-  NextScript,
-} from 'next/document';
-
-class MyDocument extends Document {
-  static async getInitialProps(ctx: DocumentContext) {
-    const initialProps = await Document.getInitialProps(ctx);
-    return { ...initialProps };
-  }
+import NextDocument, { Head, Html, Main, NextScript } from 'next/document';
 
+class MyDocument extends NextDocument {
+  // static async getInitialProps(ctx: DocumentContext) {
+  //   const initialProps = await Document.getInitialProps(ctx);
+  //   return { ...initialProps };
+  // }
   render() {
     return (
       <Html lang="en">
diff --git a/yarn.lock b/yarn.lock
@@ -271,7 +271,7 @@
     source-map "^0.5.7"
     stylis "4.2.0"
 
-"@emotion/cache@^11.13.0", "@emotion/cache@^11.13.1":
+"@emotion/cache@^11.13.0":
   version "11.13.1"
   resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.13.1.tgz#fecfc54d51810beebf05bf2a161271a1a91895d7"
   integrity sha512-iqouYkuEblRcXmylXIwwOodiEK5Ifl7JcX7o6V4jI3iW4mLXX3dmt5xwBtIkJiQEXFAI+pC8X0i67yiPkH9Ucw==
