From 81e7d79a2c6fe7d37709be98b92a7063d368b1f0 Mon Sep 17 00:00:00 2001
From: Cohan Carpentier <cohan.carpentier@gmail.com>
Date: Mon, 7 Oct 2024 14:01:59 -0400
Subject: [PATCH] fix: better loading icon on buttons

---
 button.test.tsx            |  4 ++--
 button.tsx                 |  6 +++---
 package.json               |  4 ++--
 stories/button.stories.tsx | 28 ++++++++++++++++++++++++----
 4 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/button.test.tsx b/button.test.tsx
index 525319e..e5d5867 100644
--- a/button.test.tsx
+++ b/button.test.tsx
@@ -42,10 +42,10 @@ describe("Button", () => {
     expect(loaderElement).toBeInTheDocument();
   });
 
-  it("reanders Loader2Icon, but hidden when isLoading is false", () => {
+  it("renders Loader2Icon, but hidden when isLoading is false", () => {
     render(<Button isLoading={false} />);
     const loaderElement = screen.getByTestId("loader-icon");
     expect(loaderElement).toBeInTheDocument();
-    expect(loaderElement).toHaveClass("opacity-0");
+    expect(loaderElement).toHaveAttribute("aria-hidden", "true");
   });
 });
diff --git a/button.tsx b/button.tsx
index 01a5266..9b9a9a4 100644
--- a/button.tsx
+++ b/button.tsx
@@ -60,12 +60,12 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       <Component className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...rest}>
         <Loader2Icon
           data-testid="loader-icon"
+          aria-hidden={!isLoading}
           className={cn(
-            "animate-spin",
             !startIcon && "transition-all",
-            isLoading && "mr-2 opacity-100",
+            isLoading && "mr-2 animate-spin",
             iconVariants({ size }),
-            !isLoading && "mr-0 max-w-0 opacity-0",
+            !isLoading && "mr-0 max-w-0",
           )}
         />
         {!isLoading &&
diff --git a/package.json b/package.json
index cee4988..cc1c828 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@risc0/ui",
-  "version": "0.0.183",
+  "version": "0.0.185",
   "private": false,
   "sideEffects": false,
   "type": "module",
@@ -43,7 +43,7 @@
     "simplebar-react": "3.2.6",
     "sonner": "1.5.0",
     "string-ts": "2.2.0",
-    "tailwind-merge": "2.5.2",
+    "tailwind-merge": "2.5.3",
     "tailwindcss": "3.4.13",
     "tailwindcss-animate": "1.0.7",
     "typescript": "5.7.0-dev.20240925",
diff --git a/stories/button.stories.tsx b/stories/button.stories.tsx
index 13925a2..b341918 100644
--- a/stories/button.stories.tsx
+++ b/stories/button.stories.tsx
@@ -1,5 +1,6 @@
 /* c8 ignore start */
-import { RocketIcon } from "lucide-react";
+import { Rocket, RocketIcon, RockingChair } from "lucide-react";
+import { useState } from "react";
 import { Button } from "../button";
 
 export function Default() {
@@ -31,14 +32,33 @@ export function Sizes() {
 export function WithIcon() {
   return (
     <div className="flex space-x-2">
-      <Button startIcon={<RocketIcon className="mr-2 h-4 w-4" />}>Start Icon</Button>
-      <Button endIcon={<RocketIcon className="ml-2 h-4 w-4" />}>End Icon</Button>
+      <Button startIcon={<RocketIcon className="h-4 w-4" />}>Start Icon</Button>
+      <Button endIcon={<RocketIcon className="h-4 w-4" />}>End Icon</Button>
     </div>
   );
 }
 
 export function Loading() {
-  return <Button isLoading>Loading</Button>;
+  const [isLoading, setIsLoading] = useState(false);
+  const [isLoading2, setIsLoading2] = useState(false);
+  const [isLoading3, setIsLoading3] = useState(false);
+
+  return (
+    <div className="flex space-x-2">
+      <Button isLoading={isLoading} onClick={() => setIsLoading(!isLoading)}>
+        Loading (click me)
+      </Button>
+      <Button startIcon={<RocketIcon />} isLoading={isLoading2} onClick={() => setIsLoading2(!isLoading2)}>
+        Loading (click me)
+      </Button>
+      <Button
+        size="icon"
+        startIcon={<RocketIcon />}
+        isLoading={isLoading3}
+        onClick={() => setIsLoading3(!isLoading3)}
+      />
+    </div>
+  );
 }
 
 export function Disabled() {