web: migrate loading dialog to typescript

apps/web/src/common/dialog-controller.tsx

@@ -305,23 +305,26 @@ export function showMigrationDialog() {
   ));
 }
 
-type LoadingDialogProps = {
+type LoadingDialogProps<T> = {
   title: string;
   message?: string;
   subtitle: string;
-  action: () => void;
+  action: () => T | Promise<T>;
 };
-export function showLoadingDialog(dialogData: LoadingDialogProps) {
+export function showLoadingDialog<T>(dialogData: LoadingDialogProps<T>) {
   const { title, message, subtitle, action } = dialogData;
-  return showDialog("LoadingDialog", (Dialog, perform) => (
-    <Dialog
-      title={title}
-      subtitle={subtitle}
-      message={message}
-      action={action}
-      onDone={(e: boolean) => perform(e)}
-    />
-  ));
+  return showDialog<"LoadingDialog", T | boolean>(
+    "LoadingDialog",
+    (Dialog, perform) => (
+      <Dialog
+        title={title}
+        description={subtitle}
+        message={message}
+        action={action}
+        onClose={(e) => perform(e as T | boolean)}
+      />
+    )
+  );
 }
 
 type ProgressDialogProps = {

apps/web/src/components/dialogs/loading-dialog.tsx

@@ -22,27 +22,32 @@ import { Box, Text } from "@theme-ui/components";
 import Dialog from "./dialog";
 import * as Icon from "../icons";
 
-function LoadingDialog(props) {
+type LoadingDialogProps<T> = {
+  onClose: (result: T | boolean) => void;
+  action: () => T | Promise<T>;
+  title: string;
+  description: string;
+  message?: string;
+};
+
+function LoadingDialog<T>(props: LoadingDialogProps<T>) {
+  const { onClose, action, description, message, title } = props;
   useEffect(() => {
     (async function () {
       try {
-        props.onDone(await props.action());
+        onClose(await action());
       } catch (e) {
-        props.onDone(e);
+        onClose(false);
+        throw e;
       }
     })();
-  }, [props]);
+  }, [onClose, action]);
 
   return (
-    <Dialog
-      isOpen={true}
-      title={props.title}
-      description={props.subtitle}
-      onClose={() => {}}
-    >
+    <Dialog isOpen={true} title={title} description={description}>
       <Box>
         <Text as="span" variant="body">
-          {props.message}
+          {message}
         </Text>
         <Icon.Loading rotate sx={{ my: 2 }} color="primary" />
       </Box>