Pages should load when data is already initialized, and not everytime its loading

studio/components/layouts/AuthLayout/AuthLayout.tsx

@@ -15,16 +15,15 @@ interface Props {
 
 const AuthLayout: FC<Props> = ({ title, children }) => {
   const { ui, meta } = useStore()
-  const { isLoading, error } = meta.tables
+  const { isInitialized, isLoading, error } = meta.tables
   const projectRef = ui.selectedProject?.ref ?? 'default'
 
   const router = useRouter()
   const page = router.pathname.split('/')[4]
 
-  const [loaded, setLoaded] = useState<boolean>(false)
+  const [loaded, setLoaded] = useState<boolean>(isInitialized)
 
   useEffect(() => {
-    // I think we should just shift the loading of things into the page level
     meta.tables.load()
   }, [])
 

studio/components/layouts/DatabaseLayout/DatabaseLayout.tsx

@@ -15,13 +15,13 @@ interface Props {
 
 const DatabaseLayout: FC<Props> = ({ title, children }) => {
   const { meta, ui } = useStore()
-  const { isLoading, error } = meta.tables
+  const { isInitialized, isLoading, error } = meta.tables
   const project = ui.selectedProject
 
   const router = useRouter()
   const page = router.pathname.split('/')[4]
 
-  const [loaded, setLoaded] = useState<boolean>(false)
+  const [loaded, setLoaded] = useState<boolean>(isInitialized)
 
   useEffect(() => {
     // Eventually should only load the required stores based on the pages

studio/components/layouts/SQLEditorLayout/SQLEditorLayout.tsx

@@ -14,9 +14,9 @@ interface Props {
 
 const SQLEditorLayout: FC<Props> = ({ title, children }) => {
   const { content } = useStore()
-  const { isLoading, error } = content
+  const { isInitialized, isLoading, error } = content
 
-  const [loaded, setLoaded] = useState(false)
+  const [loaded, setLoaded] = useState(isInitialized)
 
   useEffect(() => {
     content.load()

studio/components/layouts/SQLEditorLayout/SQLEditorMenuOld.tsx

@@ -227,7 +227,7 @@ const SideBarContent = observer(() => {
                 })}
               </div>
             )}
-            <Loading active={contentStore.isLoading}>
+            <Loading active={contentStore.isInitialized}>
               <div className="px-3 space-y-6">
                 {favouriteTabs.length >= 1 && (
                   <div className="editor-product-menu">

studio/components/layouts/TableEditorLayout/TableEditorLayout.tsx

@@ -28,9 +28,9 @@ const TableEditorLayout: FC<Props> = ({
   children,
 }) => {
   const { meta } = useStore()
-  const { isLoading, error } = meta.tables
+  const { isInitialized, isLoading, error } = meta.tables
 
-  const [loaded, setLoaded] = useState<boolean>(false)
+  const [loaded, setLoaded] = useState<boolean>(isInitialized)
 
   useEffect(() => {
     meta.schemas.load()

studio/components/layouts/TableEditorLayout/TableEditorMenu.tsx

@@ -97,7 +97,7 @@ const TableEditorMenu: FC<Props> = ({
     <div className="my-6 flex flex-col flex-grow">
       {/* Schema selection dropdown */}
       <div className="mx-4">
-        {meta.schemas.isLoading ? (
+        {!meta.schemas.isInitialized ? (
           <div className="h-[30px] border border-gray-500 px-3 rounded flex items-center space-x-3">
             <IconLoader className="animate-spin" size={14} />
             <Typography.Text small>Loading schemas...</Typography.Text>

studio/stores/content/ProjectContentStore.ts

@@ -11,6 +11,7 @@ import { API_URL } from 'lib/constants'
 
 export interface IProjectContentStore {
   isLoading: boolean
+  isInitialized: boolean
   error: any
 
   load: () => void
@@ -47,6 +48,10 @@ export default class ProjectContentStore implements IProjectContentStore {
     return this.state === this.STATES.INITIAL || this.state === this.STATES.LOADING
   }
 
+  get isInitialized() {
+    return this.state !== this.STATES.INITIAL
+  }
+
   async fetchData() {
     const headers = {
       'Content-Type': 'application/json',