add loading indicator for job backfills (#8004)

dagster-io · May 23, 2022 · f625b6d · f625b6d
1 parent 58230bf
commit f625b6d
Showing 1 changed file with 45 additions and 43 deletions.
diff --git a/js_modules/dagit/packages/core/src/partitions/PartitionViewNew.tsx b/js_modules/dagit/packages/core/src/partitions/PartitionViewNew.tsx
@@ -317,7 +317,7 @@ const JobBackfills = ({
 }) => {
   const [cursorStack, setCursorStack] = React.useState<string[]>(() => []);
   const [cursor, setCursor] = React.useState<string | undefined>();
-  const {data, refetch} = useQuery(JOB_BACKFILLS_QUERY, {
+  const queryResult = useQuery(JOB_BACKFILLS_QUERY, {
     variables: {
       partitionSetName: partitionSet.name,
       repositorySelector,
@@ -327,54 +327,56 @@ const JobBackfills = ({
     partialRefetch: true,
   });
 
+  const refetch = queryResult.refetch;
   React.useEffect(() => {
     refetchCounter && refetch();
   }, [refetch, refetchCounter]);
 
-  if (!data) {
-    return <NonIdealState title="Could not fetch backfill data" icon="error" />;
-  }
-
-  const {backfills, pipelineName} = data?.partitionSetOrError;
-
-  if (!backfills) {
-    return <NonIdealState title={`No backfills for ${pipelineName}`} icon="no-results" />;
-  }
+  return (
+    <Loading queryResult={queryResult}>
+      {({partitionSetOrError}) => {
+        const {backfills, pipelineName} = partitionSetOrError;
 
-  const paginationProps: CursorPaginationProps = {
-    hasPrevCursor: !!cursor,
-    hasNextCursor: backfills && backfills.length === BACKFILL_PAGE_SIZE,
-    popCursor: () => {
-      const nextStack = [...cursorStack];
-      setCursor(nextStack.pop());
-      setCursorStack(nextStack);
-    },
-    advanceCursor: () => {
-      if (cursor) {
-        setCursorStack((current) => [...current, cursor]);
-      }
-      const nextCursor = backfills && backfills[backfills.length - 1].backfillId;
-      if (!nextCursor) {
-        return;
-      }
-      setCursor(nextCursor);
-    },
-    reset: () => {
-      setCursorStack([]);
-      setCursor(undefined);
-    },
-  };
+        if (!backfills) {
+          return <NonIdealState title={`No backfills for ${pipelineName}`} icon="no-results" />;
+        }
 
-  return (
-    <>
-      <BackfillTable
-        backfills={backfills}
-        refetch={refetch}
-        showPartitionSet={false}
-        allPartitions={partitionNames}
-      />
-      <CursorPaginationControls {...paginationProps} />
-    </>
+        const paginationProps: CursorPaginationProps = {
+          hasPrevCursor: !!cursor,
+          hasNextCursor: backfills && backfills.length === BACKFILL_PAGE_SIZE,
+          popCursor: () => {
+            const nextStack = [...cursorStack];
+            setCursor(nextStack.pop());
+            setCursorStack(nextStack);
+          },
+          advanceCursor: () => {
+            if (cursor) {
+              setCursorStack((current) => [...current, cursor]);
+            }
+            const nextCursor = backfills && backfills[backfills.length - 1].backfillId;
+            if (!nextCursor) {
+              return;
+            }
+            setCursor(nextCursor);
+          },
+          reset: () => {
+            setCursorStack([]);
+            setCursor(undefined);
+          },
+        };
+        return (
+          <>
+            <BackfillTable
+              backfills={backfills}
+              refetch={refetch}
+              showPartitionSet={false}
+              allPartitions={partitionNames}
+            />
+            <CursorPaginationControls {...paginationProps} />
+          </>
+        );
+      }}
+    </Loading>
   );
 };