feat: add new spinner component

packages/icons/index.ts

@@ -33,7 +33,6 @@ export * from "./src/threads";
 export * from "./src/trash";
 export * from "./src/world";
 export * from "./src/zap";
-export * from "./src/loader";
 export * from "./src/trending";
 export * from "./src/empty";
 export * from "./src/cmd";

packages/icons/src/loader.tsx

@@ -1,28 +0,0 @@
-import { SVGProps } from "react";
-
-export function LoaderIcon(
-  props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
-) {
-  return (
-    <svg
-      {...props}
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-    >
-      <circle
-        className="opacity-25"
-        cx="12"
-        cy="12"
-        r="10"
-        stroke="currentColor"
-        strokeWidth="4"
-      />
-      <path
-        className="opacity-75"
-        fill="currentColor"
-        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-      />
-    </svg>
-  );
-}

packages/ui/src/index.ts

@@ -5,3 +5,4 @@ export * from "./column";
 // UI
 export * from "./container";
 export * from "./box";
+export * from "./spinner";

packages/ui/src/note/buttons/downvote.tsx

@@ -1,10 +1,11 @@
-import { ArrowDownIcon, LoaderIcon } from "@lume/icons";
+import { ArrowDownIcon } from "@lume/icons";
 import { useState } from "react";
 import { useNoteContext } from "../provider";
 import { cn } from "@lume/utils";
 import * as Tooltip from "@radix-ui/react-tooltip";
 import { useTranslation } from "react-i18next";
 import { useRouteContext } from "@tanstack/react-router";
+import { Spinner } from "../../spinner";
 
 export function NoteDownvote() {
   const ark = useRouteContext({ strict: false });
@@ -41,7 +42,7 @@ export function NoteDownvote() {
             )}
           >
             {loading ? (
-              <LoaderIcon className="size-4 animate-spin" />
+              <Spinner className="size-4" />
             ) : (
               <ArrowDownIcon className="size-4" />
             )}

packages/ui/src/note/buttons/repost.tsx

@@ -1,4 +1,4 @@
-import { LoaderIcon, QuoteIcon, RepostIcon } from "@lume/icons";
+import { QuoteIcon, RepostIcon } from "@lume/icons";
 import { cn } from "@lume/utils";
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
 import * as Tooltip from "@radix-ui/react-tooltip";
@@ -7,6 +7,7 @@ import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
 import { useNoteContext } from "../provider";
 import { useRouteContext } from "@tanstack/react-router";
+import { Spinner } from "../../spinner";
 
 export function NoteRepost() {
   const { ark } = useRouteContext({ strict: false });
@@ -46,7 +47,7 @@ export function NoteRepost() {
                 className="group inline-flex size-7 items-center justify-center text-neutral-800 dark:text-neutral-200"
               >
                 {loading ? (
-                  <LoaderIcon className="size-4 animate-spin" />
+                  <Spinner className="size-4" />
                 ) : (
                   <RepostIcon
                     className={cn(

packages/ui/src/note/buttons/upvote.tsx

@@ -1,10 +1,11 @@
-import { ArrowUpIcon, LoaderIcon } from "@lume/icons";
+import { ArrowUpIcon } from "@lume/icons";
 import { useState } from "react";
 import { useNoteContext } from "../provider";
 import { cn } from "@lume/utils";
 import * as Tooltip from "@radix-ui/react-tooltip";
 import { useTranslation } from "react-i18next";
 import { useRouteContext } from "@tanstack/react-router";
+import { Spinner } from "../../spinner";
 
 export function NoteUpvote() {
   const { ark } = useRouteContext({ strict: false });
@@ -41,7 +42,7 @@ export function NoteUpvote() {
             )}
           >
             {loading ? (
-              <LoaderIcon className="size-4 animate-spin" />
+              <Spinner className="size-4" />
             ) : (
               <ArrowUpIcon className="size-4" />
             )}

packages/ui/src/spinner.tsx

@@ -0,0 +1,47 @@
+import { cn } from "@lume/utils";
+import { ReactNode } from "react";
+
+export function Spinner({
+  children,
+  className,
+}: {
+  children?: ReactNode;
+  className?: string;
+}) {
+  const spinner = (
+    <span className={cn("block relative opacity-65 size-4", className)}>
+      <span className="spinner-leaf" />
+      <span className="spinner-leaf" />
+      <span className="spinner-leaf" />
+      <span className="spinner-leaf" />
+      <span className="spinner-leaf" />
+      <span className="spinner-leaf" />
+      <span className="spinner-leaf" />
+      <span className="spinner-leaf" />
+    </span>
+  );
+
+  if (children === undefined) return spinner;
+
+  return (
+    <div className="relative flex items-center justify-center">
+      <span>
+        {/**
+         * `display: contents` removes the content from the accessibility tree in some browsers,
+         * so we force remove it with `aria-hidden`
+         */}
+        <span
+          aria-hidden
+          style={{ display: "contents", visibility: "hidden" }}
+          // Workaround to use `inert` until https://github.com/facebook/react/pull/24730 is merged.
+          {...{ inert: true ? "" : undefined }}
+        >
+          {children}
+        </span>
+        <div className="absolute flex items-center justify-center">
+          <span>{spinner}</span>
+        </div>
+      </span>
+    </div>
+  );
+}

packages/ui/src/user/followButton.tsx

@@ -1,9 +1,9 @@
-import { LoaderIcon } from "@lume/icons";
 import { cn } from "@lume/utils";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useUserContext } from "./provider";
 import { useRouteContext } from "@tanstack/react-router";
+import { Spinner } from "../spinner";
 
 export function UserFollowButton({ className }: { className?: string }) {
   const { ark } = useRouteContext({ strict: false });
@@ -47,7 +47,7 @@ export function UserFollowButton({ className }: { className?: string }) {
       className={cn("w-max", className)}
     >
       {loading ? (
-        <LoaderIcon className="size-4 animate-spin" />
+        <Spinner className="size-4" />
       ) : followed ? (
         t("user.unfollow")
       ) : (