ui: replace custom loading spinners with IconSpinner component across multiple files

apps/web/src/components/ActivityFeed.tsx

@@ -1,9 +1,9 @@
-import {Button} from '@plunk/ui';
+import {Button, IconSpinner} from '@plunk/ui';
 import type {Activity, CursorPaginatedResponse} from '@plunk/types';
 import {network} from '../lib/network';
 import {ActivityItem} from './ActivityItem';
 import {EmptyState} from './EmptyState';
-import {Activity as ActivityIcon, Loader2} from 'lucide-react';
+import {Activity as ActivityIcon} from 'lucide-react';
 import {useCallback, useEffect, useMemo, useState} from 'react';
 
 export interface ActivityFeedProps {
@@ -169,7 +169,7 @@ export function ActivityFeed({typeFilter, dateRangeDays = 30, contactId}: Activi
   if (isLoading) {
     return (
       <div className="flex items-center justify-center py-12">
-        <Loader2 className="h-8 w-8 animate-spin text-neutral-400" />
+        <IconSpinner />
       </div>
     );
   }
@@ -215,7 +215,7 @@ export function ActivityFeed({typeFilter, dateRangeDays = 30, contactId}: Activi
           <Button onClick={loadMore} variant="outline" disabled={isLoadingMore}>
             {isLoadingMore ? (
               <>
-                <Loader2 className="h-4 w-4 animate-spin mr-2" />
+                <IconSpinner size="sm" className="mr-2" />
                 Loading...
               </>
             ) : (

apps/web/src/components/BillingConsumption.tsx

@@ -1,4 +1,4 @@
-import {Alert, Card, CardContent, CardDescription, CardHeader, CardTitle} from '@plunk/ui';
+import {Alert, Card, CardContent, CardDescription, CardHeader, CardTitle, IconSpinner} from '@plunk/ui';
 import {AlertCircle, Coins, TrendingUp} from 'lucide-react';
 import {useBillingConsumption} from '../lib/hooks/useBillingConsumption';
 import {useConfig} from '../lib/hooks/useConfig';
@@ -67,7 +67,9 @@ export function BillingConsumption({projectId, hasSubscription}: BillingConsumpt
           <CardDescription>View your current month email consumption and costs</CardDescription>
         </CardHeader>
         <CardContent>
-          <p className="text-sm text-neutral-500">Loading...</p>
+          <div className="flex items-center justify-center py-4">
+            <IconSpinner size="sm" />
+          </div>
         </CardContent>
       </Card>
     );

apps/web/src/components/BillingInvoices.tsx

@@ -1,4 +1,4 @@
-import {Alert, Badge, Button, Card, CardContent, CardDescription, CardHeader, CardTitle} from '@plunk/ui';
+import {Alert, Badge, Button, Card, CardContent, CardDescription, CardHeader, CardTitle, IconSpinner} from '@plunk/ui';
 import {AlertCircle, Download, ExternalLink, FileText} from 'lucide-react';
 import {useBillingInvoices} from '../lib/hooks/useBillingInvoices';
 
@@ -41,7 +41,9 @@ export function BillingInvoices({projectId, hasSubscription, onManageBilling}: B
           <CardDescription>View and download your billing history</CardDescription>
         </CardHeader>
         <CardContent>
-          <p className="text-sm text-neutral-500">Loading...</p>
+          <div className="flex items-center justify-center py-4">
+            <IconSpinner size="sm" />
+          </div>
         </CardContent>
       </Card>
     );

apps/web/src/components/BillingLimits.tsx

@@ -13,6 +13,7 @@ import {
   Form,
   FormControl,
   FormDescription,
+  IconSpinner,
   FormField,
   FormItem,
   FormLabel,
@@ -146,7 +147,9 @@ export function BillingLimits({projectId, hasSubscription, billingEnabled}: Bill
           <CardDescription>Set monthly limits for each email category</CardDescription>
         </CardHeader>
         <CardContent>
-          <p className="text-sm text-neutral-500">Loading...</p>
+          <div className="flex items-center justify-center py-4">
+            <IconSpinner size="sm" />
+          </div>
         </CardContent>
       </Card>
     );

apps/web/src/components/CampaignSelectionDialog.tsx

@@ -17,6 +17,7 @@ import {
   SelectContent,
   SelectItem,
   SelectTrigger,
+  IconSpinner,
   SelectValue,
 } from '@plunk/ui';
 import type {Campaign} from '@plunk/db';
@@ -167,22 +168,7 @@ export function CampaignSelectionDialog({open, onOpenChange, onSelectCampaign}:
             <div className="flex-1 overflow-y-auto space-y-3">
               {isLoading && (
                 <div className="flex items-center justify-center py-12">
-                  <div className="text-center">
+                  <IconSpinner />
-                    <svg
-                      className="h-8 w-8 animate-spin mx-auto text-neutral-900"
-                      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>
-                    <p className="mt-2 text-sm text-neutral-500">Loading campaigns...</p>
-                  </div>
                 </div>
               )}
 

apps/web/src/components/DataManagementSettings.tsx

@@ -20,8 +20,9 @@ import {
   TableHead,
   TableHeader,
   TableRow,
+  IconSpinner,
 } from '@plunk/ui';
-import {AlertCircle, Database, Loader2, Trash2, Zap} from 'lucide-react';
+import {AlertCircle, Database, Trash2, Zap} from 'lucide-react';
 import {EmptyState} from './EmptyState';
 import {toast} from 'sonner';
 import useSWR from 'swr';
@@ -345,7 +346,7 @@ export function DataManagementSettings() {
                 isDeleting || (!!selectedField && !fieldUsage?.canDelete) || (!!selectedEvent && !eventUsage?.canDelete)
               }
             >
-              {isDeleting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              {isDeleting && <IconSpinner size="sm" className="mr-2" />}
               Delete
             </Button>
           </DialogFooter>

apps/web/src/components/DomainsSettings.tsx

@@ -17,10 +17,11 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
+  IconSpinner,
   Input,
 } from '@plunk/ui';
 import {AnimatePresence, motion} from 'framer-motion';
-import {Check, CheckCircle2, ChevronDown, Copy, Globe, Loader2, RefreshCw, Trash2, XCircle} from 'lucide-react';
+import {Check, CheckCircle2, ChevronDown, Copy, Globe, RefreshCw, Trash2, XCircle} from 'lucide-react';
 import {EmptyState} from './EmptyState';
 import {useConfig} from '../lib/hooks/useConfig';
 import {useAddDomain, useCheckDomainVerification, useDomains, useRemoveDomain} from '../lib/hooks/useDomains';
@@ -322,7 +323,7 @@ export function DomainsSettings({projectId}: DomainsSettingsProps) {
         <CardContent>
           {isLoading ? (
             <div className="flex items-center justify-center py-8">
-              <Loader2 className="h-6 w-6 animate-spin text-neutral-400" />
+              <IconSpinner />
             </div>
           ) : !domains || domains.length === 0 ? (
             <EmptyState
@@ -360,7 +361,7 @@ export function DomainsSettings({projectId}: DomainsSettingsProps) {
                           className="min-w-[80px]"
                         >
                           {checkingVerification === domain.id ? (
-                            <Loader2 className="h-4 w-4 animate-spin" />
+                            <IconSpinner size="sm" />
                           ) : (cooldownSeconds[domain.id] ?? 0) > 0 ? (
                             <span className="text-xs">{cooldownSeconds[domain.id]}s</span>
                           ) : (

apps/web/src/components/TeamSettings.tsx

@@ -37,6 +37,7 @@ import {
   TableHead,
   TableHeader,
   TableRow,
+  IconSpinner,
 } from '@plunk/ui';
 import {MembershipSchemas} from '@plunk/shared';
 import {MoreVertical, Trash2, UserPlus} from 'lucide-react';
@@ -221,7 +222,7 @@ export function TeamSettings({projectId, currentUserRole, currentUserId}: TeamSe
         <CardContent>
           {isLoading ? (
             <div className="flex justify-center py-8">
-              <div className="h-8 w-8 animate-spin rounded-full border-4 border-neutral-200 border-t-neutral-900" />
+              <IconSpinner />
             </div>
           ) : members.length === 0 ? (
             <div className="py-8 text-center text-sm text-neutral-500">No members found</div>

apps/web/src/components/TemplateSelectionDialog.tsx

@@ -12,6 +12,7 @@ import {
   DialogDescription,
   DialogHeader,
   DialogTitle,
+  IconSpinner,
   Input,
   Label,
 } from '@plunk/ui';
@@ -205,25 +206,9 @@ export function TemplateSelectionDialog({open, onOpenChange, onSelectTemplate}:
             <div className="flex-1 overflow-y-auto space-y-3">
               {isLoading && (
                 <div className="flex items-center justify-center py-12">
-                  <div className="text-center">
+                  <IconSpinner />
-                    <svg
-                      className="h-8 w-8 animate-spin mx-auto text-neutral-900"
-                      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>
-                    <p className="mt-2 text-sm text-neutral-500">Loading templates...</p>
-                  </div>
                 </div>
               )}
-
               {!isLoading && data?.data.length === 0 && (
                 <EmptyState
                   icon={FileText}

apps/web/src/pages/auth/login.tsx

@@ -16,6 +16,7 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
+  IconSpinner,
   Input,
 } from '@plunk/ui';
 import {AnimatePresence, motion} from 'framer-motion';
@@ -33,16 +34,6 @@ import {useProjects} from '../../lib/hooks/useProject';
 import {useUser} from '../../lib/hooks/useUser';
 import {network} from '../../lib/network';
 
-const Spinner = () => (
-  <svg className="h-4 w-4 animate-spin" 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>
-);
 
 export default function Login() {
   const {mutate: userMutate} = useUser();
@@ -296,7 +287,7 @@ export default function Login() {
                     <Button type="submit" className="w-full" disabled={form.formState.isSubmitting}>
                       {form.formState.isSubmitting ? (
                         <>
-                          <Spinner />
+                          <IconSpinner size="sm" />
                           Signing in...
                         </>
                       ) : (
@@ -352,7 +343,7 @@ export default function Login() {
                   <Button className="w-full" type="submit" disabled={resetStatus === 'loading'}>
                     {resetStatus === 'loading' ? (
                       <>
-                        <Spinner />
+                        <IconSpinner size="sm" />
                         Sending...
                       </>
                     ) : (

apps/web/src/pages/auth/reset-password.tsx

@@ -10,6 +10,7 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
+  IconSpinner,
   Input,
 } from '@plunk/ui';
 import {AnimatePresence, motion} from 'framer-motion';
@@ -29,16 +30,6 @@ const dotGrid = {
   backgroundSize: '20px 20px',
 };
 
-const Spinner = () => (
-  <svg className="h-4 w-4 animate-spin" 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>
-);
 
 const Wordmark = () => (
   <div className="flex items-center justify-center gap-2.5">
@@ -202,7 +193,7 @@ export default function ResetPassword() {
                           <Button type="submit" className="w-full" disabled={form.formState.isSubmitting}>
                             {form.formState.isSubmitting ? (
                               <>
-                                <Spinner />
+                                <IconSpinner size="sm" />
                                 Resetting...
                               </>
                             ) : (

apps/web/src/pages/auth/signup.tsx

@@ -10,6 +10,7 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
+  IconSpinner,
   Input,
 } from '@plunk/ui';
 import {AnimatePresence, motion} from 'framer-motion';
@@ -27,16 +28,6 @@ import {useProjects} from '../../lib/hooks/useProject';
 import {useUser} from '../../lib/hooks/useUser';
 import {network} from '../../lib/network';
 
-const Spinner = () => (
-  <svg className="h-4 w-4 animate-spin" 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>
-);
 
 export default function Signup() {
   const {mutate: userMutate} = useUser();
@@ -226,7 +217,7 @@ export default function Signup() {
                     <Button type="submit" className="w-full" disabled={form.formState.isSubmitting}>
                       {form.formState.isSubmitting ? (
                         <>
-                          <Spinner />
+                          <IconSpinner size="sm" />
                           Creating account...
                         </>
                       ) : (

apps/web/src/pages/auth/verify-email.tsx

@@ -1,5 +1,5 @@
 import {AuthenticationSchemas} from '@plunk/shared';
-import {Button, Card, CardContent} from '@plunk/ui';
+import {Button, Card, CardContent, IconSpinner} from '@plunk/ui';
 import {AnimatePresence, motion} from 'framer-motion';
 import {NextSeo} from 'next-seo';
 import Image from 'next/image';
@@ -15,16 +15,6 @@ const dotGrid = {
   backgroundSize: '20px 20px',
 };
 
-const Spinner = () => (
-  <svg className="h-6 w-6 animate-spin text-neutral-500" 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>
-);
 
 export default function VerifyEmail() {
   const router = useRouter();
@@ -219,7 +209,7 @@ export default function VerifyEmail() {
                       className="flex flex-col items-center gap-4"
                     >
                       <div className="h-12 w-12 rounded-full bg-neutral-100 flex items-center justify-center">
-                        <Spinner />
+                        <IconSpinner size="sm" />
                       </div>
                       <div className="flex flex-col gap-1.5">
                         <h1 className="text-xl font-bold tracking-tight">Verifying...</h1>

apps/web/src/pages/campaigns/[id].tsx

@@ -26,6 +26,7 @@ import {
   SelectItemWithDescription,
   SelectTrigger,
   SelectValue,
+  IconSpinner,
   StickySaveBar,
 } from '@plunk/ui';
 import type {Campaign, Segment} from '@plunk/db';
@@ -308,10 +309,7 @@ export default function CampaignDetailsPage() {
     return (
       <DashboardLayout>
         <div className="flex items-center justify-center py-12">
-          <div className="text-center">
+          <IconSpinner />
-            <div className="h-8 w-8 animate-spin mx-auto border-4 border-neutral-200 border-t-neutral-900 rounded-full" />
-            <p className="mt-2 text-sm text-neutral-500">Loading campaign...</p>
-          </div>
         </div>
       </DashboardLayout>
     );

apps/web/src/pages/campaigns/create.tsx

@@ -6,6 +6,7 @@ import {
   CardDescription,
   CardHeader,
   CardTitle,
+  IconSpinner,
   Input,
   Label,
   Select,
@@ -166,21 +167,9 @@ export default function CreateCampaignPage() {
       <NextSeo title="Create Campaign" />
       <DashboardLayout>
         {loadingTemplate && (
-          <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center">
+          <div className="fixed inset-0 bg-black/40 z-50 flex items-center justify-center">
-            <div className="bg-white rounded-lg p-6 text-center">
+            <div className="bg-white rounded-lg p-5 flex items-center gap-3">
-              <svg
+              <IconSpinner />
-                className="h-8 w-8 animate-spin mx-auto text-neutral-900 mb-3"
-                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>
               <p className="text-sm text-neutral-700">Loading template...</p>
             </div>
           </div>

apps/web/src/pages/contacts/[id].tsx

@@ -5,13 +5,14 @@ import {
   CardHeader,
   CardTitle,
   ConfirmDialog,
+  IconSpinner,
   Input,
   Label,
   Switch,
 } from '@plunk/ui';
 import type {Contact} from '@plunk/db';
 import {AnimatePresence, motion} from 'framer-motion';
-import {ArrowLeft, Check, Copy, Database, ExternalLink, Loader2, Save, Settings, Trash2} from 'lucide-react';
+import {ArrowLeft, Check, Copy, Database, ExternalLink, Save, Settings, Trash2} from 'lucide-react';
 import Link from 'next/link';
 import {NextSeo} from 'next-seo';
 import {useRouter} from 'next/router';
@@ -90,7 +91,7 @@ export default function ContactDetailPage() {
     return (
       <DashboardLayout>
         <div className="flex items-center justify-center py-12">
-          <Loader2 className="h-8 w-8 animate-spin text-neutral-400" />
+          <IconSpinner />
         </div>
       </DashboardLayout>
     );

apps/web/src/pages/contacts/index.tsx

@@ -12,6 +12,7 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
+  IconSpinner,
   Input,
   Label,
   Switch,
@@ -265,22 +266,7 @@ export default function ContactsPage() {
             <CardContent>
               {isLoading && contacts.length === 0 ? (
                 <div className="flex items-center justify-center py-12">
-                  <div className="text-center">
+                  <IconSpinner />
-                    <svg
-                      className="h-8 w-8 animate-spin mx-auto text-neutral-900"
-                      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>
-                    <p className="mt-2 text-sm text-neutral-500">Loading contacts...</p>
-                  </div>
                 </div>
               ) : contacts.length === 0 ? (
                 <EmptyState

apps/web/src/pages/manage/[id].tsx

@@ -1,4 +1,4 @@
-import {Button, Card, CardContent} from '@plunk/ui';
+import {Button, Card, CardContent, IconSpinner} from '@plunk/ui';
 import {createTranslator, type Translator} from '@plunk/shared';
 import {AnimatePresence, motion} from 'framer-motion';
 import {useRouter} from 'next/router';
@@ -82,19 +82,7 @@ export default function Manage() {
           <Card>
             <CardContent className="p-8">
               <div className="flex flex-col items-center gap-4">
-                <svg
+                <IconSpinner />
-                  className="h-8 w-8 animate-spin text-neutral-500"
-                  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>
                 <p className="text-sm text-neutral-500">Loading...</p>
               </div>
             </CardContent>
@@ -111,19 +99,7 @@ export default function Manage() {
           <Card>
             <CardContent className="p-8">
               <div className="flex flex-col items-center gap-4">
-                <svg
+                <IconSpinner />
-                  className="h-8 w-8 animate-spin text-neutral-500"
-                  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>
                 <p className="text-sm text-neutral-500">{translator.t('pages.common.loading')}</p>
               </div>
             </CardContent>

apps/web/src/pages/projects/create.tsx

@@ -12,6 +12,7 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
+  IconSpinner,
   Input,
 } from '@plunk/ui';
 import {AnimatePresence, motion} from 'framer-motion';
@@ -129,26 +130,7 @@ export default function CreateProject() {
                         <Button type="submit" className="w-full" disabled={form.formState.isSubmitting}>
                           {form.formState.isSubmitting ? (
                             <>
-                              <svg
+                              <IconSpinner size="sm" className="mr-2" />
-                                className="h-4 w-4 animate-spin"
-                                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>
                               Creating...
                             </>
                           ) : (

apps/web/src/pages/segments/[id].tsx

@@ -6,6 +6,7 @@ import {
   CardHeader,
   CardTitle,
   ConfirmDialog,
+  IconSpinner,
   Input,
   Label,
 } from '@plunk/ui';
@@ -178,22 +179,7 @@ export default function SegmentDetailPage() {
     return (
       <DashboardLayout>
         <div className="flex items-center justify-center py-12">
-          <div className="text-center">
+          <IconSpinner />
-            <svg
-              className="h-8 w-8 animate-spin mx-auto text-neutral-900"
-              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>
-            <p className="mt-2 text-sm text-neutral-500">Loading segment...</p>
-          </div>
         </div>
       </DashboardLayout>
     );

apps/web/src/pages/segments/index.tsx

@@ -8,6 +8,7 @@ import {
   CardHeader,
   CardTitle,
   ConfirmDialog,
+  IconSpinner,
 } from '@plunk/ui';
 import type {Segment} from '@plunk/db';
 import type {FilterCondition} from '@plunk/types';
@@ -105,22 +106,7 @@ export default function SegmentsPage() {
           {/* Segments Grid */}
           {isLoading ? (
             <div className="flex items-center justify-center py-12">
-              <div className="text-center">
+              <IconSpinner />
-                <svg
-                  className="h-8 w-8 animate-spin mx-auto text-neutral-900"
-                  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>
-                <p className="mt-2 text-sm text-neutral-500">Loading segments...</p>
-              </div>
             </div>
           ) : segments?.length === 0 ? (
             <Card>

apps/web/src/pages/subscribe/[id].tsx

@@ -1,4 +1,4 @@
-import {Button, Card, CardContent} from '@plunk/ui';
+import {Button, Card, CardContent, IconSpinner} from '@plunk/ui';
 import {createTranslator, type Translator} from '@plunk/shared';
 import {AnimatePresence, motion} from 'framer-motion';
 import {useRouter} from 'next/router';
@@ -72,19 +72,7 @@ export default function Subscribe() {
           <Card>
             <CardContent className="p-8">
               <div className="flex flex-col items-center gap-4">
-                <svg
+                <IconSpinner />
-                  className="h-8 w-8 animate-spin text-neutral-500"
-                  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>
                 <p className="text-sm text-neutral-500">Loading...</p>
               </div>
             </CardContent>
@@ -101,19 +89,7 @@ export default function Subscribe() {
           <Card>
             <CardContent className="p-8">
               <div className="flex flex-col items-center gap-4">
-                <svg
+                <IconSpinner />
-                  className="h-8 w-8 animate-spin text-neutral-500"
-                  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>
                 <p className="text-sm text-neutral-500">{translator.t('pages.common.loading')}</p>
               </div>
             </CardContent>
@@ -219,19 +195,7 @@ export default function Subscribe() {
               <Button onClick={() => void handleSubscribe()} className="w-full" disabled={subscribing}>
                 {subscribing ? (
                   <div className="flex items-center gap-2">
-                    <svg
+                    <IconSpinner size="sm" />
-                      className="h-4 w-4 animate-spin"
-                      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>
                     <span>{translator.t('pages.subscribe.buttonLoading')}</span>
                   </div>
                 ) : (

apps/web/src/pages/templates/[id].tsx

@@ -6,6 +6,7 @@ import {
   CardHeader,
   CardTitle,
   ConfirmDialog,
+  IconSpinner,
   Input,
   Label,
   StickySaveBar,
@@ -117,22 +118,7 @@ export default function TemplateEditorPage() {
     return (
       <DashboardLayout>
         <div className="flex items-center justify-center min-h-[400px]">
-          <div className="text-center">
+          <IconSpinner />
-            <svg
-              className="h-8 w-8 animate-spin mx-auto text-neutral-900"
-              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>
-            <p className="mt-2 text-sm text-neutral-500">Loading template...</p>
-          </div>
         </div>
       </DashboardLayout>
     );

apps/web/src/pages/templates/index.tsx

@@ -7,6 +7,7 @@ import {
   CardHeader,
   CardTitle,
   ConfirmDialog,
+  IconSpinner,
   Input,
 } from '@plunk/ui';
 import type {Template} from '@plunk/db';
@@ -165,22 +166,7 @@ export default function TemplatesPage() {
               <Card>
                 <CardContent className="pt-6">
                   <div className="flex items-center justify-center py-12">
-                    <div className="text-center">
+                    <IconSpinner />
-                      <svg
-                        className="h-8 w-8 animate-spin mx-auto text-neutral-900"
-                        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>
-                      <p className="mt-2 text-sm text-neutral-500">Loading templates...</p>
-                    </div>
                   </div>
                 </CardContent>
               </Card>

apps/web/src/pages/unsubscribe/[id].tsx

@@ -1,4 +1,4 @@
-import {Button, Card, CardContent} from '@plunk/ui';
+import {Button, Card, CardContent, IconSpinner} from '@plunk/ui';
 import {createTranslator, type Translator} from '@plunk/shared';
 import {AnimatePresence, motion} from 'framer-motion';
 import {useRouter} from 'next/router';
@@ -72,19 +72,7 @@ export default function Unsubscribe() {
           <Card>
             <CardContent className="p-8">
               <div className="flex flex-col items-center gap-4">
-                <svg
+                <IconSpinner />
-                  className="h-8 w-8 animate-spin text-neutral-500"
-                  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>
                 <p className="text-sm text-neutral-500">Loading...</p>
               </div>
             </CardContent>
@@ -101,19 +89,7 @@ export default function Unsubscribe() {
           <Card>
             <CardContent className="p-8">
               <div className="flex flex-col items-center gap-4">
-                <svg
+                <IconSpinner />
-                  className="h-8 w-8 animate-spin text-neutral-500"
-                  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>
                 <p className="text-sm text-neutral-500">{translator.t('pages.common.loading')}</p>
               </div>
             </CardContent>
@@ -236,19 +212,7 @@ export default function Unsubscribe() {
                 >
                   {unsubscribing ? (
                     <div className="flex items-center gap-2">
-                      <svg
+                      <IconSpinner size="sm" />
-                        className="h-4 w-4 animate-spin"
-                        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>
                       <span>{translator.t('pages.unsubscribe.buttonLoading')}</span>
                     </div>
                   ) : (

apps/web/src/pages/workflows/[id].tsx

@@ -30,6 +30,7 @@ import {
   CommandGroup,
   CommandItem,
   CommandList,
+  IconSpinner,
   Switch,
 } from '@plunk/ui';
 import type {Template, Workflow, WorkflowExecution, WorkflowStep, WorkflowTransition} from '@plunk/db';
@@ -406,22 +407,7 @@ export default function WorkflowEditorPage() {
     return (
       <DashboardLayout>
         <div className="flex items-center justify-center min-h-[400px]">
-          <div className="text-center">
+          <IconSpinner />
-            <svg
-              className="h-8 w-8 animate-spin mx-auto text-neutral-900"
-              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>
-            <p className="mt-2 text-sm text-neutral-500">Loading workflow...</p>
-          </div>
         </div>
       </DashboardLayout>
     );
@@ -1463,19 +1449,7 @@ function AddStepDialog({open, onOpenChange, workflowId, onSuccess}: AddStepDialo
                   </Label>
                   {loadingFields ? (
                     <div className="flex items-center gap-2 px-3 py-2 border border-neutral-200 rounded-lg text-sm text-neutral-500 mt-1.5">
-                      <svg
+                      <IconSpinner size="sm" />
-                        className="h-4 w-4 animate-spin"
-                        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>
                       Loading fields...
                     </div>
                   ) : availableFields.length > 0 ? (
@@ -2520,19 +2494,7 @@ function EditStepDialog({step, workflowId, open, onOpenChange, onSuccess}: EditS
                   <Label htmlFor="editConditionField">Field to Check *</Label>
                   {loadingFields ? (
                     <div className="flex items-center gap-2 px-3 py-2 border border-neutral-200 rounded-lg text-sm text-neutral-500 mt-1.5">
-                      <svg
+                      <IconSpinner size="sm" />
-                        className="h-4 w-4 animate-spin"
-                        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>
                       Loading fields...
                     </div>
                   ) : availableFields.length > 0 ? (

apps/web/src/pages/workflows/index.tsx

@@ -16,6 +16,7 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
+  IconSpinner,
   Input,
   Label,
 } from '@plunk/ui';
@@ -137,22 +138,7 @@ export default function WorkflowsPage() {
               <Card>
                 <CardContent className="pt-6">
                   <div className="flex items-center justify-center py-12">
-                    <div className="text-center">
+                    <IconSpinner />
-                      <svg
-                        className="h-8 w-8 animate-spin mx-auto text-neutral-900"
-                        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>
-                      <p className="mt-2 text-sm text-neutral-500">Loading workflows...</p>
-                    </div>
                   </div>
                 </CardContent>
               </Card>

packages/ui/src/components/atoms/IconSpinner.tsx

@@ -1,74 +1,25 @@
 import {cn} from '../../lib';
 
 export interface IconSpinnerProps {
-  size?: 'sm' | 'md' | 'lg' | 'xl';
+  size?: 'sm' | 'md' | 'lg';
   className?: string;
 }
 
 const sizeConfig = {
-  sm: {
+  sm: 'w-4 h-4 border-[1.5px]',
-    container: 'w-4 h-4',
+  md: 'w-5 h-5 border-[1.5px]',
-    border: 'border-2',
+  lg: 'w-7 h-7 border-2',
-    innerInset: 'inset-0.5',
-    dot: 'w-1 h-1',
-  },
-  md: {
-    container: 'w-8 h-8',
-    border: 'border-[2.5px]',
-    innerInset: 'inset-1',
-    dot: 'w-1.5 h-1.5',
-  },
-  lg: {
-    container: 'w-12 h-12',
-    border: 'border-[3px]',
-    innerInset: 'inset-1.5',
-    dot: 'w-2 h-2',
-  },
-  xl: {
-    container: 'w-16 h-16',
-    border: 'border-[3px]',
-    innerInset: 'inset-2',
-    dot: 'w-2.5 h-2.5',
-  },
 };
 
-/**
- * Animated spinner icon component with dual rotating rings
- */
 export function IconSpinner({size = 'md', className}: IconSpinnerProps) {
-  const config = sizeConfig[size];
-
   return (
-    <div className={cn('relative inline-block', config.container, className)}>
+    <div
-      {/* Outer glow effect */}
+      className={cn(
-      <div className="absolute inset-0 rounded-full bg-neutral-900/10 blur-sm animate-pulse" />
+        'rounded-full border-neutral-200 border-t-neutral-800 animate-spin flex-shrink-0',
-
+        sizeConfig[size],
-      {/* Base circle */}
+        className,
-      <div className={cn('absolute inset-0 rounded-full border-neutral-100', config.border)} />
+      )}
-
+      style={{animationDuration: '0.65s'}}
-      {/* Primary animated ring */}
+    />
-      <div
-        className={cn(
-          'absolute inset-0 rounded-full border-transparent border-t-neutral-900 border-r-neutral-700 animate-spin',
-          config.border,
-        )}
-        style={{animationDuration: '0.8s'}}
-      />
-
-      {/* Secondary animated ring (counter-rotating) */}
-      <div
-        className={cn(
-          'absolute rounded-full border-transparent border-b-neutral-800 border-l-neutral-600 animate-spin',
-          config.border,
-          config.innerInset,
-        )}
-        style={{animationDuration: '1.2s', animationDirection: 'reverse'}}
-      />
-
-      {/* Center dot */}
-      <div className="absolute inset-0 flex items-center justify-center">
-        <div className={cn('bg-neutral-900 rounded-full animate-pulse', config.dot)} />
-      </div>
-    </div>
   );
 }

packages/ui/src/components/atoms/Loader.tsx

@@ -1,24 +1,19 @@
 import Image from 'next/image';
 import {useEffect, useState} from 'react';
 import {useRouter} from 'next/router';
+import {IconSpinner} from './IconSpinner';
 
 export interface LoaderProps {
   message?: string;
   showLogo?: boolean;
 }
 
-/**
+export function Loader({message, showLogo = true}: LoaderProps) {
- * Full-screen loader component with animated logo and spinner
- */
-export function Loader({message = 'Loading...', showLogo = true}: LoaderProps) {
   const [showClearCache, setShowClearCache] = useState(false);
   const router = useRouter();
 
   useEffect(() => {
-    const timer = setTimeout(() => {
+    const timer = setTimeout(() => setShowClearCache(true), 5000);
-      setShowClearCache(true);
-    }, 5000);
-
     return () => clearTimeout(timer);
   }, []);
 
@@ -26,60 +21,28 @@ export function Loader({message = 'Loading...', showLogo = true}: LoaderProps) {
     document.cookie.split(';').forEach(c => {
       document.cookie = c.replace(/^ +/, '').replace(/=.*/, '=;expires=' + new Date().toUTCString() + ';path=/');
     });
-
     localStorage.clear();
     sessionStorage.clear();
-
     void router.push('/auth/login');
   };
 
   return (
     <div className="h-screen flex items-center justify-center bg-white">
-      <div className="text-center animate-in fade-in duration-500">
+      <div className="flex flex-col items-center gap-6 animate-in fade-in duration-500">
         {showLogo && (
-          <div className="mb-8 animate-in zoom-in-95 duration-700">
+          <Image src="/assets/logo.png" alt="Plunk" width={40} height={40} className="rounded-lg" priority />
-            <div className="relative w-20 h-20 mx-auto p-4 bg-white rounded-2xl shadow-sm border border-neutral-200/50">
-              <Image src="/assets/logo.png" alt="Plunk" width={48} height={48} className="rounded-lg" priority />
-            </div>
-          </div>
         )}
 
-        {/* Animated spinner */}
+        <IconSpinner />
-        <div className="relative w-16 h-16 mx-auto mb-6">
-          {/* Outer glow effect */}
-          <div className="absolute inset-0 rounded-full bg-neutral-900/10 blur-xl animate-pulse" />
 
-          {/* Base circle */}
+        {message && <p className="text-xs text-neutral-400">{message}</p>}
-          <div className="absolute inset-0 rounded-full border-[3px] border-neutral-100" />
 
-          {/* Primary animated ring */}
-          <div
-            className="absolute inset-0 rounded-full border-[3px] border-transparent border-t-neutral-900 border-r-neutral-700 animate-spin"
-            style={{animationDuration: '0.8s'}}
-          />
-
-          {/* Secondary animated ring (counter-rotating) */}
-          <div
-            className="absolute inset-2 rounded-full border-[3px] border-transparent border-b-neutral-800 border-l-neutral-600 animate-spin"
-            style={{animationDuration: '1.2s', animationDirection: 'reverse'}}
-          />
-
-          {/* Center dot */}
-          <div className="absolute inset-0 flex items-center justify-center">
-            <div className="w-2.5 h-2.5 bg-neutral-900 rounded-full animate-pulse shadow-lg" />
-          </div>
-        </div>
-
-        {/* Loading message */}
-        {message && <p className="text-sm font-medium text-neutral-700 animate-in fade-in duration-1000">{message}</p>}
-
-        {/* Clear cache button - appears after 5 seconds */}
         {showClearCache && (
-          <div className="mt-6 animate-in fade-in slide-in-from-bottom-2 duration-500">
+          <div className="animate-in fade-in slide-in-from-bottom-1 duration-500 text-center">
-            <p className="text-xs text-neutral-500 mb-3">Taking too long?</p>
+            <p className="text-xs text-neutral-400 mb-2">Taking too long?</p>
             <button
               onClick={handleClearCache}
-              className="px-4 py-2 text-sm font-medium text-neutral-700 bg-neutral-100 hover:bg-neutral-200 rounded-lg transition-colors duration-200"
+              className="text-xs text-neutral-500 hover:text-neutral-800 underline underline-offset-2 transition-colors duration-150"
             >
               Clear cache and reload
             </button>