Share Button [7/n]: Display loading UI

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}

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>
+ );
+});