Fix export responsiveness during image generation

src/components/ActionButtonsArea.tsx

@@ -3,19 +3,23 @@ import { Icon } from "./ui/Icon";
 import { SocialIcon } from 'react-social-icons';
 import styles from "./ActionButtonsArea.module.css";
 
+type ActionHandler = () => void | Promise<void>;
+
 interface ActionButtonsAreaProps {
   actionType: "wallpaper" | "devemon" | "banner";
-  onDownloadDesktop?: () => void;
-  onDownloadMobile?: () => void;
-  onDownloadSmall?: () => void;
-  onDownloadCard?: () => void;
-  onDownloadBadge?: () => void;
-  onDownloadBanner?: () => void;
-  onCopyMarkdown?: () => void;
-  onShareTwitter?: () => void;
-  onShareBluesky?: () => void;
-  onShareThreads?: () => void;
-  onShareInstagram?: () => void;
+  busyAction: string | null;
+  onRunAction: (actionId: string, action?: ActionHandler) => void;
+  onDownloadDesktop?: ActionHandler;
+  onDownloadMobile?: ActionHandler;
+  onDownloadSmall?: ActionHandler;
+  onDownloadCard?: ActionHandler;
+  onDownloadBadge?: ActionHandler;
+  onDownloadBanner?: ActionHandler;
+  onCopyMarkdown?: ActionHandler;
+  onShareTwitter?: ActionHandler;
+  onShareBluesky?: ActionHandler;
+  onShareThreads?: ActionHandler;
+  onShareInstagram?: ActionHandler;
 }
 
 export default function ActionButtonsArea({
@@ -31,61 +35,91 @@ export default function ActionButtonsArea({
   onShareBluesky,
   onShareThreads,
   onShareInstagram,
+  busyAction,
+  onRunAction,
 }: ActionButtonsAreaProps) {
+  const isBusy = busyAction !== null;
+  const isActionBusy = (actionId: string) => busyAction === actionId;
+  const runAction = (actionId: string, action?: ActionHandler) => {
+    onRunAction(actionId, action);
+  };
+  const actionLabel = (actionId: string, label: string) =>
+    isActionBusy(actionId) ? "Generating image..." : label;
+  const copyMarkdownLabel = isActionBusy("banner-markdown")
+    ? "Copying..."
+    : "Copy Markdown";
+  const wallpaperDownloadLabel = (actionId: string, label: string) => (
+    <>
+      <div className={styles.WallpaperButtonTitle}>
+        {isActionBusy(actionId) ? "Generating image..." : label}
+      </div>
+      <div className={styles.WallpaperButtonSubtitle}>
+        {isActionBusy(actionId) ? "Please wait" : "Download PNG"}
+      </div>
+    </>
+  );
+
   const renderWallpaperActions = () => (
     <div className={styles.WallpaperActions}>
       <div className={styles.WallpaperSection}>
         <div className={styles.WallpaperGrid}>
           <PrimaryButton
             className={styles.WallpaperButton}
-            onClick={onDownloadDesktop}
+            onClick={() => runAction("wallpaper-desktop", onDownloadDesktop)}
+            disabled={isBusy}
+            ariaBusy={isActionBusy("wallpaper-desktop")}
           >
-            <div className={styles.WallpaperButtonTitle}>
-              Desktop (2560x1440)
-            </div>
-            <div className={styles.WallpaperButtonSubtitle}>Download PNG</div>
+            {wallpaperDownloadLabel("wallpaper-desktop", "Desktop (2560x1440)")}
           </PrimaryButton>
           <PrimaryButton
             className={styles.WallpaperButton}
-            onClick={onDownloadMobile}
+            onClick={() => runAction("wallpaper-mobile", onDownloadMobile)}
+            disabled={isBusy}
+            ariaBusy={isActionBusy("wallpaper-mobile")}
           >
-            <div className={styles.WallpaperButtonTitle}>
-              Mobile (1179x2556)
-            </div>
-            <div className={styles.WallpaperButtonSubtitle}>Download PNG</div>
+            {wallpaperDownloadLabel("wallpaper-mobile", "Mobile (1179x2556)")}
           </PrimaryButton>
           <PrimaryButton
             className={styles.WallpaperButton}
-            onClick={onDownloadSmall}
+            onClick={() => runAction("wallpaper-small", onDownloadSmall)}
+            disabled={isBusy}
+            ariaBusy={isActionBusy("wallpaper-small")}
           >
-            <div className={styles.WallpaperButtonTitle}>Badge (320x240)</div>
-            <div className={styles.WallpaperButtonSubtitle}>Download PNG</div>
+            {wallpaperDownloadLabel("wallpaper-small", "Badge (320x240)")}
           </PrimaryButton>
         </div>
         <div className={styles.SocialShareRow}>
           <SecondaryButton
-            onClick={onShareTwitter}
+            onClick={() => runAction("wallpaper-twitter", onShareTwitter)}
+            disabled={isBusy}
+            ariaBusy={isActionBusy("wallpaper-twitter")}
             icon={<SocialIcon network="x" style={{ height: 20, width: 20 }} />}
           >
-            Twitter/X
+            {actionLabel("wallpaper-twitter", "Twitter/X")}
           </SecondaryButton>
           <SecondaryButton
-            onClick={onShareBluesky}
+            onClick={() => runAction("wallpaper-bluesky", onShareBluesky)}
+            disabled={isBusy}
+            ariaBusy={isActionBusy("wallpaper-bluesky")}
             icon={<SocialIcon network="bsky.app" style={{ height: 20, width: 20 }} />}
           >
-            Bluesky
+            {actionLabel("wallpaper-bluesky", "Bluesky")}
           </SecondaryButton>
           <SecondaryButton
-            onClick={onShareThreads}
+            onClick={() => runAction("wallpaper-threads", onShareThreads)}
+            disabled={isBusy}
+            ariaBusy={isActionBusy("wallpaper-threads")}
             icon={<SocialIcon network="threads" style={{ height: 20, width: 20 }} />}
           >
-            Threads
+            {actionLabel("wallpaper-threads", "Threads")}
           </SecondaryButton>
           <SecondaryButton
-            onClick={onShareInstagram}
+            onClick={() => runAction("wallpaper-instagram", onShareInstagram)}
+            disabled={isBusy}
+            ariaBusy={isActionBusy("wallpaper-instagram")}
             icon={<SocialIcon network="instagram" style={{ height: 20, width: 20 }} />}
           >
-            Instagram
+            {actionLabel("wallpaper-instagram", "Instagram")}
           </SecondaryButton>
         </div>
       </div>
@@ -96,7 +130,9 @@ export default function ActionButtonsArea({
     <div className={styles.ActionsContainer}>
       <div className={styles.ActionsRow}>
         <PrimaryButton
-          onClick={onDownloadCard}
+          onClick={() => runAction("devemon-card", onDownloadCard)}
+          disabled={isBusy}
+          ariaBusy={isActionBusy("devemon-card")}
           icon={
             <Icon
               name="download"
@@ -106,10 +142,12 @@ export default function ActionButtonsArea({
             />
           }
         >
-          Download Card
+          {actionLabel("devemon-card", "Download Card")}
         </PrimaryButton>
         <SecondaryButton
-          onClick={onDownloadBadge}
+          onClick={() => runAction("devemon-badge", onDownloadBadge)}
+          disabled={isBusy}
+          ariaBusy={isActionBusy("devemon-badge")}
           icon={
             <Icon
               name="download"
@@ -119,33 +157,41 @@ export default function ActionButtonsArea({
             />
           }
         >
-          Download Badge
+          {actionLabel("devemon-badge", "Download Badge")}
         </SecondaryButton>
       </div>
       <div className={styles.SocialShareRow}>
         <SecondaryButton
-          onClick={onShareTwitter}
+          onClick={() => runAction("devemon-twitter", onShareTwitter)}
+          disabled={isBusy}
+          ariaBusy={isActionBusy("devemon-twitter")}
           icon={<SocialIcon network="x" style={{ height: 20, width: 20 }} />}
         >
-          Twitter/X
+          {actionLabel("devemon-twitter", "Twitter/X")}
         </SecondaryButton>
         <SecondaryButton
-          onClick={onShareBluesky}
+          onClick={() => runAction("devemon-bluesky", onShareBluesky)}
+          disabled={isBusy}
+          ariaBusy={isActionBusy("devemon-bluesky")}
           icon={<SocialIcon network="bsky.app" style={{ height: 20, width: 20 }} />}
         >
-          Bluesky
+          {actionLabel("devemon-bluesky", "Bluesky")}
         </SecondaryButton>
         <SecondaryButton
-          onClick={onShareThreads}
+          onClick={() => runAction("devemon-threads", onShareThreads)}
+          disabled={isBusy}
+          ariaBusy={isActionBusy("devemon-threads")}
           icon={<SocialIcon network="threads" style={{ height: 20, width: 20 }} />}
         >
-          Threads
+          {actionLabel("devemon-threads", "Threads")}
         </SecondaryButton>
         <SecondaryButton
-          onClick={onShareInstagram}
+          onClick={() => runAction("devemon-instagram", onShareInstagram)}
+          disabled={isBusy}
+          ariaBusy={isActionBusy("devemon-instagram")}
           icon={<SocialIcon network="instagram" style={{ height: 20, width: 20 }} />}
         >
-          Instagram
+          {actionLabel("devemon-instagram", "Instagram")}
         </SecondaryButton>
       </div>
     </div>
@@ -155,7 +201,9 @@ export default function ActionButtonsArea({
     <div className={styles.ActionsContainer}>
       <div className={styles.ActionsRow}>
         <PrimaryButton
-          onClick={onDownloadBanner}
+          onClick={() => runAction("banner-download", onDownloadBanner)}
+          disabled={isBusy}
+          ariaBusy={isActionBusy("banner-download")}
           icon={
             <Icon
               name="download"
@@ -165,36 +213,49 @@ export default function ActionButtonsArea({
             />
           }
         >
-          Download
+          {actionLabel("banner-download", "Download")}
         </PrimaryButton>
-        <SecondaryButton onClick={onCopyMarkdown} icon={<span>📋</span>}>
-          Copy Markdown
+        <SecondaryButton
+          onClick={() => runAction("banner-markdown", onCopyMarkdown)}
+          disabled={isBusy}
+          ariaBusy={isActionBusy("banner-markdown")}
+          icon={<span>📋</span>}
+        >
+          {copyMarkdownLabel}
         </SecondaryButton>
       </div>
       <div className={styles.SocialShareRow}>
         <SecondaryButton
-          onClick={onShareTwitter}
+          onClick={() => runAction("banner-twitter", onShareTwitter)}
+          disabled={isBusy}
+          ariaBusy={isActionBusy("banner-twitter")}
           icon={<SocialIcon network="x" style={{ height: 20, width: 20 }} />}
         >
-          Twitter/X
+          {actionLabel("banner-twitter", "Twitter/X")}
         </SecondaryButton>
         <SecondaryButton
-          onClick={onShareBluesky}
+          onClick={() => runAction("banner-bluesky", onShareBluesky)}
+          disabled={isBusy}
+          ariaBusy={isActionBusy("banner-bluesky")}
           icon={<SocialIcon network="bsky.app" style={{ height: 20, width: 20 }} />}
         >
-          Bluesky
+          {actionLabel("banner-bluesky", "Bluesky")}
         </SecondaryButton>
         <SecondaryButton
-          onClick={onShareThreads}
+          onClick={() => runAction("banner-threads", onShareThreads)}
+          disabled={isBusy}
+          ariaBusy={isActionBusy("banner-threads")}
           icon={<SocialIcon network="threads" style={{ height: 20, width: 20 }} />}
         >
-          Threads
+          {actionLabel("banner-threads", "Threads")}
         </SecondaryButton>
         <SecondaryButton
-          onClick={onShareInstagram}
+          onClick={() => runAction("banner-instagram", onShareInstagram)}
+          disabled={isBusy}
+          ariaBusy={isActionBusy("banner-instagram")}
           icon={<SocialIcon network="instagram" style={{ height: 20, width: 20 }} />}
         >
-          Instagram
+          {actionLabel("banner-instagram", "Instagram")}
         </SecondaryButton>
       </div>
     </div>