enh: better loadin indicators (upsert tables) (#3338)

Co-authored-by: Henry Fontanier <[email protected]>
dust-tt · Jan 19, 2024 · 23e635f · 23e635f
1 parent b1028b5
commit 23e635f
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 46 deletions.
diff --git a/front/pages/w/[wId]/builder/data-sources/[name]/tables/upsert.tsx b/front/pages/w/[wId]/builder/data-sources/[name]/tables/upsert.tsx
@@ -99,6 +99,7 @@ export default function TableUpsert({
   const [disabled, setDisabled] = useState(false);
   const [loading, setLoading] = useState(false);
   const [uploading, setUploading] = useState(false);
+  const [upserting, setUpserting] = useState(false);
 
   const { table } = useTable({
     workspaceId: owner.sId,
@@ -153,55 +154,63 @@ export default function TableUpsert({
       return;
     }
 
-    const res = await handleFileUploadToText(file);
-    if (res.isErr()) {
-      sendNotification({
-        type: "error",
-        title: "Error uploading file",
-        description: `An unexpected error occured: ${res.error}.`,
-      });
-      return;
-    }
-
-    const { content } = res.value;
-    if (res.value.content.length > 50_000_000) {
-      sendNotification({
-        type: "error",
-        title: "File too large",
-        description:
-          "Please upload a file containing less than 50 million characters.",
-      });
-      return;
-    }
+    setUpserting(true);
+
+    try {
+      const res = await handleFileUploadToText(file);
+      if (res.isErr()) {
+        sendNotification({
+          type: "error",
+          title: "Error uploading file",
+          description: `An unexpected error occured: ${res.error}.`,
+        });
+        return;
+      }
 
-    const body: CreateTableFromCsvRequestBody = {
-      name: tableName,
-      description: description,
-      csv: content,
-    };
+      const { content } = res.value;
+      if (res.value.content.length > 50_000_000) {
+        sendNotification({
+          type: "error",
+          title: "File too large",
+          description:
+            "Please upload a file containing less than 50 million characters.",
+        });
+        return;
+      }
 
-    const uploadRes = await fetch(
-      `/api/w/${owner.sId}/data_sources/${dataSource.name}/tables/csv`,
-      {
-        method: "POST",
-        body: JSON.stringify(body),
-        headers: {
-          "Content-Type": "application/json",
-        },
+      const body: CreateTableFromCsvRequestBody = {
+        name: tableName,
+        description: description,
+        csv: content,
+      };
+
+      const uploadRes = await fetch(
+        `/api/w/${owner.sId}/data_sources/${dataSource.name}/tables/csv`,
+        {
+          method: "POST",
+          body: JSON.stringify(body),
+          headers: {
+            "Content-Type": "application/json",
+          },
+        }
+      );
+
+      if (!uploadRes.ok) {
+        sendNotification({
+          type: "error",
+          title: "Error uploading file",
+          description: `An error occured: ${await uploadRes.text()}.`,
+        });
+        return;
       }
-    );
 
-    if (!uploadRes.ok) {
-      sendNotification({
-        type: "error",
-        title: "Error uploading file",
-        description: `An error occured: ${await uploadRes.text()}.`,
-      });
-      return;
+      await mutate(
+        `/api/w/${owner.sId}/data_sources/${dataSource.name}/tables`
+      );
+      redirectToDataSourcePage();
+    } finally {
+      setUpserting(false);
     }
-
-    await mutate(`/api/w/${owner.sId}/data_sources/${dataSource.name}/tables`);
-    redirectToDataSourcePage();
   };
 
   return (
@@ -225,7 +234,7 @@ export default function TableUpsert({
                 }
               : undefined
           }
-          isSaving={loading}
+          isSaving={loading || uploading || upserting}
         />
       }
       hideSidebar={true}

diff --git a/front/pages/w/[wId]/workspace/index.tsx b/front/pages/w/[wId]/workspace/index.tsx
@@ -57,6 +57,8 @@ export default function WorkspaceAdmin({
   const [workspaceName, setWorkspaceName] = useState(owner.name);
   const [workspaceNameError, setWorkspaceNameError] = useState<string>("");
 
+  const [isLoading, setIsLoading] = useState(false);
+
   const formValidation = useCallback(() => {
     if (workspaceName === owner.name) {
       return false;
@@ -117,6 +119,7 @@ export default function WorkspaceAdmin({
         ? "mode=all"
         : `mode=month&start=${selectedMonth}`;
 
+    setIsLoading(true);
     try {
       const response = await fetch(
         `/api/w/${owner.sId}/workspace-usage?${queryString}`
@@ -183,6 +186,8 @@ export default function WorkspaceAdmin({
       document.body.removeChild(link);
     } catch (error) {
       alert("Failed to download activity data.");
+    } finally {
+      setIsLoading(false);
     }
   };
 
@@ -278,9 +283,10 @@ export default function WorkspaceAdmin({
                 </DropdownMenu.Items>
               </DropdownMenu>
               <Button
-                label="Download activity data"
+                label={isLoading ? "Loading..." : "Download activity data"}
                 icon={CloudArrowDownIcon}
                 variant="secondary"
+                disabled={isLoading}
                 onClick={() => {
                   void handleDownload(selectedMonth);
                 }}