From 231a307b89d3bbf7a942a37ad8fe4d0e5cd0d703 Mon Sep 17 00:00:00 2001
From: nafees nazik <nafeesnazik21@gmail.com>
Date: Thu, 30 Nov 2023 15:20:06 +0530
Subject: [PATCH] feat: add loading text prop

---
 packages/ui/primitives/button.tsx | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/packages/ui/primitives/button.tsx b/packages/ui/primitives/button.tsx
index 31df69dee..9ee3324c6 100644
--- a/packages/ui/primitives/button.tsx
+++ b/packages/ui/primitives/button.tsx
@@ -53,18 +53,23 @@ export interface ButtonProps
    * Will display the loading spinner and disable the button.
    */
   loading?: boolean;
+
+  /**
+   * The label to show in the button when `isLoading` is true
+   */
+  loadingText?: string;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, loading, ...props }, ref) => {
+  ({ className, variant, size, asChild = false, loadingText, loading, ...props }, ref) => {
     if (asChild) {
       return (
         <Slot className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
       );
     }
 
-    const showLoader = loading === true;
-    const isDisabled = props.disabled || showLoader;
+    const isLoading = loading === true;
+    const isDisabled = props.disabled || isLoading;
 
     return (
       <button
@@ -73,8 +78,8 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         {...props}
         disabled={isDisabled}
       >
-        {showLoader && <Loader className={cn('mr-2 animate-spin', loaderVariants({ size }))} />}
-        {props.children}
+        {isLoading && <Loader className={cn('mr-2 animate-spin', loaderVariants({ size }))} />}
+        {isLoading && loadingText ? loadingText : props.children}
       </button>
     );
   },