From 72325a421770ef293fad89f40ad300d73169c4e6 Mon Sep 17 00:00:00 2001
From: bennykok <itechbenny@gmail.com>
Date: Sat, 27 Jan 2024 14:19:50 +0800
Subject: [PATCH] feat: add loading dialog for when rebuilding machine request
 was loading

---
 web/src/components/MachineList.tsx       |  6 ++++--
 web/src/components/callServerPromise.tsx | 11 ++++++++++-
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/web/src/components/MachineList.tsx b/web/src/components/MachineList.tsx
index 0d52026..996f00e 100644
--- a/web/src/components/MachineList.tsx
+++ b/web/src/components/MachineList.tsx
@@ -235,9 +235,11 @@ export const columns: ColumnDef<Machine>[] = [
                 </DropdownMenuItem>
                 <DropdownMenuItem
                   onClick={() => {
-                    buildMachine({
+                    callServerPromise(buildMachine({
                       id: machine.id,
-                    });
+                    }), {
+                      loadingText: "Starting machine build process"
+                    })
                   }}
                 >
                   Rebuild
diff --git a/web/src/components/callServerPromise.tsx b/web/src/components/callServerPromise.tsx
index 17c0117..d1f83ab 100644
--- a/web/src/components/callServerPromise.tsx
+++ b/web/src/components/callServerPromise.tsx
@@ -2,7 +2,13 @@
 
 import { toast } from "sonner";
 
-export async function callServerPromise<T>(result: Promise<T>) {
+export async function callServerPromise<T>(result: Promise<T>, props?: {
+  loadingText: string
+}) {
+  let id: string | number
+  if (props?.loadingText) {
+    id = toast.loading(props.loadingText)
+  }
   return result
     .then((x) => {
       if ((x as { message: string })?.message !== undefined) {
@@ -15,5 +21,8 @@ export async function callServerPromise<T>(result: Promise<T>) {
     .catch((error) => {
       toast.error(error.message);
       return null;
+    }).finally(() => {
+      if (id != undefined)
+        toast.dismiss(id)
     });
 }