fix: better loading icon on buttons

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");
   });
 });

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 &&

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",

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() {