From b2919220fb003ecbee2c126f26c35a47a0d713d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=A9douard=20wautier?= <edouardwautier@Ed-Pro.local>
Date: Mon, 25 Mar 2024 16:35:19 +0100
Subject: [PATCH] Deploying the new Spinner

---
 .../DataSourceResourceSelectorTree.tsx        |  4 ++--
 front/components/app/blocks/Block.tsx         |  6 ++---
 .../components/assistant/AssistantDetails.tsx |  4 ++--
 .../AssistantBuilderTablesModal.tsx           |  4 ++--
 .../assistant_builder/InstructionScreen.tsx   |  4 ++--
 front/pages/poke/[wId]/index.tsx              |  4 ++--
 front/pages/poke/plans.tsx                    |  4 ++--
 front/pages/w/[wId]/a/[aId]/execute/index.tsx |  5 ++--
 front/pages/w/[wId]/subscription/index.tsx    |  4 ++--
 sparkle/src/components/Chip.tsx               | 10 +++++---
 sparkle/src/components/Dialog.tsx             |  4 ++--
 sparkle/src/components/Tree.tsx               |  4 ++--
 sparkle/src/stories/Chip.stories.tsx          | 23 +++++++++++++++++++
 sparkle/tailwind.config.js                    | 13 ++++++++++-
 14 files changed, 65 insertions(+), 28 deletions(-)

diff --git a/front/components/DataSourceResourceSelectorTree.tsx b/front/components/DataSourceResourceSelectorTree.tsx
index f04f9a750f93..9064afafdc81 100644
--- a/front/components/DataSourceResourceSelectorTree.tsx
+++ b/front/components/DataSourceResourceSelectorTree.tsx
@@ -4,7 +4,7 @@ import {
   ChevronDownIcon,
   ChevronRightIcon,
   DocumentTextIcon,
-  Spinner,
+  Spinner2,
 } from "@dust-tt/sparkle";
 import type {
   ContentNode,
@@ -159,7 +159,7 @@ function DataSourceResourceSelectorChildren({
   return (
     <>
       {isResourcesLoading ? (
-        <Spinner />
+        <Spinner2 />
       ) : (
         <div className="flex-1 space-y-1">
           {resources.map((r) => {
diff --git a/front/components/app/blocks/Block.tsx b/front/components/app/blocks/Block.tsx
index 51208f72c30f..1703075d32d9 100644
--- a/front/components/app/blocks/Block.tsx
+++ b/front/components/app/blocks/Block.tsx
@@ -2,6 +2,7 @@ import {
   ArrowPathIcon,
   ChevronDownIcon,
   ChevronUpIcon,
+  Spinner2,
   Square3Stack3DStrokeIcon,
   TrashIcon,
 } from "@dust-tt/sparkle";
@@ -15,7 +16,6 @@ import type { BlockType, RunType } from "@dust-tt/types";
 import { useEffect, useState } from "react";
 
 import NewBlock from "@app/components/app/NewBlock";
-import { Spinner } from "@app/components/Spinner";
 import { classNames } from "@app/lib/utils";
 
 import Output from "./Output";
@@ -194,7 +194,7 @@ export default function Block({
         !["map", "reduce", "end"].includes(block.type) ? (
           <div className="flex flex-row items-center text-sm text-gray-400">
             <div className="ml-2 mr-2">
-              <Spinner />
+              <Spinner2 />
             </div>
             {` ${status.success_count} successes ${status.error_count} errors`}
           </div>
@@ -202,7 +202,7 @@ export default function Block({
           <div className="flex flex-row items-center text-sm text-gray-400">
             <div role="status">
               <div className="ml-2 mr-2">
-                <Spinner />
+                <Spinner2 />
               </div>
             </div>
             {` 0 successes 0 errors`}
diff --git a/front/components/assistant/AssistantDetails.tsx b/front/components/assistant/AssistantDetails.tsx
index b9205fc45f46..35ccd9b79726 100644
--- a/front/components/assistant/AssistantDetails.tsx
+++ b/front/components/assistant/AssistantDetails.tsx
@@ -7,7 +7,7 @@ import {
   IconButton,
   Page,
   ServerIcon,
-  Spinner,
+  Spinner2,
   Tree,
 } from "@dust-tt/sparkle";
 import type {
@@ -508,7 +508,7 @@ function TablesQuerySection({
   return (
     <div className="flex flex-col gap-2">
       {isLoading ? (
-        <Spinner />
+        <Spinner2 />
       ) : !tablesQueryConfig.tables.length ? (
         <span>No tables are currently linked to this assistant.</span>
       ) : tables ? (
diff --git a/front/components/assistant_builder/AssistantBuilderTablesModal.tsx b/front/components/assistant_builder/AssistantBuilderTablesModal.tsx
index 5bdd31b2a45f..9e933e9ee03d 100644
--- a/front/components/assistant_builder/AssistantBuilderTablesModal.tsx
+++ b/front/components/assistant_builder/AssistantBuilderTablesModal.tsx
@@ -6,7 +6,7 @@ import {
   Page,
   Searchbar,
   ServerIcon,
-  Spinner,
+  Spinner2,
 } from "@dust-tt/sparkle";
 import type { ContentNode, WorkspaceType } from "@dust-tt/types";
 import type {
@@ -321,7 +321,7 @@ export default function AssistantBuilderTablesModal({
     >
       <div className="w-full pt-12">
         {isInitializingNodes || isInitializingParents ? (
-          <Spinner />
+          <Spinner2 />
         ) : !selectedDataSource ? (
           <PickDataSource
             dataSources={supportedDataSources}
diff --git a/front/components/assistant_builder/InstructionScreen.tsx b/front/components/assistant_builder/InstructionScreen.tsx
index 338cd4eeb4e6..b3b44aea7760 100644
--- a/front/components/assistant_builder/InstructionScreen.tsx
+++ b/front/components/assistant_builder/InstructionScreen.tsx
@@ -9,7 +9,7 @@ import {
   MistralLogo,
   OpenaiLogo,
   Page,
-  Spinner,
+  Spinner2,
 } from "@dust-tt/sparkle";
 import type {
   APIError,
@@ -377,7 +377,7 @@ function Suggestions({
       <div className="flex flex-col gap-2">
         <div className="flex gap-1 text-base font-bold text-element-800">
           <div>Tips</div>
-          {loading && <Spinner size="sm" />}
+          {loading && <Spinner2 size="xs" variant="dark" />}
         </div>
         <div>
           {(() => {
diff --git a/front/pages/poke/[wId]/index.tsx b/front/pages/poke/[wId]/index.tsx
index a576bed7341b..caf433e15042 100644
--- a/front/pages/poke/[wId]/index.tsx
+++ b/front/pages/poke/[wId]/index.tsx
@@ -3,7 +3,7 @@ import {
   Collapsible,
   DropdownMenu,
   Modal,
-  Spinner,
+  Spinner2,
 } from "@dust-tt/sparkle";
 import type {
   AgentConfigurationType,
@@ -402,7 +402,7 @@ const WorkspacePage = ({
                           {isLoading ? (
                             <p className="text-warning mb-4 text-sm ">
                               Deleting workspace data...
-                              <Spinner />
+                              <Spinner2 />
                             </p>
                           ) : (
                             <Button
diff --git a/front/pages/poke/plans.tsx b/front/pages/poke/plans.tsx
index 48e32c20c23e..b73a8802d8ec 100644
--- a/front/pages/poke/plans.tsx
+++ b/front/pages/poke/plans.tsx
@@ -4,7 +4,7 @@ import {
   IconButton,
   PencilSquareIcon,
   PlusIcon,
-  Spinner,
+  Spinner2,
   XMarkIcon,
 } from "@dust-tt/sparkle";
 import type { PlanType } from "@dust-tt/types";
@@ -147,7 +147,7 @@ const PlansPage = (
     <div className="min-h-screen bg-structure-50">
       <PokeNavbar />
       {isPlansLoading ? (
-        <Spinner />
+        <Spinner2 />
       ) : (
         <div className="flex h-full flex-col items-center justify-center">
           <div className="h-full py-8 text-2xl font-bold">Plans</div>
diff --git a/front/pages/w/[wId]/a/[aId]/execute/index.tsx b/front/pages/w/[wId]/a/[aId]/execute/index.tsx
index bab70ee31ef4..da06063e6784 100644
--- a/front/pages/w/[wId]/a/[aId]/execute/index.tsx
+++ b/front/pages/w/[wId]/a/[aId]/execute/index.tsx
@@ -1,4 +1,4 @@
-import { Button, Tab } from "@dust-tt/sparkle";
+import { Button, Spinner2, Tab } from "@dust-tt/sparkle";
 import type { WorkspaceType } from "@dust-tt/types";
 import type {
   AppType,
@@ -30,7 +30,6 @@ import {
   subNavigationApp,
   subNavigationBuild,
 } from "@app/components/sparkle/navigation";
-import { Spinner } from "@app/components/Spinner";
 import { getApp } from "@app/lib/api/app";
 import { getDatasetHash } from "@app/lib/api/datasets";
 import { extractConfig } from "@app/lib/config";
@@ -181,7 +180,7 @@ function ExecuteOutputLine({
           <div>
             {lastEventForBlock.content.status === "running" ? (
               <div className="ml-1">
-                <Spinner />
+                <Spinner2 />
               </div>
             ) : lastEventForBlock.content.status === "errored" ? (
               <ExclamationCircleIcon className="ml-1 h-4 w-4 text-red-500" />
diff --git a/front/pages/w/[wId]/subscription/index.tsx b/front/pages/w/[wId]/subscription/index.tsx
index fe6411d97222..230520f41597 100644
--- a/front/pages/w/[wId]/subscription/index.tsx
+++ b/front/pages/w/[wId]/subscription/index.tsx
@@ -7,7 +7,7 @@ import {
   MoreIcon,
   Page,
   ShapesIcon,
-  Spinner,
+  Spinner2,
 } from "@dust-tt/sparkle";
 import type { UserType, WorkspaceType } from "@dust-tt/types";
 import type { PlanInvitationType, SubscriptionType } from "@dust-tt/types";
@@ -325,7 +325,7 @@ export default function Subscription({
             <Page.H variant="h5">Your plan </Page.H>
             <div>
               {isWebhookProcessing ? (
-                <Spinner />
+                <Spinner2 />
               ) : (
                 <>
                   <Page.Horizontal gap="sm">
diff --git a/sparkle/src/components/Chip.tsx b/sparkle/src/components/Chip.tsx
index 0709e8315851..09db345dcd98 100644
--- a/sparkle/src/components/Chip.tsx
+++ b/sparkle/src/components/Chip.tsx
@@ -3,7 +3,6 @@ import React, { ComponentType, ReactNode } from "react";
 import { classNames } from "@sparkle/lib/utils";
 
 import { Icon, IconProps } from "./Icon";
-import Spinner from "./Spinner";
 
 type ChipProps = {
   size?: "xs" | "sm";
@@ -53,9 +52,14 @@ export function Chip({
   );
 
   return (
-    <div className={ChipClasses} aria-label={label}>
+    <div
+      className={classNames(
+        ChipClasses,
+        isBusy ? "s-animate-breathing-scale s-cursor-default" : ""
+      )}
+      aria-label={label}
+    >
       {icon && <Icon visual={icon} size={size as IconProps["size"]} />}
-      {isBusy && <Spinner size={size} variant="darkGrey" />}
       {label && (
         <span
           className={classNames(
diff --git a/sparkle/src/components/Dialog.tsx b/sparkle/src/components/Dialog.tsx
index cc63f4f5765c..423b8c74e68d 100644
--- a/sparkle/src/components/Dialog.tsx
+++ b/sparkle/src/components/Dialog.tsx
@@ -1,7 +1,7 @@
 import { Dialog as HeadlessDialog, Transition } from "@headlessui/react";
 import React, { Fragment, useRef } from "react";
 
-import { ConfettiBackground, Spinner } from "@sparkle/index";
+import { ConfettiBackground, Spinner2 } from "@sparkle/index";
 import { classNames } from "@sparkle/lib/utils";
 
 import { Button } from "./Button";
@@ -89,7 +89,7 @@ export function Dialog({
                         />
                       </>
                     )}
-                    {isSaving && <Spinner />}
+                    {isSaving && <Spinner2 variant="color" />}
                   </Button.List>
                 </div>
                 {backgroundType !== "none" && (
diff --git a/sparkle/src/components/Tree.tsx b/sparkle/src/components/Tree.tsx
index 62850416a4bb..8dc5f792d1d8 100644
--- a/sparkle/src/components/Tree.tsx
+++ b/sparkle/src/components/Tree.tsx
@@ -8,12 +8,12 @@ import {
   Folder,
   Square3Stack3D,
 } from "@sparkle/icons/stroke";
+import { Spinner2 } from "@sparkle/index";
 import { classNames } from "@sparkle/lib/utils";
 
 import { Checkbox, CheckboxProps } from "./Checkbox";
 import { Icon } from "./Icon";
 import { IconButton } from "./IconButton";
-import Spinner from "./Spinner";
 
 export interface TreeProps {
   children?: React.ReactNode;
@@ -23,7 +23,7 @@ export interface TreeProps {
 export function Tree({ children, isLoading }: TreeProps) {
   return isLoading ? (
     <div className="s-py-2 s-pl-4">
-      <Spinner size="sm" />
+      <Spinner2 size="xs" variant="dark" />
     </div>
   ) : (
     <div className="s-flex s-flex-col s-gap-1 s-overflow-hidden">
diff --git a/sparkle/src/stories/Chip.stories.tsx b/sparkle/src/stories/Chip.stories.tsx
index da8fcd91dc02..ec8fb0500b0e 100644
--- a/sparkle/src/stories/Chip.stories.tsx
+++ b/sparkle/src/stories/Chip.stories.tsx
@@ -60,5 +60,28 @@ export const ListChipsExample = () => (
         ))}
       </Chip.List>
     </div>
+    isBusy
+    <Chip.List>
+      {colors.map((color) => (
+        <Chip
+          key={`xs-${color}`}
+          size="xs"
+          label={color}
+          color={color}
+          isBusy
+        />
+      ))}
+    </Chip.List>
+    <Chip.List>
+      {colors.map((color) => (
+        <Chip
+          key={`sm-${color}`}
+          size="sm"
+          label={color}
+          color={color}
+          isBusy
+        />
+      ))}
+    </Chip.List>
   </div>
 );
diff --git a/sparkle/tailwind.config.js b/sparkle/tailwind.config.js
index e876a77041a6..2c82350b951e 100644
--- a/sparkle/tailwind.config.js
+++ b/sparkle/tailwind.config.js
@@ -111,10 +111,21 @@ module.exports = {
             filter: "brightness(80%)",
           },
         },
+        "breathing-scale": {
+          "0%, 100%": {
+            filter: "brightness(105%)",
+            transform: "scale(1.0)",
+          },
+          "50%": {
+            filter: "brightness(97%)",
+            transform: "scale(0.95)",
+          },
+        },
       },
       animation: {
+        breathing: "breathing 3s infinite ease-in-out",
+        "breathing-scale": "breathing-scale 3s infinite ease-in-out",
         "move-square": "move-square 3s ease-out infinite",
-        breathing: "breathing 4s infinite ease-in-out",
       },
       colors: {
         brand: {