use defaultfallback data for apisession (github#29719)

* don't get available languages from session

* update useSession

* one more fix

* use default session till XHR comes in

* warn on error

Author: Peter Bengtsson

components/hooks/useSession.ts

@@ -1,6 +1,10 @@
 import type { ThemeProviderProps } from '@primer/react'
+import { useRouter } from 'next/router'
+import { useEffect } from 'react'
 import useSWR from 'swr'
 
+import { getTheme } from '../../lib/get-theme'
+
 export default async function fetcher<JSON = any>(
   input: RequestInfo,
   init?: RequestInit
@@ -11,7 +15,7 @@ export default async function fetcher<JSON = any>(
 
 export type Session = {
   isSignedIn: boolean
-  csrfToken: string
+  csrfToken?: string
   userLanguage: string // en, es, ja, cn
   theme: {
     colorMode: Pick<ThemeProviderProps, 'colorMode'>
@@ -25,8 +29,27 @@ export type Session = {
   }
 }
 
+const defaultSession: Session = {
+  isSignedIn: false,
+  userLanguage: 'en', // en, es, ja, cn
+  theme: getTheme({}), // as if no cookie was present
+  themeCss: getTheme({}, true), // as if no cookie was present
+}
 // React hook version
 export function useSession() {
-  const { data: session, error } = useSWR<Session>('/api/session', fetcher)
-  return { session, isLoadingSession: !error && !session }
+  const { locale } = useRouter()
+
+  const { data: session, error } = useSWR<Session>('/api/session', fetcher, {
+    // Use the current language, as per the URL, until we know what the
+    // user actually prefers.
+    fallbackData: Object.assign({}, defaultSession, { userLanguage: locale }),
+  })
+
+  useEffect(() => {
+    if (error) {
+      console.warn('An error occurred loading the user session', error)
+    }
+  }, [error])
+
+  return { session }
 }

pages/_app.tsx

@@ -19,9 +19,11 @@ type MyAppProps = AppProps & {
 type colorModeAuto = Pick<ThemeProviderProps, 'colorMode'>
 
 const MyApp = ({ Component, pageProps, languagesContext }: MyAppProps) => {
-  const { session, isLoadingSession } = useSession()
+  const { session } = useSession()
   useEffect(() => {
-    events(session?.csrfToken)
+    if (session?.csrfToken) {
+      events(session.csrfToken)
+    }
     experiment()
   }, [session])
 
@@ -64,10 +66,6 @@ const MyApp = ({ Component, pageProps, languagesContext }: MyAppProps) => {
             data-color-mode={session?.themeCss?.colorMode || 'auto'}
             data-dark-theme={session?.themeCss?.nightTheme || 'dark'}
             data-light-theme={session?.themeCss?.dayTheme || 'light'}
-            style={
-              /* render a mostly gray background until we know the color mode via XHR */
-              { opacity: isLoadingSession ? 0.1 : 1 }
-            }
           >
             <LanguagesContext.Provider value={languagesContext}>
               <Component {...pageProps} />