Insomnia YAML and loading state on import

src-web/components/ImportDataDialog.tsx

@@ -0,0 +1,38 @@
+import { VStack } from './core/Stacks';
+import { Button } from './core/Button';
+import { useState } from 'react';
+
+interface Props {
+  importData: () => Promise<void>;
+}
+
+export function ImportDataDialog({ importData }: Props) {
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  return (
+    <VStack space={5} className="pb-4">
+      <VStack space={1}>
+        <p>Supported Formats:</p>
+        <ul className="list-disc pl-5">
+          <li>Postman Collection v2/v2.1</li>
+          <li>Insomnia</li>
+          <li>Curl command(s)</li>
+        </ul>
+      </VStack>
+      <Button
+        size="sm"
+        color="primary"
+        isLoading={isLoading}
+        onClick={async () => {
+          setIsLoading(true);
+          try {
+            await importData();
+          } finally {
+            setIsLoading(false);
+          }
+        }}
+      >
+        {isLoading ? 'Importing' : 'Select File'}
+      </Button>
+    </VStack>
+  );
+}

src-web/components/core/Button.tsx

@@ -118,13 +118,13 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button
       ref={buttonRef}
       type={type}
       className={classes}
-      disabled={disabled}
+      disabled={disabled || isLoading}
       onClick={onClick}
       title={fullTitle}
       {...props}
     >
       {isLoading ? (
-        <Icon icon="update" size={size} className="animate-spin mr-1" />
+        <Icon icon="refresh" size={size} className="animate-spin mr-1" />
       ) : leftSlot ? (
         <div className="mr-1">{leftSlot}</div>
       ) : null}

src-web/hooks/useImportData.tsx

@@ -9,6 +9,7 @@ import { count } from '../lib/pluralize';
 import { useActiveWorkspaceId } from './useActiveWorkspaceId';
 import { useAlert } from './useAlert';
 import { useAppRoutes } from './useAppRoutes';
+import { ImportDataDialog } from '../components/ImportDataDialog';
 
 export function useImportData() {
   const routes = useAppRoutes();
@@ -35,6 +36,7 @@ export function useImportData() {
       filePath: selected.path,
       workspaceId: activeWorkspaceId,
     });
+
     const importedWorkspace = imported.workspaces[0];
 
     dialog.show({
@@ -82,32 +84,16 @@ export function useImportData() {
           title: 'Import Data',
           size: 'sm',
           render: ({ hide }) => {
-            return (
-              <VStack space={5} className="pb-4">
-                <VStack space={1}>
-                  <p>Supported Formats:</p>
-                  <ul className="list-disc pl-5">
-                    <li>Postman Collection v2/v2.1</li>
-                    <li>Insomnia</li>
-                  </ul>
-                </VStack>
-                <Button
-                  size="sm"
-                  color="primary"
-                  onClick={async () => {
-                    try {
-                      await importData();
-                      resolve();
-                    } catch (err) {
-                      reject(err);
-                    }
-                    hide();
-                  }}
-                >
-                  Select File
-                </Button>
-              </VStack>
-            );
+            const importAndHide = async () => {
+              try {
+                await importData();
+                resolve();
+              } catch (err) {
+                reject(err);
+              }
+              hide();
+            };
+            return <ImportDataDialog importData={importAndHide} />;
           },
         });
       });