Sparkle: Add isLoading state to split button (#8994)

dust-tt · Nov 28, 2024 · fefcffb · fefcffb
1 parent bae9884
commit fefcffb
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 5 deletions.
diff --git 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
diff --git 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
@@ -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
@@ -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,
+      },
     ],
   },
 };