Deploying the new Spinner

dust-tt · Mar 25, 2024 · b291922 · b291922
1 parent 5c51717
commit b291922
Show file tree

Hide file tree

Showing 14 changed files with 65 additions and 28 deletions.
diff --git 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
@@ -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,15 +194,15 @@ 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>
         ) : running && !(status && status.status != "running") ? (
           <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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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: {