Merge pull request #6662 from supabase/fix/infinite-loading-on-projectlayout

fix: infinite loading on some pages using ProjectLayout

studio/components/layouts/ProjectLayout/ProjectLayout.tsx

@@ -58,7 +58,9 @@ const ProjectLayout = ({
   )
 }
 
-export default withAuth(ProjectLayout)
+export const ProjectLayoutWithAuth = withAuth(ProjectLayout)
+
+export default ProjectLayout
 
 interface MenuBarWrapperProps {
   isLoading: boolean

studio/components/layouts/index.ts

@@ -1,5 +1,5 @@
 import AuthLayout from './AuthLayout/AuthLayout'
-import ProjectLayout from './ProjectLayout/ProjectLayout'
+import ProjectLayout, { ProjectLayoutWithAuth } from './ProjectLayout/ProjectLayout'
 import TableEditorLayout from './TableEditorLayout/TableEditorLayout'
 import SQLEditorLayout from './SQLEditorLayout/SQLEditorLayout'
 import DatabaseLayout from './DatabaseLayout/DatabaseLayout'
@@ -15,6 +15,7 @@ import BillingLayout from './BillingLayout'
 import LogsExplorerLayout from './LogsExplorerLayout/LogsExplorerLayout'
 
 export {
+  ProjectLayoutWithAuth,
   AuthLayout,
   DatabaseLayout,
   DocsLayout,

studio/pages/project/[ref]/building.tsx

@@ -1,6 +1,6 @@
 import { FC, useEffect } from 'react'
 import { useRouter } from 'next/router'
-import ProjectLayout from 'components/layouts'
+import { ProjectLayoutWithAuth } from 'components/layouts'
 import { NextPageWithLayout } from 'types'
 
 const ProjectBuildingPage: NextPageWithLayout = () => {
@@ -8,7 +8,7 @@ const ProjectBuildingPage: NextPageWithLayout = () => {
 }
 
 ProjectBuildingPage.getLayout = (page) => (
-  <ProjectLayout title="Project Building">{page}</ProjectLayout>
+  <ProjectLayoutWithAuth title="Project Building">{page}</ProjectLayoutWithAuth>
 )
 
 export default ProjectBuildingPage

studio/pages/project/[ref]/index.tsx

@@ -4,7 +4,7 @@ import { useStore } from 'hooks'
 import { ExampleProject, ClientLibrary } from 'components/interfaces/Home'
 import { CLIENT_LIBRARIES, EXAMPLE_PROJECTS } from 'components/interfaces/Home/Home.constants'
 import { IS_PLATFORM } from 'lib/constants'
-import ProjectLayout from 'components/layouts'
+import { ProjectLayoutWithAuth } from 'components/layouts'
 import ProjectUsageSection from 'components/interfaces/Home/ProjectUsageSection'
 import { NextPageWithLayout } from 'types'
 
@@ -47,6 +47,6 @@ const Home: NextPageWithLayout = () => {
   )
 }
 
-Home.getLayout = (page) => <ProjectLayout>{page}</ProjectLayout>
+Home.getLayout = (page) => <ProjectLayoutWithAuth>{page}</ProjectLayoutWithAuth>
 
 export default observer(Home)