From 07f6e538e95d224d43625e180c4e35d2d7ced65c Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
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<HTMLDivElement> {
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<CircularProgressProps> = (props) => {
 	/**

From 2fc574815115cbcd268517d74fe93f66aecd5628 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
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<typeof Spinner> = {
+	title: "components/Spinner",
+	component: Spinner,
+	args: {
+		children: <PlusIcon className="size-icon-lg" />,
+	},
+};
+
+export default meta;
+type Story = StoryObj<typeof Spinner>;
+
+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<SVGSVGElement> &
+	VariantProps<typeof spinnerVariants> & {
+		children?: ReactNode;
+		loading?: boolean;
+	};
+
+export function Spinner({
+	className,
+	size,
+	loading,
+	children,
+	...props
+}: SpinnerProps) {
+	if (!loading) {
+		return children;
+	}
+
+	return (
+		<svg
+			viewBox="0 0 24 24"
+			xmlns="http://www.w3.org/2000/svg"
+			fill="currentColor"
+			className={cn(spinnerVariants({ size, className }))}
+			{...props}
+		>
+			<title>Loading spinner</title>
+			{[...Array(leaves)].map((_, i) => {
+				const rotation = i * (360 / leaves);
+
+				return (
+					<rect
+						// biome-ignore lint/suspicious/noArrayIndexKey: This is a static array
+						key={i}
+						x="11.5"
+						y="3"
+						width="1.5"
+						height="4"
+						rx="0.5"
+						// 0.8 = leaves * 0.1
+						className="animate-[loading_0.8s_ease-in-out_infinite]"
+						style={{
+							transform: `rotate(${rotation}deg)`,
+							transformOrigin: "center",
+							animationDelay: `${-i * 0.1}s`,
+						}}
+					/>
+				);
+			})}
+		</svg>
+	);
+}
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 <bruno_nonato_quaresma@hotmail.com>
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 <bruno_nonato_quaresma@hotmail.com>
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<typeof Spinner> = {
 	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 (
 					<rect
-						// biome-ignore lint/suspicious/noArrayIndexKey: This is a static array
 						key={i}
 						x="11.5"
 						y="3"

From 7d97bc3df7db0b3480c0236fbe6e830918ee7971 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
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 <bruno_nonato_quaresma@hotmail.com>
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 <bruno@coder.com>
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 <jaayden.halko@gmail.com>
---
 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 (
 					<rect
 						key={i}
-						x="11.5"
-						y="3"
-						width="1.5"
-						height="4"
-						rx="0.5"
+						x="10.9"
+						y="2"
+						width="2"
+						height="5.5"
+						rx="1"
 						// 0.8 = leaves * 0.1
 						className={
 							isChromatic() ? "" : "animate-[loading_0.8s_ease-in-out_infinite]"

From c8466e066f5d7058608faab3efb0ff18752b2c55 Mon Sep 17 00:00:00 2001
From: Bruno Quaresma <bruno@coder.com>
Date: Thu, 2 Jan 2025 15:52:33 -0300
Subject: [PATCH 8/8] Improve loading animation

Co-authored-by: Jaayden Halko <jaayden.halko@gmail.com>
---
 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 },
 				},
 			},
 		},

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>pFad - Phonifier reborn</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
</head>
<body>
<h1>Pfad - The Proxy pFad of &#169; 2024 Garber Painting. All rights reserved.</h1>


<!-- Disclaimer -->
<p>Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.</p>
<br>
<p>Alternative Proxies:</p><p><a href="http://rainy.clevelandohioweatherforecast.com/php-proxy/index.php?q=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/16014.patch" target="_blank">Alternative Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/16014.patch" target="_blank">pFad Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v3index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/16014.patch" target="_blank">pFad v3 Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v4index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/16014.patch" target="_blank">pFad v4 Proxy</a></p></body>
</html>