refactor: replace react-countup with @number-flow/react

components/comments/comment-actions.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { EditIcon, EllipsisIcon, Loader2Icon, ReplyIcon, Trash2Icon } from "lucide-react";
+import { IconDots, IconEdit, IconMessageReply, IconTrash } from "@tabler/icons-react";
 import { useState } from "react";
 import { toast } from "sonner";
 
@@ -21,6 +21,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import { Spinner } from "@/components/ui/spinner";
 import { useSession } from "@/lib/auth-client";
 import { type CommentWithUser, deleteComment } from "@/lib/server/comments";
 
@@ -75,19 +76,19 @@ const CommentActions = ({ comment }: { comment: CommentWithUser }) => {
               setMode(mode.type === "replying" ? { type: "idle" } : { type: "replying" })
             }
           >
-            <ReplyIcon />
+            <IconMessageReply />
             Reply
           </Button>
 
           {session.user.id === comment.user.id && (
             <DropdownMenu>
               <DropdownMenuTrigger render={<Button variant="outline" size="sm" />}>
-                <EllipsisIcon />
+                <IconDots />
                 <span className="sr-only">Actions Menu</span>
               </DropdownMenuTrigger>
               <DropdownMenuContent>
                 <DropdownMenuItem onClick={() => setMode({ type: "editing" })}>
-                  <EditIcon />
+                  <IconEdit />
                   Edit
                 </DropdownMenuItem>
                 <DropdownMenuItem
@@ -95,7 +96,7 @@ const CommentActions = ({ comment }: { comment: CommentWithUser }) => {
                   disabled={isDeleting}
                   variant="destructive"
                 >
-                  {isDeleting ? <Loader2Icon className="animate-spin" /> : <Trash2Icon />}
+                  {isDeleting ? <Spinner /> : <IconTrash />}
                   Delete
                 </DropdownMenuItem>
               </DropdownMenuContent>

components/comments/comment-form.tsx

@@ -1,12 +1,12 @@
 "use client";
 
-import { InfoIcon, Loader2Icon } from "lucide-react";
+import { IconInfoCircle, IconMarkdown } from "@tabler/icons-react";
 import { createContext, useContext, useMemo, useState, useTransition } from "react";
 import { toast } from "sonner";
 
-import { MarkdownIcon } from "@/components/icons";
 import { Button } from "@/components/ui/button";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Spinner } from "@/components/ui/spinner";
 import { Textarea } from "@/components/ui/textarea";
 import { useSession } from "@/lib/auth-client";
 import { createComment, updateComment } from "@/lib/server/comments";
@@ -122,7 +122,7 @@ const SubmitButton = ({
   <Button type="submit" disabled={isPending || disabled}>
     {isPending ? (
       <>
-        <Loader2Icon className="animate-spin" />
+        <Spinner />
         {pendingLabel}
       </>
     ) : (
@@ -134,7 +134,7 @@ const SubmitButton = ({
 // Markdown help popover (only shown for new comments)
 const MarkdownHelp = () => (
   <p className="text-muted-foreground text-[0.8rem] leading-relaxed">
-    <MarkdownIcon className="mr-1.5 inline-block size-4 align-text-top" />
+    <IconMarkdown className="mr-1.5 inline-block size-4 align-text-top" />
     <span className="max-md:hidden">Basic&nbsp;</span>
     <Popover>
       <PopoverTrigger
@@ -150,7 +150,7 @@ const MarkdownHelp = () => (
       </PopoverTrigger>
       <PopoverContent align="start">
         <p className="text-sm leading-loose">
-          <InfoIcon className="mr-1.5 inline size-4.5 align-text-top" />
+          <IconInfoCircle className="mr-1.5 inline size-4.5 align-text-top" />
           Examples:
         </p>
 

components/comments/sign-in.tsx

@@ -1,11 +1,11 @@
 "use client";
 
-import { Loader2Icon } from "lucide-react";
 import { useState } from "react";
 import { toast } from "sonner";
 
 import { GitHubIcon } from "@/components/icons";
 import { Button } from "@/components/ui/button";
+import { Spinner } from "@/components/ui/spinner";
 import { signIn } from "@/lib/auth-client";
 
 const SignIn = ({ callbackPath }: { callbackPath?: string }) => {
@@ -28,7 +28,7 @@ const SignIn = ({ callbackPath }: { callbackPath?: string }) => {
 
   return (
     <Button onClick={handleSignIn} disabled={isLoading} size="lg" variant="outline">
-      {isLoading ? <Loader2Icon className="animate-spin" /> : <GitHubIcon />}
+      {isLoading ? <Spinner /> : <GitHubIcon />}
       Sign in with GitHub
     </Button>
   );