diff --git a/python/src/aiconfig/editor/client/src/components/AIConfigEditor.tsx b/python/src/aiconfig/editor/client/src/components/AIConfigEditor.tsx
index 1100653c0..cc3440295 100644
--- a/python/src/aiconfig/editor/client/src/components/AIConfigEditor.tsx
+++ b/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({
@@ -962,19 +961,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}
diff --git a/python/src/aiconfig/editor/client/src/components/global/ShareButton.tsx b/python/src/aiconfig/editor/client/src/components/global/ShareButton.tsx
new file mode 100644
index 000000000..ebd2adcbd
--- /dev/null
+++ b/python/src/aiconfig/editor/client/src/components/global/ShareButton.tsx
@@ -0,0 +1,50 @@
+import { Button, Flex, Loader, Tooltip } from "@mantine/core";
+import { IconPlayerPlayFilled, IconPlayerStop } from "@tabler/icons-react";
+import { memo, useContext, useState } from "react";
+import AIConfigContext from "../../contexts/AIConfigContext";
+
+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
+      loading={isLoading}
+      disabled={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>
+  );
+});