Fix flash of incorrect theme for @primer/components (github#24123)

* Pass color mode from server to ThemeProvider

* Add preventSSRMismatch

* Fix bad merge, my bad.

* use release candidate for csrf safe approach

* upgrade primer/react to 34.7.1

Co-authored-by: Mike Surowiec <[email protected]>

Author: siddharthkp

package-lock.json

@@ -11,9 +11,9 @@
   "dependencies": {
     "@github/failbot": "0.8.0",
     "@primer/css": "^19.4.0",
+    "@primer/react": "^34.7.1",
     "@primer/octicons": "17.0.0",
     "@primer/octicons-react": "17.0.0",
-    "@primer/react": "^34.6.0",
     "@react-aria/ssr": "^3.1.0",
     "accept-language-parser": "^1.5.0",
     "ajv": "^8.9.0",

package.json

@@ -2,7 +2,7 @@ import React, { useEffect } from 'react'
 import App from 'next/app'
 import type { AppProps, AppContext } from 'next/app'
 import Head from 'next/head'
-import { useTheme, ThemeProvider } from '@primer/react'
+import { ThemeProvider, ThemeProviderProps } from '@primer/react'
 import { SSRProvider } from '@react-aria/ssr'
 import { defaultComponentThemeProps, getThemeProps } from 'components/lib/getThemeProps'
 
@@ -14,7 +14,7 @@ import { LanguagesContext, LanguagesContextT } from 'components/context/Language
 
 type MyAppProps = AppProps & {
   csrfToken: string
-  themeProps: typeof defaultComponentThemeProps
+  themeProps: typeof defaultComponentThemeProps & Pick<ThemeProviderProps, 'colorMode'>
   languagesContext: LanguagesContextT
 }
 const MyApp = ({ Component, pageProps, csrfToken, themeProps, languagesContext }: MyAppProps) => {
@@ -51,9 +51,13 @@ const MyApp = ({ Component, pageProps, csrfToken, themeProps, languagesContext }
         <meta name="csrf-token" content={csrfToken} />
       </Head>
       <SSRProvider>
-        <ThemeProvider dayScheme={themeProps.dayTheme} nightScheme={themeProps.nightTheme}>
+        <ThemeProvider
+          colorMode={themeProps.colorMode}
+          dayScheme={themeProps.dayTheme}
+          nightScheme={themeProps.nightTheme}
+          preventSSRMismatch
+        >
           <LanguagesContext.Provider value={languagesContext}>
-            <SetTheme themeProps={themeProps} />
             <Component {...pageProps} />
           </LanguagesContext.Provider>
         </ThemeProvider>
@@ -76,15 +80,4 @@ MyApp.getInitialProps = async (appContext: AppContext) => {
   }
 }
 
-const SetTheme = ({ themeProps }: { themeProps: typeof defaultComponentThemeProps }) => {
-  // Cause primer/components to re-evaluate the 'auto' color mode on client side render
-  const { setColorMode } = useTheme()
-  useEffect(() => {
-    setTimeout(() => {
-      setColorMode(themeProps.colorMode as any)
-    })
-  }, [])
-  return null
-}
-
 export default MyApp