From fefcffb0fc478d1183d494c1791fc56f4253af5a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daphn=C3=A9=20Popin?= <PopDaph@users.noreply.github.com>
Date: Thu, 28 Nov 2024 13:56:49 +0100
Subject: [PATCH] Sparkle: Add isLoading state to split button (#8994)

---
 .../app/src/components/input_bar/InputBarContainer.tsx    | 1 +
 sparkle/package-lock.json                                 | 4 ++--
 sparkle/package.json                                      | 2 +-
 sparkle/src/components/SplitButton.tsx                    | 2 ++
 sparkle/src/stories/SplitButton.stories.tsx               | 8 ++++++--
 5 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/extension/app/src/components/input_bar/InputBarContainer.tsx b/extension/app/src/components/input_bar/InputBarContainer.tsx
index 27678543363a..1cef75d123c9 100644
--- a/extension/app/src/components/input_bar/InputBarContainer.tsx
+++ b/extension/app/src/components/input_bar/InputBarContainer.tsx
@@ -28,6 +28,7 @@ export interface InputBarContainerProps {
   isTabIncluded: boolean;
   setIncludeTab: (includeTab: boolean) => void;
   fileUploaderService: FileUploaderService;
+  isSubmitting: boolean;
 }
 
 export const InputBarContainer = ({
diff --git a/sparkle/package-lock.json b/sparkle/package-lock.json
index b8a6c555a2f0..b5ca4e236b88 100644
--- a/sparkle/package-lock.json
+++ b/sparkle/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.326",
+  "version": "0.2.327",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@dust-tt/sparkle",
-      "version": "0.2.326",
+      "version": "0.2.327",
       "license": "ISC",
       "dependencies": {
         "@emoji-mart/data": "^1.1.2",
diff --git a/sparkle/package.json b/sparkle/package.json
index a7e561363e4e..269d7a289e2c 100644
--- a/sparkle/package.json
+++ b/sparkle/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.326",
+  "version": "0.2.327",
   "scripts": {
     "build": "rm -rf dist && npm run tailwind && npm run build:esm && npm run build:cjs",
     "tailwind": "tailwindcss -i ./src/styles/tailwind.css -o dist/sparkle.css",
diff --git a/sparkle/src/components/SplitButton.tsx b/sparkle/src/components/SplitButton.tsx
index abc74f0e34e8..8ceb00e5b6ce 100644
--- a/sparkle/src/components/SplitButton.tsx
+++ b/sparkle/src/components/SplitButton.tsx
@@ -34,6 +34,7 @@ interface SplitButtonActionProps {
   tooltip?: string;
   disabled?: boolean;
   onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  isLoading?: boolean;
 }
 
 export interface SplitButtonProps
@@ -113,6 +114,7 @@ export const SplitButton = React.forwardRef<
               icon={ChevronDownIcon}
               disabled={disabled}
               className={cn("s-rounded-l-none s-border-l-0", className)}
+              isLoading={actionToUse.isLoading}
             />
           </DropdownMenuTrigger>
           <DropdownMenuContent align="end">
diff --git a/sparkle/src/stories/SplitButton.stories.tsx b/sparkle/src/stories/SplitButton.stories.tsx
index e91cf0083f4b..013a95e4c7bb 100644
--- a/sparkle/src/stories/SplitButton.stories.tsx
+++ b/sparkle/src/stories/SplitButton.stories.tsx
@@ -43,14 +43,18 @@ export const ExampleButton: Story = {
       {
         label: "Second",
         icon: RobotIcon,
-        tooltip: "Second tooltip",
+        tooltip: "Disabled tooltip",
         disabled: true,
       },
       {
         label: "Third",
-        icon: PlusIcon,
         tooltip: "Third tooltip",
       },
+      {
+        label: "Fourth",
+        tooltip: "Loading tooltip",
+        isLoading: true,
+      },
     ],
   },
 };