fix(upload): fix visual issues on dataset upload UI

Author: OliverDudgeon

features/DatasetUpload/FileUpload.tsx renamed to features/DatasetUpload/DatasetUpload.tsx

@@ -20,7 +20,7 @@ import { BulkUploadDropzone } from "./BulkUploadDropzone";
 /**
  * Button that controls a modal with UI to upload files to the DM API
  */
-export const FileUpload = () => {
+export const DatasetUpload = () => {
   const [open, setOpen] = useState(false);
   // Array of the user uploaded files with associated errors
   const [files, setFiles] = useState<UploadableFile[]>([]);

features/DatasetUpload/SingleFileUploader.tsx

@@ -42,8 +42,13 @@ export function SingleFileUploadWithProgress({
   // const typeLabelParts = fileWrapper.file.name.split('.');
 
   const [interval, setInterval] = useState<number | false>(2000);
-  const { data: task, isLoading } = useGetTask(fileWrapper.taskId ?? "", undefined, {
+  const {
+    data: task,
+    isLoading,
+    isFetching,
+  } = useGetTask(fileWrapper.taskId ?? "", undefined, {
     query: {
+      enabled: fileWrapper.taskId !== null,
       // When a task id has been set, we poll the task endpoint to wait for the file to finish
       // processing
       refetchInterval: interval,
@@ -63,7 +68,7 @@ export function SingleFileUploadWithProgress({
   const disabled =
     (task && !task.done) ||
     (fileWrapper.progress < 100 && fileWrapper.progress > 0) ||
-    isLoading ||
+    isFetching ||
     (fileWrapper.progress === 100 && task === undefined);
 
   return (
@@ -125,7 +130,9 @@ export function SingleFileUploadWithProgress({
         <LinearProgress value={fileWrapper.progress} variant="determinate" />
       )}
 
-      {(fileWrapper.progress === 100 && task === undefined) || (task && !task.done) || isLoading ? (
+      {(fileWrapper.progress === 100 && task === undefined) ||
+      (task && !task.done) ||
+      isFetching ? (
         <LinearProgress />
       ) : null}
 

features/DatasetUpload/index.ts

@@ -1 +1 @@
-export * from "./FileUpload";
+export * from "./DatasetUpload";

features/DatasetsTable/DatasetsTable.tsx

@@ -23,8 +23,8 @@ import type { TableDataset } from "./types";
 import { useDatasetsFilter } from "./useDatasetsFilter";
 import { useSelectedDatasets } from "./useSelectedDatasets";
 
-const FileUpload = dynamic<Record<string, never>>(
-  () => import("../DatasetUpload").then((mod) => mod.FileUpload),
+const DatasetUpload = dynamic<Record<string, never>>(
+  () => import("../DatasetUpload").then((mod) => mod.DatasetUpload),
   {
     loading: () => <CircularProgress size="1rem" />,
   },
@@ -143,7 +143,7 @@ export const DatasetsTable = () => {
       ToolbarActionChild={<DatasetsBulkActions selectedDatasets={selectedDatasets} />}
       ToolbarChild={
         <>
-          <FileUpload />
+          <DatasetUpload />
           <DatasetsFilterToolbar
             fullWidthFilters={
               <LabelsFilter