[superset] branch master updated: chore: Improves D2D loading indicator (#21908)

[mi...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

michaelsmolina pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git


The following commit(s) were added to refs/heads/master by this push:
     new 3da9687328 chore: Improves D2D loading indicator (#21908)
3da9687328 is described below

commit 3da9687328cdcc390876498a734547cf58dc2613
Author: Michael S. Molina <70...@users.noreply.github.com>
AuthorDate: Fri Oct 21 13:24:57 2022 -0300

    chore: Improves D2D loading indicator (#21908)
---
 .../Chart/DrillDetail/DrillDetailPane.test.tsx     |  4 +--
 .../Chart/DrillDetail/DrillDetailPane.tsx          | 30 ++++++++++++----------
 2 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/superset-frontend/src/components/Chart/DrillDetail/DrillDetailPane.test.tsx b/superset-frontend/src/components/Chart/DrillDetail/DrillDetailPane.test.tsx
index 45a342b5fc..4b42c39da8 100644
--- 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
index 7d2d572d12..9451cae526 100644
--- 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}
     </>
   );