Adds a new isLoading prop that shows a spinner in the middle of the button

Author: samejr

apps/webapp/app/components/primitives/Buttons.tsx

@@ -1,10 +1,18 @@
 import { Link, type LinkProps, NavLink, type NavLinkProps } from "@remix-run/react";
-import React, { forwardRef, type ReactNode, useImperativeHandle, useRef } from "react";
+import React, {
+  forwardRef,
+  type ReactNode,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from "react";
 import { type ShortcutDefinition, useShortcutKeys } from "~/hooks/useShortcutKeys";
 import { cn } from "~/utils/cn";
 import { ShortcutKey } from "./ShortcutKey";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./Tooltip";
 import { Icon, type RenderIcon } from "./Icon";
+import { Spinner } from "./Spinner";
 
 const sizes = {
   small: {
@@ -180,6 +188,7 @@ export type ButtonContentPropsType = {
   tooltip?: ReactNode;
   iconSpacing?: string;
   hideShortcutKey?: boolean;
+  isLoading?: boolean;
 };
 
 export function ButtonContent(props: ButtonContentPropsType) {
@@ -196,7 +205,19 @@ export function ButtonContent(props: ButtonContentPropsType) {
     tooltip,
     iconSpacing,
     hideShortcutKey,
+    isLoading,
   } = props;
+
+  const [showSpinner, setShowSpinner] = useState(false);
+  useEffect(() => {
+    if (!isLoading) {
+      setShowSpinner(false);
+      return;
+    }
+    const timer = setTimeout(() => setShowSpinner(true), 200);
+    return () => clearTimeout(timer);
+  }, [isLoading]);
+
   const variation = allVariants.variant[props.variant];
 
   const btnClassName = cn(allVariants.$all, variation.button);
@@ -217,56 +238,64 @@ export function ButtonContent(props: ButtonContentPropsType) {
 
   const buttonContent = (
     <div className={cn("flex", fullWidth ? "" : "w-fit text-xxs", btnClassName, className)}>
-      <div
-        className={cn(
-          textAlignLeft ? "text-left" : "justify-center",
-          "flex w-full items-center",
-          iconSpacingClassName,
-          iconSpacing
-        )}
-      >
-        {LeadingIcon && (
-          <Icon
-            icon={LeadingIcon}
-            className={cn(
-              iconClassName,
-              variation.icon,
-              leadingIconClassName,
-              "shrink-0 justify-start"
-            )}
-          />
-        )}
+      <div className={cn("relative", "flex w-full items-center")}>
+        <div
+          className={cn(
+            textAlignLeft ? "text-left" : "justify-center",
+            "flex w-full items-center",
+            iconSpacingClassName,
+            iconSpacing,
+            showSpinner && "invisible"
+          )}
+        >
+          {LeadingIcon && (
+            <Icon
+              icon={LeadingIcon}
+              className={cn(
+                iconClassName,
+                variation.icon,
+                leadingIconClassName,
+                "shrink-0 justify-start"
+              )}
+            />
+          )}
 
-        {text &&
-          (typeof text === "string" ? (
-            <span className={cn("mx-auto grow self-center truncate", textColorClassName)}>
-              {text}
-            </span>
-          ) : (
-            <>{text}</>
-          ))}
-
-        {shortcut &&
-          !tooltip &&
-          props.shortcutPosition === "before-trailing-icon" &&
-          renderShortcutKey()}
-
-        {TrailingIcon && (
-          <Icon
-            icon={TrailingIcon}
-            className={cn(
-              iconClassName,
-              variation.icon,
-              trailingIconClassName,
-              "shrink-0 justify-end"
-            )}
-          />
-        )}
+          {text &&
+            (typeof text === "string" ? (
+              <span className={cn("mx-auto grow self-center truncate", textColorClassName)}>
+                {text}
+              </span>
+            ) : (
+              <>{text}</>
+            ))}
+
+          {shortcut &&
+            !tooltip &&
+            props.shortcutPosition === "before-trailing-icon" &&
+            renderShortcutKey()}
 
-        {shortcut &&
-          !tooltip &&
-          (!props.shortcutPosition || props.shortcutPosition === "after-trailing-icon") &&
-          renderShortcutKey()}
+          {TrailingIcon && (
+            <Icon
+              icon={TrailingIcon}
+              className={cn(
+                iconClassName,
+                variation.icon,
+                trailingIconClassName,
+                "shrink-0 justify-end"
+              )}
+            />
+          )}
+
+          {shortcut &&
+            !tooltip &&
+            (!props.shortcutPosition || props.shortcutPosition === "after-trailing-icon") &&
+            renderShortcutKey()}
+        </div>
+        {showSpinner && (
+          <span className="absolute inset-0 flex items-center justify-center">
+            <Spinner className="size-3.5" color="white" />
+          </span>
+        )}
       </div>
     </div>
   );
@@ -298,6 +327,8 @@ export const Button = forwardRef<HTMLButtonElement, ButtonPropsType>(
     const innerRef = useRef<HTMLButtonElement>(null);
     useImperativeHandle(ref, () => innerRef.current as HTMLButtonElement);
 
+    const isDisabled = disabled || props.isLoading;
+
     useShortcutKeys({
       shortcut: props.shortcut,
       action: (e) => {
@@ -307,14 +338,14 @@ export const Button = forwardRef<HTMLButtonElement, ButtonPropsType>(
           e.stopPropagation();
         }
       },
-      disabled: disabled || !props.shortcut,
+      disabled: isDisabled || !props.shortcut,
     });
 
     return (
       <button
         className={cn("group/button outline-none focus-custom", props.fullWidth ? "w-full" : "")}
         type={type}
-        disabled={disabled}
+        disabled={isDisabled}
         onClick={onClick}
         name={props.name}
         value={props.value}