From 49e47bdccc9c5b426110a86faec8bcafaf730147 Mon Sep 17 00:00:00 2001
From: Charis <26616127+charislam@users.noreply.github.com>
Date: Mon, 22 Jan 2024 19:26:10 -0500
Subject: [PATCH] fix performance problem with auth container constantly
 recreated (#20643)

---
 apps/docs/pages/_app.tsx | 38 +++++++++++++++++++-------------------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/apps/docs/pages/_app.tsx b/apps/docs/pages/_app.tsx
index 33f342d6ddc..498dd08d20e 100644
--- a/apps/docs/pages/_app.tsx
+++ b/apps/docs/pages/_app.tsx
@@ -9,7 +9,7 @@ import { createClient } from '@supabase/supabase-js'
 import { QueryClientProvider, useQueryClient } from '@tanstack/react-query'
 import { AuthProvider, ThemeProvider, useTelemetryProps, useThemeSandbox } from 'common'
 import { useRouter } from 'next/router'
-import { PropsWithChildren, useCallback, useEffect, useState } from 'react'
+import { type PropsWithChildren, useCallback, useEffect, useState } from 'react'
 import { AppPropsWithLayout } from 'types'
 import { CommandMenuProvider, PortalToast, useConsent } from 'ui'
 import { TabsProvider } from 'ui/src/components/Tabs'
@@ -45,14 +45,7 @@ function SignOutHandler({ children }: PropsWithChildren) {
   return <>{children}</>
 }
 
-function MyApp({ Component, pageProps }: AppPropsWithLayout) {
-  const router = useRouter()
-  const telemetryProps = useTelemetryProps()
-  const { consentValue, hasAcceptedConsent } = useConsent()
-  const queryClient = useRootQueryClient()
-
-  useThemeSandbox()
-
+function AuthContainer({ children }: PropsWithChildren) {
   const [supabase] = useState(() =>
     IS_PLATFORM
       ? createClient(
@@ -62,6 +55,23 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) {
       : undefined
   )
 
+  return IS_PLATFORM ? (
+    <SessionContextProvider supabaseClient={supabase}>
+      <AuthProvider>{children}</AuthProvider>
+    </SessionContextProvider>
+  ) : (
+    <AuthProvider>{children}</AuthProvider>
+  )
+}
+
+function MyApp({ Component, pageProps }: AppPropsWithLayout) {
+  const router = useRouter()
+  const telemetryProps = useTelemetryProps()
+  const { consentValue, hasAcceptedConsent } = useConsent()
+  const queryClient = useRootQueryClient()
+
+  useThemeSandbox()
+
   const handlePageTelemetry = useCallback(
     (route: string) => {
       if (IS_PLATFORM) {
@@ -177,16 +187,6 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) {
     }
   }, [router])
 
-  const AuthContainer = ({ children }) => {
-    return IS_PLATFORM ? (
-      <SessionContextProvider supabaseClient={supabase}>
-        <AuthProvider>{children}</AuthProvider>
-      </SessionContextProvider>
-    ) : (
-      <AuthProvider>{children}</AuthProvider>
-    )
-  }
-
   return (
     <>
       <QueryClientProvider client={queryClient}>