chore: Improves D2D loading indicator (#21908)

apache · Oct 21, 2022 · 3da9687 · 3da9687
1 parent 04b017e
commit 3da9687
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 15 deletions.
diff --git a/superset-frontend/src/components/Chart/DrillDetail/DrillDetailPane.test.tsx b/superset-frontend/src/components/Chart/DrillDetail/DrillDetailPane.test.tsx
@@ -122,11 +122,11 @@ test('should render', async () => {
   expect(container).toBeInTheDocument();
 });
 
-test('should render metadata and table loading indicators', async () => {
+test('should render loading indicator', async () => {
   fetchWithData();
   setup();
   await waitFor(() =>
-    expect(screen.getAllByLabelText('Loading').length).toBe(2),
+    expect(screen.getByLabelText('Loading')).toBeInTheDocument(),
   );
 });
 

diff --git a/superset-frontend/src/components/Chart/DrillDetail/DrillDetailPane.tsx b/superset-frontend/src/components/Chart/DrillDetail/DrillDetailPane.tsx
@@ -194,6 +194,12 @@ export default function DrillDetailPane({
     resultsPages,
   ]);
 
+  // Get datasource metadata
+  const response = useApiV1Resource<Dataset>(`/api/v1/dataset/${datasourceId}`);
+
+  const bootstrapping =
+    (!responseError && !resultsPages.size) || response.status === 'loading';
+
   let tableContent = null;
   if (responseError) {
     // Render error if page download failed
@@ -206,7 +212,7 @@ export default function DrillDetailPane({
         {responseError}
       </pre>
     );
-  } else if (!resultsPages.size) {
+  } else if (bootstrapping) {
     // Render loading if first page hasn't loaded
     tableContent = <Loading />;
   } else if (resultsPage?.total === 0) {
@@ -241,9 +247,6 @@ export default function DrillDetailPane({
     );
   }
 
-  // Get datasource metadata
-  const response = useApiV1Resource<Dataset>(`/api/v1/dataset/${datasourceId}`);
-
   const metadata = useMemo(() => {
     const { status, result } = response;
     const items: ContentType[] = [];
@@ -298,7 +301,6 @@ export default function DrillDetailPane({
           margin-bottom: ${theme.gridUnit * 4}px;
         `}
       >
-        {status === 'loading' && <Loading position="inline-centered" />}
         {status === 'complete' && <MetadataBar items={items} />}
         {status === 'error' && (
           <Alert
@@ -312,14 +314,16 @@ export default function DrillDetailPane({
 
   return (
     <>
-      {metadata}
-      <TableControls
-        filters={filters}
-        setFilters={setFilters}
-        totalCount={resultsPage?.total}
-        loading={isLoading}
-        onReload={handleReload}
-      />
+      {!bootstrapping && metadata}
+      {!bootstrapping && (
+        <TableControls
+          filters={filters}
+          setFilters={setFilters}
+          totalCount={resultsPage?.total}
+          loading={isLoading}
+          onReload={handleReload}
+        />
+      )}
       {tableContent}
     </>
   );