From a4115c84d4e66abb753f9fc9d0a60aea8b69c2b7 Mon Sep 17 00:00:00 2001
From: Dima Grossman <dima@grossman.io>
Date: Mon, 2 Dec 2024 23:13:12 +0200
Subject: [PATCH] feat(dashboard): add button loading state prop (#7191)

---
 .../src/components/confirmation-modal.tsx     |  2 +-
 .../src/components/create-workflow-button.tsx |  2 +-
 .../edit-bridge-url-button.tsx                |  1 +
 .../src/components/primitives/button.tsx      | 27 +++++++++++++++++--
 .../test-workflow/test-workflow-tabs.tsx      |  6 ++---
 .../src/pages/usecase-select-page.tsx         |  4 +--
 apps/dashboard/tailwind.config.js             |  8 +++++-
 7 files changed, 39 insertions(+), 11 deletions(-)

diff --git a/apps/dashboard/src/components/confirmation-modal.tsx b/apps/dashboard/src/components/confirmation-modal.tsx
index b3c5a34a490..7ad1120a058 100644
--- a/apps/dashboard/src/components/confirmation-modal.tsx
+++ b/apps/dashboard/src/components/confirmation-modal.tsx
@@ -53,7 +53,7 @@ export const ConfirmationModal = ({
               </Button>
             </DialogClose>
 
-            <Button type="button" size="sm" variant="primary" onClick={onConfirm} disabled={isLoading}>
+            <Button type="button" size="sm" variant="primary" onClick={onConfirm} isLoading={isLoading}>
               {confirmButtonText}
             </Button>
           </DialogFooter>
diff --git a/apps/dashboard/src/components/create-workflow-button.tsx b/apps/dashboard/src/components/create-workflow-button.tsx
index 1fedb2ce178..5ca61fe9681 100644
--- a/apps/dashboard/src/components/create-workflow-button.tsx
+++ b/apps/dashboard/src/components/create-workflow-button.tsx
@@ -188,7 +188,7 @@ export const CreateWorkflowButton = (props: CreateWorkflowButtonProps) => {
         </SheetMain>
         <Separator />
         <SheetFooter>
-          <Button disabled={isPending} variant="default" type="submit" form="create-workflow">
+          <Button isLoading={isPending} variant="default" type="submit" form="create-workflow">
             Create workflow
           </Button>
         </SheetFooter>
diff --git a/apps/dashboard/src/components/header-navigation/edit-bridge-url-button.tsx b/apps/dashboard/src/components/header-navigation/edit-bridge-url-button.tsx
index e2ec8072884..8715026d995 100644
--- a/apps/dashboard/src/components/header-navigation/edit-bridge-url-button.tsx
+++ b/apps/dashboard/src/components/header-navigation/edit-bridge-url-button.tsx
@@ -109,6 +109,7 @@ export const EditBridgeUrlButton = () => {
                   type="submit"
                   variant="primary"
                   size="xs"
+                  isLoading={isUpdatingBridgeUrl}
                   disabled={!isDirty || isValidatingBridgeUrl || isUpdatingBridgeUrl}
                 >
                   Update endpoint
diff --git a/apps/dashboard/src/components/primitives/button.tsx b/apps/dashboard/src/components/primitives/button.tsx
index e5bf280f616..632308afbf3 100644
--- a/apps/dashboard/src/components/primitives/button.tsx
+++ b/apps/dashboard/src/components/primitives/button.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '@/utils/ui';
+import { RiLoader4Line } from 'react-icons/ri';
 
 export const buttonVariants = cva(
   `relative isolate inline-flex items-center justify-center whitespace-nowrap rounded-lg gap-1 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50`,
@@ -43,12 +44,34 @@ export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
   asChild?: boolean;
+  isLoading?: boolean;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
+  ({ className, variant, size, asChild = false, isLoading = false, children, disabled, ...props }, ref) => {
     const Comp = asChild ? Slot : 'button';
-    return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />;
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }), isLoading && 'animate-pulse-subtle')}
+        ref={ref}
+        disabled={disabled || isLoading}
+        {...props}
+      >
+        <span
+          className={cn(
+            'flex items-center gap-1 transition-all duration-300',
+            isLoading ? 'scale-95 transform opacity-0' : 'scale-100 opacity-100'
+          )}
+        >
+          {children}
+        </span>
+        {isLoading && (
+          <div className="animate-in zoom-in-50 fade-in absolute inset-0 flex items-center justify-center text-current duration-300">
+            <RiLoader4Line className="size-4 animate-spin" />
+          </div>
+        )}
+      </Comp>
+    );
   }
 );
 Button.displayName = 'Button';
diff --git a/apps/dashboard/src/components/workflow-editor/test-workflow/test-workflow-tabs.tsx b/apps/dashboard/src/components/workflow-editor/test-workflow/test-workflow-tabs.tsx
index 3ac1458f725..df8b490e2c9 100644
--- a/apps/dashboard/src/components/workflow-editor/test-workflow/test-workflow-tabs.tsx
+++ b/apps/dashboard/src/components/workflow-editor/test-workflow/test-workflow-tabs.tsx
@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 import { Link, useParams } from 'react-router-dom';
-import { RiPlayCircleLine, RiProgress1Fill } from 'react-icons/ri';
+import { RiPlayCircleLine } from 'react-icons/ri';
 import { useForm } from 'react-hook-form';
 // eslint-disable-next-line
 // @ts-ignore
@@ -127,8 +127,8 @@ export const TestWorkflowTabs = ({ testData }: { testData: WorkflowTestDataRespo
                 </Link>
               </TabsTrigger>
               <div className="ml-auto">
-                <Button type="submit" variant="primary" size="sm" className="flex gap-1" disabled={isPending}>
-                  {isPending ? <RiProgress1Fill className="size-5" /> : <RiPlayCircleLine className="size-5" />}
+                <Button type="submit" variant="primary" size="sm" className="flex gap-1" isLoading={isPending}>
+                  <RiPlayCircleLine className="size-5" />
                   <span>Test workflow</span>
                 </Button>
               </div>
diff --git a/apps/dashboard/src/pages/usecase-select-page.tsx b/apps/dashboard/src/pages/usecase-select-page.tsx
index 30f44a99ef9..89119615a52 100644
--- a/apps/dashboard/src/pages/usecase-select-page.tsx
+++ b/apps/dashboard/src/pages/usecase-select-page.tsx
@@ -8,7 +8,6 @@ import { useNavigate } from 'react-router-dom';
 import { OnboardingArrowLeft } from '../components/icons/onboarding-arrow-left';
 import { updateClerkOrgMetadata } from '../api/organization';
 import { ChannelTypeEnum } from '@novu/shared';
-import { RiLoader2Line } from 'react-icons/ri';
 import { PageMeta } from '../components/page-meta';
 import { useTelemetry } from '../hooks';
 import { TelemetryEvent } from '../utils/telemetry';
@@ -79,9 +78,8 @@ export function UsecaseSelectPage() {
               />
 
               <div className="flex w-full flex-col items-center gap-3">
-                <Button disabled={selectedUseCases.length === 0 || isPending} className="w-full" type="submit">
+                <Button disabled={selectedUseCases.length === 0} isLoading={isPending} className="w-full" type="submit">
                   Continue
-                  {isPending && <RiLoader2Line className="animate-spin" />}
                 </Button>
                 <Button type="button" variant="link" className="pt-0 text-xs text-[#717784]" onClick={handleSkip}>
                   Skip to Homepage
diff --git a/apps/dashboard/tailwind.config.js b/apps/dashboard/tailwind.config.js
index b5eba8a717a..ebe39246f87 100644
--- a/apps/dashboard/tailwind.config.js
+++ b/apps/dashboard/tailwind.config.js
@@ -137,6 +137,10 @@ export default {
             boxShadow: '0 0 0 0 rgba(255, 82, 82, 0)',
           },
         },
+        'pulse-subtle': {
+          '0%, 100%': { opacity: '1' },
+          '50%': { opacity: '0.85' },
+        },
         'accordion-down': {
           from: {
             height: '0',
@@ -181,11 +185,13 @@ export default {
       animation: {
         'accordion-down': 'accordion-down 0.2s ease-out',
         'accordion-up': 'accordion-up 0.2s ease-out',
+        'pulse-subtle': 'pulse-subtle 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
         swing: 'swing 3s ease-in-out',
         jingle: 'jingle 3s ease-in-out',
       },
       backgroundImage: {
-        'test-pattern': 'repeating-linear-gradient(135deg, hsl(var(--neutral-100)) 0, hsl(var(--neutral-100)) 2px, hsl(var(--neutral-200)) 2px, hsl(var(--neutral-200)) 4px)',
+        'test-pattern':
+          'repeating-linear-gradient(135deg, hsl(var(--neutral-100)) 0, hsl(var(--neutral-100)) 2px, hsl(var(--neutral-200)) 2px, hsl(var(--neutral-200)) 4px)',
       },
     },
   },