From 07f6e538e95d224d43625e180c4e35d2d7ced65c Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Thu, 2 Jan 2025 16:25:34 +0000 Subject: [PATCH 1/8] Deprecate Spinner --- site/src/components/Loader/Loader.tsx | 2 +- site/src/components/{ => deprecated}/Spinner/Spinner.tsx | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) rename site/src/components/{ => deprecated}/Spinner/Spinner.tsx (94%) diff --git a/site/src/components/Loader/Loader.tsx b/site/src/components/Loader/Loader.tsx index 589cbd72b2331..0121b352eaeb1 100644 --- a/site/src/components/Loader/Loader.tsx +++ b/site/src/components/Loader/Loader.tsx @@ -1,5 +1,5 @@ import type { Interpolation, Theme } from "@emotion/react"; -import { Spinner } from "components/Spinner/Spinner"; +import { Spinner } from "components/deprecated/Spinner/Spinner"; import type { FC, HTMLAttributes } from "react"; interface LoaderProps extends HTMLAttributes { diff --git a/site/src/components/Spinner/Spinner.tsx b/site/src/components/deprecated/Spinner/Spinner.tsx similarity index 94% rename from site/src/components/Spinner/Spinner.tsx rename to site/src/components/deprecated/Spinner/Spinner.tsx index 5b20e2e54c5ef..35fc7e9e177b0 100644 --- a/site/src/components/Spinner/Spinner.tsx +++ b/site/src/components/deprecated/Spinner/Spinner.tsx @@ -8,6 +8,8 @@ import type { FC } from "react"; * Spinner component used to indicate loading states. This component abstracts * the MUI CircularProgress to provide better control over its rendering, * especially in snapshot tests with Chromatic. + * + * @deprecated prefer `components.Spinner` */ export const Spinner: FC = (props) => { /** From 2fc574815115cbcd268517d74fe93f66aecd5628 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Thu, 2 Jan 2025 17:29:11 +0000 Subject: [PATCH 2/8] chore: add Spinner component --- .../components/Spinner/Spinner.stories.tsx | 20 +++++ site/src/components/Spinner/Spinner.tsx | 75 +++++++++++++++++++ site/tailwind.config.js | 7 ++ 3 files changed, 102 insertions(+) create mode 100644 site/src/components/Spinner/Spinner.stories.tsx create mode 100644 site/src/components/Spinner/Spinner.tsx diff --git a/site/src/components/Spinner/Spinner.stories.tsx b/site/src/components/Spinner/Spinner.stories.tsx new file mode 100644 index 0000000000000..f3d9004075ca8 --- /dev/null +++ b/site/src/components/Spinner/Spinner.stories.tsx @@ -0,0 +1,20 @@ +import type { Meta, StoryObj } from "@storybook/react"; +import { Spinner } from "./Spinner"; +import { PlusIcon } from "lucide-react"; + +const meta: Meta = { + title: "components/Spinner", + component: Spinner, + args: { + children: , + }, +}; + +export default meta; +type Story = StoryObj; + +export const Idle: Story = {}; + +export const Loading: Story = { + args: { loading: true }, +}; diff --git a/site/src/components/Spinner/Spinner.tsx b/site/src/components/Spinner/Spinner.tsx new file mode 100644 index 0000000000000..3f9797bac09c7 --- /dev/null +++ b/site/src/components/Spinner/Spinner.tsx @@ -0,0 +1,75 @@ +/** + * This component was inspired by + * https://www.radix-ui.com/themes/docs/components/spinner and developed using + * https://v0.dev/ help. + */ + +import { cva, type VariantProps } from "class-variance-authority"; +import type { ReactNode } from "react"; +import { cn } from "utils/cn"; + +const leaves = 8; + +const spinnerVariants = cva("", { + variants: { + size: { + lg: "size-icon-lg", + sm: "size-icon-sm", + }, + }, + defaultVariants: { + size: "lg", + }, +}); + +type SpinnerProps = React.SVGProps & + VariantProps & { + children?: ReactNode; + loading?: boolean; + }; + +export function Spinner({ + className, + size, + loading, + children, + ...props +}: SpinnerProps) { + if (!loading) { + return children; + } + + return ( + + Loading spinner + {[...Array(leaves)].map((_, i) => { + const rotation = i * (360 / leaves); + + return ( + + ); + })} + + ); +} diff --git a/site/tailwind.config.js b/site/tailwind.config.js index 389ffb22fe96a..65eb237cb8ba3 100644 --- a/site/tailwind.config.js +++ b/site/tailwind.config.js @@ -58,6 +58,13 @@ module.exports = { 5: "hsl(var(--chart-5))", }, }, + keyframes: { + loading: { + "0%": { opacity: 0.85 }, + "50%": { opacity: 0.25 }, + "100%": { opacity: 0.25 }, + }, + }, }, }, plugins: [require("tailwindcss-animate")], From 5353da2ab5d260859c7c0d4438ba016d419e9f46 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Thu, 2 Jan 2025 17:31:13 +0000 Subject: [PATCH 3/8] Avoid animation on Chromatic --- site/src/components/Spinner/Spinner.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/site/src/components/Spinner/Spinner.tsx b/site/src/components/Spinner/Spinner.tsx index 3f9797bac09c7..05d1d57dc20da 100644 --- a/site/src/components/Spinner/Spinner.tsx +++ b/site/src/components/Spinner/Spinner.tsx @@ -4,6 +4,7 @@ * https://v0.dev/ help. */ +import isChromatic from "chromatic/*"; import { cva, type VariantProps } from "class-variance-authority"; import type { ReactNode } from "react"; import { cn } from "utils/cn"; @@ -61,7 +62,9 @@ export function Spinner({ height="4" rx="0.5" // 0.8 = leaves * 0.1 - className="animate-[loading_0.8s_ease-in-out_infinite]" + className={ + isChromatic() ? "" : "animate-[loading_0.8s_ease-in-out_infinite]" + } style={{ transform: `rotate(${rotation}deg)`, transformOrigin: "center", From 962c0ddc6d95256fbef2a1a6154d2ebf2b050ea5 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Thu, 2 Jan 2025 17:31:50 +0000 Subject: [PATCH 4/8] Fix lint error --- site/src/components/Spinner/Spinner.stories.tsx | 2 +- site/src/components/Spinner/Spinner.tsx | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/site/src/components/Spinner/Spinner.stories.tsx b/site/src/components/Spinner/Spinner.stories.tsx index f3d9004075ca8..f1cd9e1b24ff2 100644 --- a/site/src/components/Spinner/Spinner.stories.tsx +++ b/site/src/components/Spinner/Spinner.stories.tsx @@ -1,6 +1,6 @@ import type { Meta, StoryObj } from "@storybook/react"; -import { Spinner } from "./Spinner"; import { PlusIcon } from "lucide-react"; +import { Spinner } from "./Spinner"; const meta: Meta = { title: "components/Spinner", diff --git a/site/src/components/Spinner/Spinner.tsx b/site/src/components/Spinner/Spinner.tsx index 05d1d57dc20da..8a861cc504fed 100644 --- a/site/src/components/Spinner/Spinner.tsx +++ b/site/src/components/Spinner/Spinner.tsx @@ -5,7 +5,7 @@ */ import isChromatic from "chromatic/*"; -import { cva, type VariantProps } from "class-variance-authority"; +import { type VariantProps, cva } from "class-variance-authority"; import type { ReactNode } from "react"; import { cn } from "utils/cn"; @@ -54,7 +54,6 @@ export function Spinner({ return ( Date: Thu, 2 Jan 2025 17:43:49 +0000 Subject: [PATCH 5/8] Fix chromatic import --- site/src/components/Spinner/Spinner.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/components/Spinner/Spinner.tsx b/site/src/components/Spinner/Spinner.tsx index 8a861cc504fed..259e11779d03d 100644 --- a/site/src/components/Spinner/Spinner.tsx +++ b/site/src/components/Spinner/Spinner.tsx @@ -4,10 +4,10 @@ * https://v0.dev/ help. */ -import isChromatic from "chromatic/*"; import { type VariantProps, cva } from "class-variance-authority"; import type { ReactNode } from "react"; import { cn } from "utils/cn"; +import isChromatic from "chromatic/isChromatic"; const leaves = 8; From 9561e205cd73f10471890eb6e95c2bb3a9bfc812 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Thu, 2 Jan 2025 18:23:56 +0000 Subject: [PATCH 6/8] Run make fmt --- site/src/components/Spinner/Spinner.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/components/Spinner/Spinner.tsx b/site/src/components/Spinner/Spinner.tsx index 259e11779d03d..ab138a82cd140 100644 --- a/site/src/components/Spinner/Spinner.tsx +++ b/site/src/components/Spinner/Spinner.tsx @@ -4,10 +4,10 @@ * https://v0.dev/ help. */ +import isChromatic from "chromatic/isChromatic"; import { type VariantProps, cva } from "class-variance-authority"; import type { ReactNode } from "react"; import { cn } from "utils/cn"; -import isChromatic from "chromatic/isChromatic"; const leaves = 8; From a901ab6db88d1c9bfb2d37bb458a6d689edd3898 Mon Sep 17 00:00:00 2001 From: Bruno Quaresma Date: Thu, 2 Jan 2025 15:24:39 -0300 Subject: [PATCH 7/8] Make Spinner to looks more closer to the design Co-authored-by: Jaayden Halko --- site/src/components/Spinner/Spinner.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/site/src/components/Spinner/Spinner.tsx b/site/src/components/Spinner/Spinner.tsx index 259e11779d03d..e68d1250e382f 100644 --- a/site/src/components/Spinner/Spinner.tsx +++ b/site/src/components/Spinner/Spinner.tsx @@ -55,11 +55,11 @@ export function Spinner({ return ( Date: Thu, 2 Jan 2025 15:52:33 -0300 Subject: [PATCH 8/8] Improve loading animation Co-authored-by: Jaayden Halko --- site/tailwind.config.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/site/tailwind.config.js b/site/tailwind.config.js index 65eb237cb8ba3..884cbe88b2c9f 100644 --- a/site/tailwind.config.js +++ b/site/tailwind.config.js @@ -61,8 +61,10 @@ module.exports = { keyframes: { loading: { "0%": { opacity: 0.85 }, - "50%": { opacity: 0.25 }, - "100%": { opacity: 0.25 }, + "25%": { opacity: 0.7 }, + "50%": { opacity: 0.4 }, + "75%": { opacity: 0.3 }, + "100%": { opacity: 0.2 }, }, }, },