src/pages/Manga.tsx

@@ -35,6 +35,7 @@ import { useUIState } from "@/contexts/UIStateContext.tsx";
 import { MangaChapter } from "@/features/manga/MangaChapter.tsx";
 import { useScrollPersistence } from "@/hooks/useScrollPersistence.ts";
 import { formatToTwoDigitsDateRange } from "@/utils/dateFormatter.ts";
+import { Skeleton } from "@/components/ui/skeleton";
 
 const Manga = () => {
 	const { isAuthenticated } = useAuth();
@@ -44,7 +45,7 @@ const Manga = () => {
 
 	const queryClient = useQueryClient();
 
-	const { data: mangaData, queryKey } = useGetManga(mangaId);
+	const { data: mangaData, queryKey, isLoading } = useGetManga(mangaId);
 
 	const { mutate, isPending: fetchPending } =
 		useFetchContentProviderContentList({
@@ -122,7 +123,85 @@ const Manga = () => {
 		[mangaData?.data?.id, mutateUnfollow, mutateFollow],
 	);
 
-	if (!mangaData) {
+	if (isLoading) {
+		return (
+			<div className="min-h-screen bg-background">
+				{/* Header */}
+				<header className="border-b border-border bg-background/95 backdrop-blur supports-backdrop-filter:bg-background/60">
+					<div className="px-8 py-6">
+						<div className="flex items-center justify-between">
+							<div className="flex items-center gap-6">
+								<Button
+									variant="ghost"
+									onClick={() => navigate("/")}
+									className="gap-2"
+								>
+									<ArrowLeft className="h-4 w-4" />
+									Back to Library
+								</Button>
+								<h1 className="text-xl font-bold text-foreground">MangaMochi</h1>
+							</div>
+							<ThemeToggle />
+						</div>
+					</div>
+				</header>
+
+				{/* Content Shell */}
+				<main className="px-8 py-8">
+					<div className="mx-auto max-w-7xl">
+						<div className="grid gap-8 lg:grid-cols-[300px_1fr]">
+							{/* Cover Skeleton */}
+							<Skeleton className="aspect-2/3 w-full rounded-lg lg:sticky lg:top-8" />
+
+							{/* Details Skeleton */}
+							<div className="space-y-6">
+								<div className="space-y-3">
+									<div className="flex items-center justify-between gap-4">
+										<Skeleton className="h-10 w-2/3" />
+										<div className="flex gap-4">
+											<Skeleton className="h-6 w-20" />
+											<Skeleton className="h-10 w-10" />
+											<Skeleton className="h-10 w-10" />
+										</div>
+									</div>
+									<Skeleton className="h-6 w-1/3" />
+								</div>
+
+								<div className="space-y-2">
+									<Skeleton className="h-4 w-full" />
+									<Skeleton className="h-4 w-full" />
+									<Skeleton className="h-4 w-3/4" />
+								</div>
+
+								<div className="grid gap-4 sm:grid-cols-2">
+									{[1, 2, 3, 4].map((i) => (
+										<Skeleton key={i} className="h-20 w-full rounded-lg" />
+									))}
+								</div>
+
+								<div className="flex flex-wrap gap-2">
+									{[1, 2, 3, 4, 5].map((i) => (
+										<Skeleton key={i} className="h-6 w-16 px-3 py-1" />
+									))}
+								</div>
+							</div>
+						</div>
+
+						<div className="mt-12">
+							<Skeleton className="mb-6 h-8 w-64" />
+							<div className="space-y-4">
+								{[1, 2, 3].map((i) => (
+									<Skeleton key={i} className="h-20 w-full rounded-lg" />
+								))}
+							</div>
+						</div>
+					</div>
+				</main>
+			</div>
+		);
+	}
+
+	if (!mangaData?.data) {
 		return (
 			<div className="flex min-h-screen items-center justify-center bg-background">
 				<div className="text-center">