feat: add new spinner component

apps/desktop2/src/routes/$account.home.tsx

@@ -1,7 +1,8 @@
 import { Col } from "@/components/col";
 import { Toolbar } from "@/components/toolbar";
-import { ArrowLeftIcon, ArrowRightIcon, LoaderIcon } from "@lume/icons";
+import { ArrowLeftIcon, ArrowRightIcon } from "@lume/icons";
 import { EventColumns, LumeColumn } from "@lume/types";
+import { Spinner } from "@lume/ui";
 import { createFileRoute } from "@tanstack/react-router";
 import { listen } from "@tauri-apps/api/event";
 import { resolveResource } from "@tauri-apps/api/path";
@@ -148,7 +149,7 @@ function Pending() {
   return (
     <div className="flex h-full w-full items-center justify-center">
       <button type="button" className="size-5" disabled>
-        <LoaderIcon className="size-5 animate-spin" />
+        <Spinner className="size-5" />
       </button>
     </div>
   );

apps/desktop2/src/routes/__root.tsx

@@ -1,9 +1,9 @@
-import { LoaderIcon } from "@lume/icons";
 import { Outlet, createRootRouteWithContext } from "@tanstack/react-router";
 import { type Ark } from "@lume/ark";
 import { type QueryClient } from "@tanstack/react-query";
 import { type Platform } from "@tauri-apps/plugin-os";
 import { Account, Interests, Settings } from "@lume/types";
+import { Spinner } from "@lume/ui";
 
 interface RouterContext {
   ark: Ark;
@@ -25,7 +25,7 @@ function Pending() {
   return (
     <div className="flex h-screen w-screen flex-col items-center justify-center">
       <button type="button" className="size-5" disabled>
-        <LoaderIcon className="size-5 animate-spin" />
+        <Spinner className="size-5" />
       </button>
     </div>
   );

apps/desktop2/src/routes/antenas.tsx

@@ -1,8 +1,8 @@
 import { RepostNote } from "@/components/repost";
 import { TextNote } from "@/components/text";
-import { LoaderIcon, ArrowRightCircleIcon, ArrowRightIcon } from "@lume/icons";
+import { ArrowRightCircleIcon, ArrowRightIcon } from "@lume/icons";
 import { ColumnRouteSearch, Event, Kind } from "@lume/types";
-import { Column } from "@lume/ui";
+import { Column, Spinner } from "@lume/ui";
 import { useInfiniteQuery } from "@tanstack/react-query";
 import { Link, createFileRoute } from "@tanstack/react-router";
 import { Virtualizer } from "virtua";
@@ -53,7 +53,7 @@ export function Screen() {
       <Column.Content>
         {isLoading ? (
           <div className="flex h-20 w-full flex-col items-center justify-center gap-1">
-            <LoaderIcon className="size-5 animate-spin" />
+            <Spinner className="size-5" />
           </div>
         ) : !data.length ? (
           <Empty />
@@ -71,7 +71,7 @@ export function Screen() {
               className="inline-flex h-12 w-36 items-center justify-center gap-2 rounded-full bg-neutral-100 px-3 font-medium hover:bg-neutral-200 focus:outline-none dark:bg-neutral-900 dark:hover:bg-neutral-800"
             >
               {isFetchingNextPage ? (
-                <LoaderIcon className="size-5 animate-spin" />
+                <Spinner className="size-5" />
               ) : (
                 <>
                   <ArrowRightCircleIcon className="size-5" />

apps/desktop2/src/routes/auth/new/profile.tsx

@@ -1,6 +1,7 @@
 import { AvatarUploader } from "@/components/avatarUploader";
-import { LoaderIcon, PlusIcon } from "@lume/icons";
+import { PlusIcon } from "@lume/icons";
 import { Metadata } from "@lume/types";
+import { Spinner } from "@lume/ui";
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
@@ -134,11 +135,7 @@ function Screen() {
           type="submit"
           className="mt-3 inline-flex h-11 w-full shrink-0  items-center justify-center rounded-lg bg-blue-500 font-semibold text-white hover:bg-blue-600 disabled:opacity-50"
         >
-          {loading ? (
-            <LoaderIcon className="size-4 animate-spin" />
-          ) : (
-            t("global.continue")
-          )}
+          {loading ? <Spinner /> : t("global.continue")}
         </button>
       </form>
     </div>

apps/desktop2/src/routes/auth/privkey.lazy.tsx

@@ -1,4 +1,4 @@
-import { LoaderIcon } from "@lume/icons";
+import { Spinner } from "@lume/ui";
 import { createLazyFileRoute, useNavigate } from "@tanstack/react-router";
 import { useState } from "react";
 import { toast } from "sonner";
@@ -82,7 +82,7 @@ function Screen() {
           disabled={loading}
           className="mt-3 inline-flex h-11 w-full shrink-0  items-center justify-center rounded-lg bg-blue-500 font-semibold text-white hover:bg-blue-600 disabled:opacity-50"
         >
-          {loading ? <LoaderIcon className="size-4 animate-spin" /> : "Login"}
+          {loading ? <Spinner /> : "Login"}
         </button>
       </div>
     </div>

apps/desktop2/src/routes/auth/settings.tsx

@@ -1,4 +1,4 @@
-import { LaurelIcon, LoaderIcon } from "@lume/icons";
+import { LaurelIcon } from "@lume/icons";
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
 import { useTranslation } from "react-i18next";
 import * as Switch from "@radix-ui/react-switch";
@@ -9,6 +9,7 @@ import {
   requestPermission,
 } from "@tauri-apps/plugin-notification";
 import { toast } from "sonner";
+import { Spinner } from "@lume/ui";
 
 export const Route = createFileRoute("/auth/settings")({
   validateSearch: (search: Record<string, string>): AppRouteSearch => {
@@ -181,7 +182,7 @@ function Pending() {
   return (
     <div className="flex h-full w-full items-center justify-center">
       <button type="button" className="size-5" disabled>
-        <LoaderIcon className="size-5 animate-spin" />
+        <Spinner className="size-5" />
       </button>
     </div>
   );

apps/desktop2/src/routes/editor/-components/media.tsx

@@ -1,4 +1,4 @@
-import { AddMediaIcon, LoaderIcon } from "@lume/icons";
+import { AddMediaIcon } from "@lume/icons";
 import { cn, insertImage, isImagePath } from "@lume/utils";
 import { useEffect, useState } from "react";
 import { useSlateStatic } from "slate-react";
@@ -6,6 +6,7 @@ import { toast } from "sonner";
 import { getCurrent } from "@tauri-apps/api/window";
 import { UnlistenFn } from "@tauri-apps/api/event";
 import { useRouteContext } from "@tanstack/react-router";
+import { Spinner } from "@lume/ui";
 
 export function MediaButton({ className }: { className?: string }) {
   const { ark } = useRouteContext({ strict: false });
@@ -69,7 +70,7 @@ export function MediaButton({ className }: { className?: string }) {
       className={cn("inline-flex items-center justify-center", className)}
     >
       {loading ? (
-        <LoaderIcon className="size-5 animate-spin" />
+        <Spinner className="size-5" />
       ) : (
         <AddMediaIcon className="size-5" />
       )}

apps/desktop2/src/routes/editor/index.tsx

@@ -31,7 +31,7 @@ import {
   Editable,
 } from "slate-react";
 import { Contact } from "@lume/types";
-import { User } from "@lume/ui";
+import { Spinner, User } from "@lume/ui";
 import { nip19 } from "nostr-tools";
 import { queryOptions, useSuspenseQuery } from "@tanstack/react-query";
 import { invoke } from "@tauri-apps/api/core";
@@ -212,11 +212,7 @@ function Screen() {
             onClick={publish}
             className="inline-flex h-9 w-24 items-center justify-center rounded-full bg-blue-500 px-3 font-medium text-white hover:bg-blue-600"
           >
-            {loading ? (
-              <LoaderIcon className="size-5 animate-spin" />
-            ) : (
-              t("global.post")
-            )}
+            {loading ? <Spinner className="size-5" /> : t("global.post")}
           </button>
         </div>
         <div className="flex h-full min-h-0 w-full">
@@ -280,7 +276,7 @@ function Pending() {
       className="flex h-full w-full items-center justify-center gap-2.5"
     >
       <button type="button" disabled>
-        <LoaderIcon className="size-5 animate-spin" />
+        <Spinner className="size-5" />
       </button>
       <p>Loading cache...</p>
     </div>

apps/desktop2/src/routes/events/$eventId.lazy.tsx

@@ -1,6 +1,5 @@
 import { useEvent } from "@lume/ark";
-import { LoaderIcon } from "@lume/icons";
-import { Box, Container, Note, User } from "@lume/ui";
+import { Box, Container, Note, Spinner, User } from "@lume/ui";
 import { createLazyFileRoute } from "@tanstack/react-router";
 import { ReplyList } from "./-components/replyList";
 import { WindowVirtualizer } from "virtua";
@@ -17,7 +16,7 @@ function Event() {
   if (isLoading) {
     return (
       <div className="flex h-full w-full items-center justify-center">
-        <LoaderIcon className="size-5 animate-spin" />
+        <Spinner className="size-5 animate-spin" />
       </div>
     );
   }

apps/desktop2/src/routes/events/-components/replyList.tsx

@@ -1,10 +1,10 @@
-import { LoaderIcon } from "@lume/icons";
 import { cn } from "@lume/utils";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { EventWithReplies } from "@lume/types";
 import { Reply } from "./reply";
 import { useRouteContext } from "@tanstack/react-router";
+import { Spinner } from "@lume/ui";
 
 export function ReplyList({
   eventId,
@@ -29,7 +29,7 @@ export function ReplyList({
     <div className={cn("flex flex-col gap-3", className)}>
       {!data ? (
         <div className="mt-4 flex h-16 items-center justify-center p-3">
-          <LoaderIcon className="h-5 w-5 animate-spin" />
+          <Spinner className="size-5" />
         </div>
       ) : data.length === 0 ? (
         <div className="mt-4 flex w-full items-center justify-center">

apps/desktop2/src/routes/foryou.tsx

@@ -1,8 +1,8 @@
 import { RepostNote } from "@/components/repost";
 import { TextNote } from "@/components/text";
-import { LoaderIcon, ArrowRightCircleIcon, ArrowRightIcon } from "@lume/icons";
+import { ArrowRightCircleIcon, ArrowRightIcon } from "@lume/icons";
 import { ColumnRouteSearch, Event, Kind } from "@lume/types";
-import { Column } from "@lume/ui";
+import { Column, Spinner } from "@lume/ui";
 import { useInfiniteQuery } from "@tanstack/react-query";
 import { Link, createFileRoute, redirect } from "@tanstack/react-router";
 import { Virtualizer } from "virtua";
@@ -77,7 +77,7 @@ export function Screen() {
         {isLoading ? (
           <div className="flex h-20 w-full flex-col items-center justify-center gap-1">
             <button type="button" className="size-5" disabled>
-              <LoaderIcon className="size-5 animate-spin" />
+              <Spinner className="size-5" />
             </button>
           </div>
         ) : !data.length ? (
@@ -97,7 +97,7 @@ export function Screen() {
               className="inline-flex h-12 w-36 items-center justify-center gap-2 rounded-full bg-neutral-100 px-3 font-medium hover:bg-neutral-200 focus:outline-none dark:bg-neutral-900 dark:hover:bg-neutral-800"
             >
               {isFetchingNextPage ? (
-                <LoaderIcon className="size-5 animate-spin" />
+                <Spinner className="size-5" />
               ) : (
                 <>
                   <ArrowRightCircleIcon className="size-5" />

apps/desktop2/src/routes/global.tsx

@@ -1,8 +1,8 @@
 import { RepostNote } from "@/components/repost";
 import { TextNote } from "@/components/text";
-import { LoaderIcon, ArrowRightCircleIcon, ArrowRightIcon } from "@lume/icons";
+import { ArrowRightCircleIcon, ArrowRightIcon } from "@lume/icons";
 import { ColumnRouteSearch, Event, Kind } from "@lume/types";
-import { Column } from "@lume/ui";
+import { Column, Spinner } from "@lume/ui";
 import { useInfiniteQuery } from "@tanstack/react-query";
 import { Link, createFileRoute } from "@tanstack/react-router";
 import { Virtualizer } from "virtua";
@@ -60,7 +60,7 @@ export function Screen() {
         {isLoading ? (
           <div className="flex h-20 w-full flex-col items-center justify-center gap-1">
             <button type="button" className="size-5" disabled>
-              <LoaderIcon className="size-5 animate-spin" />
+              <Spinner className="size-5" />
             </button>
           </div>
         ) : !data.length ? (
@@ -79,7 +79,7 @@ export function Screen() {
               className="inline-flex h-12 w-36 items-center justify-center gap-2 rounded-full bg-neutral-100 px-3 font-medium hover:bg-neutral-200 focus:outline-none dark:bg-neutral-900 dark:hover:bg-neutral-800"
             >
               {isFetchingNextPage ? (
-                <LoaderIcon className="size-5 animate-spin" />
+                <Spinner className="size-5" />
               ) : (
                 <>
                   <ArrowRightCircleIcon className="size-5" />

apps/desktop2/src/routes/group.tsx

@@ -1,8 +1,8 @@
 import { RepostNote } from "@/components/repost";
 import { TextNote } from "@/components/text";
-import { LoaderIcon, ArrowRightCircleIcon, ArrowRightIcon } from "@lume/icons";
+import { ArrowRightCircleIcon, ArrowRightIcon } from "@lume/icons";
 import { ColumnRouteSearch, Event, Kind } from "@lume/types";
-import { Column } from "@lume/ui";
+import { Column, Spinner } from "@lume/ui";
 import { useInfiniteQuery } from "@tanstack/react-query";
 import { Link, createFileRoute, redirect } from "@tanstack/react-router";
 import { Virtualizer } from "virtua";
@@ -71,7 +71,7 @@ export function Screen() {
       <Column.Content>
         {isLoading ? (
           <div className="flex h-20 w-full flex-col items-center justify-center gap-1">
-            <LoaderIcon className="size-5 animate-spin" />
+            <Spinner className="size-5" />
           </div>
         ) : !data.length ? (
           <Empty />
@@ -89,7 +89,7 @@ export function Screen() {
               className="inline-flex h-12 w-36 items-center justify-center gap-2 rounded-full bg-neutral-100 px-3 font-medium hover:bg-neutral-200 focus:outline-none dark:bg-neutral-900 dark:hover:bg-neutral-800"
             >
               {isFetchingNextPage ? (
-                <LoaderIcon className="size-5 animate-spin" />
+                <Spinner className="size-5" />
               ) : (
                 <>
                   <ArrowRightCircleIcon className="size-5" />

apps/desktop2/src/routes/index.tsx

@@ -1,5 +1,5 @@
-import { LoaderIcon, PlusIcon } from "@lume/icons";
-import { User } from "@lume/ui";
+import { PlusIcon } from "@lume/icons";
+import { Spinner, User } from "@lume/ui";
 import { Link } from "@tanstack/react-router";
 import { createFileRoute, redirect, useNavigate } from "@tanstack/react-router";
 import { useState } from "react";
@@ -73,7 +73,7 @@ function Screen() {
         <div className="flex items-center justify-center gap-6">
           {loading ? (
             <div className="inline-flex size-6 items-center justify-center">
-              <LoaderIcon className="size-6 animate-spin text-white" />
+              <Spinner className="size-6" />
             </div>
           ) : (
             <>

apps/desktop2/src/routes/newsfeed.tsx

@@ -1,8 +1,8 @@
 import { RepostNote } from "@/components/repost";
 import { TextNote } from "@/components/text";
-import { LoaderIcon, ArrowRightCircleIcon, ArrowRightIcon } from "@lume/icons";
+import { ArrowRightCircleIcon, ArrowRightIcon } from "@lume/icons";
 import { ColumnRouteSearch, Event, Kind } from "@lume/types";
-import { Column } from "@lume/ui";
+import { Column, Spinner } from "@lume/ui";
 import { useInfiniteQuery } from "@tanstack/react-query";
 import { Link, createFileRoute } from "@tanstack/react-router";
 import { Virtualizer } from "virtua";
@@ -59,9 +59,7 @@ export function Screen() {
       <Column.Content>
         {isLoading ? (
           <div className="flex h-20 w-full flex-col items-center justify-center gap-1">
-            <button type="button" className="size-5" disabled>
-              <LoaderIcon className="size-5 animate-spin" />
-            </button>
+            <Spinner className="size-5" />
           </div>
         ) : !data.length ? (
           <Empty />
@@ -79,7 +77,7 @@ export function Screen() {
               className="inline-flex h-12 w-36 items-center justify-center gap-2 rounded-full bg-neutral-100 px-3 font-medium hover:bg-neutral-200 focus:outline-none dark:bg-neutral-900 dark:hover:bg-neutral-800"
             >
               {isFetchingNextPage ? (
-                <LoaderIcon className="size-5 animate-spin" />
+                <Spinner className="size-5" />
               ) : (
                 <>
                   <ArrowRightCircleIcon className="size-5" />

apps/desktop2/src/routes/trending.notes.tsx

@@ -1,11 +1,11 @@
 import { RepostNote } from "@/components/repost";
 import { TextNote } from "@/components/text";
-import { LoaderIcon } from "@lume/icons";
 import { Event, Kind } from "@lume/types";
 import { Await, createFileRoute } from "@tanstack/react-router";
 import { Virtualizer } from "virtua";
 import { defer } from "@tanstack/react-router";
 import { Suspense } from "react";
+import { Spinner } from "@lume/ui";
 
 export const Route = createFileRoute("/trending/notes")({
   loader: async ({ abortController }) => {
@@ -50,7 +50,7 @@ export function Screen() {
                 className="inline-flex items-center gap-2 text-sm font-medium"
                 disabled
               >
-                <LoaderIcon className="animate-spin size-5" />
+                <Spinner className="size-5" />
                 Loading...
               </button>
             </div>

apps/desktop2/src/routes/trending.users.tsx

@@ -1,5 +1,4 @@
-import { LoaderIcon } from "@lume/icons";
-import { User } from "@lume/ui";
+import { Spinner, User } from "@lume/ui";
 import { Await, defer } from "@tanstack/react-router";
 import { createFileRoute } from "@tanstack/react-router";
 import { Suspense } from "react";
@@ -34,7 +33,7 @@ export function Screen() {
               className="inline-flex items-center gap-2 text-sm font-medium"
               disabled
             >
-              <LoaderIcon className="size-5 animate-spin" />
+              <Spinner className="size-5" />
               Loading...
             </button>
           </div>

apps/desktop2/src/routes/users/-components/eventList.tsx

@@ -1,10 +1,11 @@
 import { TextNote } from "@/components/text";
 import { RepostNote } from "@/components/repost";
-import { ArrowRightCircleIcon, InfoIcon, LoaderIcon } from "@lume/icons";
+import { ArrowRightCircleIcon, InfoIcon } from "@lume/icons";
 import { Event, Kind } from "@lume/types";
 import { FETCH_LIMIT } from "@lume/utils";
 import { useInfiniteQuery } from "@tanstack/react-query";
 import { useRouteContext } from "@tanstack/react-router";
+import { Spinner } from "@lume/ui";
 
 export function EventList({ id }: { id: string }) {
   const { ark } = useRouteContext({ strict: false });
@@ -39,7 +40,7 @@ export function EventList({ id }: { id: string }) {
     <div>
       {isLoading ? (
         <div className="flex h-20 w-full flex-col items-center justify-center gap-1">
-          <LoaderIcon className="size-5 animate-spin" />
+          <Spinner className="size-5" />
         </div>
       ) : !data.length ? (
         <div className="flex items-center gap-2 rounded-xl bg-neutral-50 p-5 dark:bg-neutral-950">
@@ -58,7 +59,7 @@ export function EventList({ id }: { id: string }) {
             className="inline-flex h-12 w-36 items-center justify-center gap-2 rounded-full bg-neutral-100 px-3 font-medium hover:bg-neutral-200 focus:outline-none dark:bg-neutral-900 dark:hover:bg-neutral-800"
           >
             {isFetchingNextPage ? (
-              <LoaderIcon className="size-5 animate-spin" />
+              <Spinner className="size-5" />
             ) : (
               <>
                 <ArrowRightCircleIcon className="size-5" />