feat(renderer): prevent currently executing async entry action from b…

…eing executed again (#1348) * feat(renderer): prevent currently executing async entry action from being executed again * move logic to the ActionButton component
RSSNext · Nov 4, 2024 · be82fe2 · be82fe2
1 parent b4e935f
commit be82fe2
Showing 1 changed file with 26 additions and 5 deletions.
diff --git a/packages/components/src/ui/button/index.tsx b/packages/components/src/ui/button/index.tsx
@@ -6,6 +6,7 @@ import type { VariantProps } from "class-variance-authority"
 import type { HTMLMotionProps } from "framer-motion"
 import { m } from "framer-motion"
 import * as React from "react"
+import { useState } from "react"
 import type { Options } from "react-hotkeys-hook"
 import { useHotkeys } from "react-hotkeys-hook"
 
@@ -60,6 +61,7 @@ export const ActionButton = React.forwardRef<
       disableTriggerShortcut,
       size = "base",
       shortcutOnlyFocusWithIn,
+      onClick,
       ...rest
     },
     ref,
@@ -69,6 +71,8 @@ export const ActionButton = React.forwardRef<
     const buttonRef = React.useRef<HTMLButtonElement>(null)
     React.useImperativeHandle(ref, () => buttonRef.current!)
 
+    const [loading, setLoading] = useState(false)
+
     const Trigger = (
       <button
         ref={buttonRef}
@@ -84,13 +88,30 @@ export const ActionButton = React.forwardRef<
         )}
         type="button"
         disabled={disabled}
+        onClick={
+          typeof onClick === "function"
+            ? async (e) => {
+                if (loading) return
+                setLoading(true)
+                try {
+                  await (onClick(e) as void | Promise<void>)
+                } finally {
+                  setLoading(false)
+                }
+              }
+            : onClick
+        }
         {...rest}
       >
-        {typeof icon === "function"
-          ? React.createElement(icon, {
-              className: "size-4 grayscale text-current",
-            })
-          : icon}
+        {loading ? (
+          <i className="i-mgc-loading-3-cute-re animate-spin" />
+        ) : typeof icon === "function" ? (
+          React.createElement(icon, {
+            className: "size-4 grayscale text-current",
+          })
+        ) : (
+          icon
+        )}
 
         {children}
       </button>