Share Button [7/n]: Display loading UI (#1044)

Share Button [7/n]: Display loading UI

Created a separate component for the shareButton to manage the
`isLoading` state and show that in the UI

## Test Plan
Rebase on then do: #1045

Go to `aiconfig/python/src/aiconfig/editor/client` and run this command:
```
rm -rf node_modules && yarn && yarn build
```

Then go to `aiconfig` dir and run this command:
```
aiconfig_path  =./cookbooks/Gradio/huggingface.aiconfig.json
parsers_path=./cookbooks/Gradio/hf_model_parsers.py
aiconfig edit --aiconfig-path=$aiconfig_path --server-port=8080 --server-mode=debug_servers --parsers-module-path=$parsers_path
```

No Error Testing


https://github.com/lastmile-ai/aiconfig/assets/151060367/1e9f4b90-a9e9-4c60-a813-afa2a46a1b5a

Error Testing


https://github.com/lastmile-ai/aiconfig/assets/151060367/1abcce37-8ba4-4513-b826-ea0f9d7bb720

---
Stack created with [Sapling](https://sapling-scm.com). Best reviewed
with
[ReviewStack](https://reviewstack.dev/lastmile-ai/aiconfig/pull/1044).
* #1045
* #1049
* __->__ #1044

Author: rossdanlm

python/src/aiconfig/editor/client/src/components/AIConfigEditor.tsx

@@ -56,6 +56,7 @@ import {
 import { IconDeviceFloppy } from "@tabler/icons-react";
 import CopyButton from "./CopyButton";
 import AIConfigEditorThemeProvider from "../themes/AIConfigEditorThemeProvider";
+import ShareButton from "./global/ShareButton";
 import PromptsContainer from "./prompt/PromptsContainer";
 
 type Props = {
@@ -155,10 +156,8 @@ export default function AIConfigEditor({
       return;
     }
     try {
-      // TODO: While uploading, show a loader state for share button
       const { share_url: shareUrl } = await shareCallback();
-      // TODO: display the shareUrl in a dialog
-      // console.log("Share URL: ", shareUrl);
+      return shareUrl;
     } catch (err: unknown) {
       const message = (err as RequestCallbackError).message ?? null;
       showNotification({
@@ -963,19 +962,7 @@ export default function AIConfigEditor({
             <Flex justify="flex-end" mt="md" mb="xs">
               {!readOnly && (
                 <Group>
-                  {shareCallback && (
-                    <Tooltip label={"Create a link to share your AIConfig!"}>
-                      <Button
-                        loading={undefined}
-                        onClick={onShare}
-                        size="xs"
-                        variant="filled"
-                      >
-                        Share
-                      </Button>
-                    </Tooltip>
-                  )}
-
+                  {shareCallback && <ShareButton onShare={onShare} />}
                   {onClearOutputs && (
                     <Button
                       loading={undefined}

python/src/aiconfig/editor/client/src/components/global/ShareButton.tsx

@@ -0,0 +1,48 @@
+import { Button, Tooltip } from "@mantine/core";
+import { memo, useState } from "react";
+
+type Props = {
+  onShare: () => Promise<string | void>;
+};
+
+export default memo(function ShareButton({ onShare }: Props) {
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
+  const onClick = async () => {
+    if (isLoading) {
+      return;
+    }
+
+    setIsLoading(true);
+    const shareUrl: string | void = await onShare();
+    setIsLoading(false);
+
+    if (!shareUrl) {
+      return;
+    }
+
+    console.log("Share URL: ", shareUrl);
+  };
+
+  const button = (
+    <Button
+      loaderPosition="center"
+      loading={isLoading}
+      onClick={onClick}
+      p="xs"
+      size="xs"
+      variant="filled"
+    >
+      Share
+    </Button>
+  );
+
+  const tooltipMessage: string = isLoading
+    ? "Generating share link..."
+    : "Create a link to share your AIConfig!";
+  return (
+    <Tooltip label={tooltipMessage} withArrow>
+      <div>{button}</div>
+    </Tooltip>
+  );
+});