diff --git a/public/components/ui/skeleton.tsx b/public/components/ui/skeleton.tsx
new file mode 100644
index 0000000..cb9dcb2
--- /dev/null
+++ b/public/components/ui/skeleton.tsx
@@ -0,0 +1,31 @@
+import { cn } from '@public/lib/utils'
+
+interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+function Skeleton({ className, ...props }: SkeletonProps) {
+	return (
+		<div
+			className={cn(
+				'animate-pulse rounded-md bg-muted',
+				className
+			)}
+			{...props}
+		/>
+	)
+}
+
+interface SkeletonShimmerProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+function SkeletonShimmer({ className, ...props }: SkeletonShimmerProps) {
+	return (
+		<div
+			className={cn(
+				'relative overflow-hidden rounded-md bg-muted before:absolute before:inset-0 before:-translate-x-full before:animate-[shimmer_2s_infinite] before:bg-gradient-to-r before:from-transparent before:via-white/10 before:to-transparent',
+				className
+			)}
+			{...props}
+		/>
+	)
+}
+
+export { Skeleton, SkeletonShimmer }
diff --git a/public/editor/tabs/DomainsTab.tsx b/public/editor/tabs/DomainsTab.tsx
index 0835be4..f3b3728 100644
--- a/public/editor/tabs/DomainsTab.tsx
+++ b/public/editor/tabs/DomainsTab.tsx
@@ -10,6 +10,7 @@ import { Button } from '@public/components/ui/button'
 import { Input } from '@public/components/ui/input'
 import { Label } from '@public/components/ui/label'
 import { Badge } from '@public/components/ui/badge'
+import { SkeletonShimmer } from '@public/components/ui/skeleton'
 import {
 	Dialog,
 	DialogContent,
@@ -128,8 +129,32 @@ export function DomainsTab({
 					</CardHeader>
 					<CardContent>
 						{domainsLoading ? (
-							<div className="flex items-center justify-center py-4">
-								<Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
+							<div className="space-y-4">
+								<div className="space-y-2">
+									{[...Array(2)].map((_, i) => (
+										<div
+											key={i}
+											className="flex items-center justify-between p-3 border border-border rounded-lg"
+										>
+											<div className="flex flex-col gap-2 flex-1">
+												<div className="flex items-center gap-2">
+													<SkeletonShimmer className="h-4 w-4 rounded-full" />
+													<SkeletonShimmer className="h-4 w-40" />
+												</div>
+												<SkeletonShimmer className="h-3 w-32 ml-6" />
+											</div>
+											<SkeletonShimmer className="h-8 w-8" />
+										</div>
+									))}
+								</div>
+								<div className="p-4 bg-muted/30 rounded-lg space-y-3">
+									<SkeletonShimmer className="h-4 w-full" />
+									<div className="space-y-2">
+										<SkeletonShimmer className="h-4 w-24" />
+										<SkeletonShimmer className="h-10 w-full" />
+									</div>
+									<SkeletonShimmer className="h-10 w-full" />
+								</div>
 							</div>
 						) : (
 							<div className="space-y-4">
@@ -262,8 +287,26 @@ export function DomainsTab({
 						</Button>
 
 						{domainsLoading ? (
-							<div className="flex items-center justify-center py-4">
-								<Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
+							<div className="space-y-2">
+								{[...Array(2)].map((_, i) => (
+									<div
+										key={i}
+										className="flex items-center justify-between p-3 border border-border rounded-lg"
+									>
+										<div className="flex flex-col gap-2 flex-1">
+											<div className="flex items-center gap-2">
+												<SkeletonShimmer className="h-4 w-4 rounded-full" />
+												<SkeletonShimmer className="h-4 w-48" />
+											</div>
+											<SkeletonShimmer className="h-3 w-36 ml-6" />
+										</div>
+										<div className="flex items-center gap-2">
+											<SkeletonShimmer className="h-8 w-20" />
+											<SkeletonShimmer className="h-8 w-20" />
+											<SkeletonShimmer className="h-8 w-8" />
+										</div>
+									</div>
+								))}
 							</div>
 						) : customDomains.length === 0 ? (
 							<div className="text-center py-4 text-muted-foreground text-sm">
diff --git a/public/editor/tabs/SitesTab.tsx b/public/editor/tabs/SitesTab.tsx
index 6d5f8da..5792f04 100644
--- a/public/editor/tabs/SitesTab.tsx
+++ b/public/editor/tabs/SitesTab.tsx
@@ -7,6 +7,7 @@ import {
 } from '@public/components/ui/card'
 import { Button } from '@public/components/ui/button'
 import { Badge } from '@public/components/ui/badge'
+import { SkeletonShimmer } from '@public/components/ui/skeleton'
 import {
 	Globe,
 	ExternalLink,
@@ -84,8 +85,22 @@ export function SitesTab({
 				</CardHeader>
 				<CardContent className="space-y-4">
 					{sitesLoading ? (
-						<div className="flex items-center justify-center py-8">
-							<Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
+						<div className="space-y-4">
+							{[...Array(3)].map((_, i) => (
+								<div
+									key={i}
+									className="flex items-center justify-between p-4 border border-border rounded-lg"
+								>
+									<div className="flex-1 space-y-3">
+										<div className="flex items-center gap-3">
+											<SkeletonShimmer className="h-6 w-48" />
+											<SkeletonShimmer className="h-5 w-16" />
+										</div>
+										<SkeletonShimmer className="h-4 w-64" />
+									</div>
+									<SkeletonShimmer className="h-9 w-28" />
+								</div>
+							))}
 						</div>
 					) : sites.length === 0 ? (
 						<div className="text-center py-8 text-muted-foreground">
diff --git a/public/styles/global.css b/public/styles/global.css
index a3a3819..519b994 100644
--- a/public/styles/global.css
+++ b/public/styles/global.css
@@ -178,6 +178,12 @@
   animation: arrow-bounce 1.5s ease-in-out infinite;
 }
 
+@keyframes shimmer {
+  100% {
+    transform: translateX(100%);
+  }
+}
+
 /* Shiki syntax highlighting styles */
 .shiki-wrapper {
   border-radius: 0.5rem;