From b41eee08360aa6e1c694ad27140dab1097f05280 Mon Sep 17 00:00:00 2001
From: MUI bot <2109932+Janpot@users.noreply.github.com>
Date: Tue, 6 Feb 2024 05:52:08 +0100
Subject: [PATCH] Show loading indicator when runtime config is loading in
 query editor

---
 .../QueryEditor/QueryEditorPanel.tsx          | 45 +++++++++----------
 .../PageEditor/QueryEditor/index.tsx          |  6 ++-
 2 files changed, 24 insertions(+), 27 deletions(-)

diff --git a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/QueryEditor/QueryEditorPanel.tsx b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/QueryEditor/QueryEditorPanel.tsx
index c2e63f95e9d..a80c1074d2a 100644
--- a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/QueryEditor/QueryEditorPanel.tsx
+++ b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/QueryEditor/QueryEditorPanel.tsx
@@ -173,10 +173,7 @@ export default function QueryEditorPanel({ draft, saved }: QueryEditorProps) {
   const { dom } = useAppState();
   const projectApi = useProjectApi();
 
-  const { data: runtimeConfig, status: runtimeConfigFetchStatus } = projectApi.useQuery(
-    'getRuntimeConfig',
-    [],
-  );
+  const { data: runtimeConfig } = projectApi.useSuspenseQuery('getRuntimeConfig', []);
 
   const connectionId =
     appDom.deref(saved ? saved?.attributes?.connectionId : draft?.attributes?.connectionId) ?? null;
@@ -213,27 +210,25 @@ export default function QueryEditorPanel({ draft, saved }: QueryEditorProps) {
   return dataSourceId && dataSource && queryEditorContext ? (
     <ConnectionContextProvider value={queryEditorContext}>
       <Box sx={{ height: '100%', p: 0, overflow: 'hidden' }}>
-        {draft && runtimeConfigFetchStatus === 'success' ? (
-          <dataSource.QueryEditor
-            connectionParams={connectionParams}
-            value={draft}
-            globalScope={pageState}
-            globalScopeMeta={globalScopeMeta}
-            execApi={execPrivate}
-            runtimeConfig={runtimeConfig}
-            settingsTab={
-              <QuerySettingsTab
-                {...{
-                  draft,
-                  liveEnabled,
-                  pageState,
-                  globalScopeMeta,
-                  jsBrowserRuntime,
-                }}
-              />
-            }
-          />
-        ) : null}
+        <dataSource.QueryEditor
+          connectionParams={connectionParams}
+          value={draft}
+          globalScope={pageState}
+          globalScopeMeta={globalScopeMeta}
+          execApi={execPrivate}
+          runtimeConfig={runtimeConfig}
+          settingsTab={
+            <QuerySettingsTab
+              {...{
+                draft,
+                liveEnabled,
+                pageState,
+                globalScopeMeta,
+                jsBrowserRuntime,
+              }}
+            />
+          }
+        />
       </Box>
     </ConnectionContextProvider>
   ) : (
diff --git a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/QueryEditor/index.tsx b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/QueryEditor/index.tsx
index add0a5d65f1..48f5ce0197e 100644
--- a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/QueryEditor/index.tsx
+++ b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/QueryEditor/index.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { NodeId } from '@mui/toolpad-core';
-import { Stack, Chip, Tab, IconButton } from '@mui/material';
+import { Stack, Chip, Tab, IconButton, LinearProgress } from '@mui/material';
 import { LoadingButton, TabList, TabContext, TabPanel } from '@mui/lab';
 import ClearOutlinedIcon from '@mui/icons-material/ClearOutlined';
 import CircleIcon from '@mui/icons-material/Circle';
@@ -297,7 +297,9 @@ export default function QueryEditor() {
                   overflow: 'hidden',
                 }}
               >
-                <QueryEditorPanel draft={query.draft} saved={query.saved} />
+                <React.Suspense fallback={<LinearProgress />}>
+                  <QueryEditorPanel draft={query.draft} saved={query.saved} />
+                </React.Suspense>
               </TabPanel>
             );
           }