src/features/admin/components/FailedImportJobs.tsx

@@ -18,6 +18,8 @@ import {
 	DialogTitle,
 } from "@/components/ui/dialog.tsx";
 import { Input } from "@/components/ui/input.tsx";
+import { Skeleton } from "@/components/ui/skeleton.tsx";
+import { Spinner } from "@/components/ui/spinner.tsx";
 import {
 	Select,
 	SelectContent,
@@ -46,7 +48,7 @@ export const FailedImportJobs = () => {
 	const [errorDialogOpen, setErrorDialogOpen] = useState(false);
 	const [currentPage, setCurrentPage] = useState(1);
 
-	const { data } = useGetMangaImportJobs({
+	const { data, isPending } = useGetMangaImportJobs({
 		status: statusFilter,
 		searchQuery: searchQuery,
 		page: currentPage - 1,
@@ -54,6 +56,41 @@ export const FailedImportJobs = () => {
 	});
 	const importJobsData = data?.data;
 
+	if (isPending) {
+		return (
+			<div className="space-y-5">
+				<div>
+					<Skeleton className="h-7 w-52" />
+					<Skeleton className="mt-2 h-4 w-72" />
+				</div>
+
+				<div className="grid grid-cols-2 gap-4 sm:grid-cols-5">
+					{Array.from({ length: 5 }).map((_, i) => (
+						<Card key={i} className="p-4">
+							<Skeleton className="h-4 w-20" />
+							<Skeleton className="mt-2 h-8 w-16" />
+						</Card>
+					))}
+				</div>
+
+				<div className="flex flex-wrap items-center gap-4">
+					<div className="relative flex-1 min-w-[200px]">
+						<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+						<Skeleton className="h-10 w-full pl-10" />
+					</div>
+					<Skeleton className="h-10 w-[150px]" />
+				</div>
+
+				<Card>
+					<div className="p-6 flex flex-col items-center justify-center">
+						<Spinner className="size-12 text-primary" />
+						<Skeleton className="mt-4 h-4 w-48" />
+					</div>
+				</Card>
+			</div>
+		);
+	}
+
 	const formatDate = (dateString: string) => {
 		return new Date(dateString).toLocaleString("en-US", {
 			year: "numeric",
@@ -328,23 +365,6 @@ export const FailedImportJobs = () => {
 								>
 									Close
 								</Button>
-								{/*<Button*/}
-								{/*    variant="default"*/}
-								{/*    onClick={() => {*/}
-								{/*        // Mock retry action*/}
-								{/*        setJobs((prev) =>*/}
-								{/*            prev.map((j) =>*/}
-								{/*                j.id === selectedJob.id*/}
-								{/*                    ? { ...j, status: "PENDING" as ImportStatus, updatedAt: new Date().toISOString() }*/}
-								{/*                    : j*/}
-								{/*            )*/}
-								{/*        )*/}
-								{/*        setErrorDialogOpen(false)*/}
-								{/*    }}*/}
-								{/*>*/}
-								{/*    <RefreshCw className="mr-2 h-4 w-4" />*/}
-								{/*    Retry Import*/}
-								{/*</Button>*/}
 							</div>
 						</div>
 					)}

src/features/admin/components/IngestReview.tsx

@@ -2,9 +2,60 @@ import {Card} from "@/components/ui/card.tsx";
 import {AlertCircle} from "lucide-react";
 import {useGetMangaIngestReviews} from "@/api/generated/manga-ingest-review/manga-ingest-review.ts";
 import {ImportReviewCard} from "@/features/admin/components/ImportReviewCard.tsx";
+import {Skeleton} from "@/components/ui/skeleton.tsx";
+import {Spinner} from "@/components/ui/spinner.tsx";
 
 export const IngestReview = () => {
-    const { data: importReviewData, queryKey } = useGetMangaIngestReviews();
+    const { data: importReviewData, queryKey, isPending } = useGetMangaIngestReviews();
+
+    if (isPending) {
+        return (
+            <div className="space-y-6">
+                <div>
+                    <Skeleton className="h-7 w-40" />
+                    <Skeleton className="mt-2 h-4 w-72" />
+                </div>
+
+                <div className="flex flex-col items-center justify-center py-12">
+                    <Spinner className="size-12 text-primary" />
+                    <Skeleton className="mt-4 h-4 w-48" />
+                </div>
+
+                {Array.from({ length: 2 }).map((_, i) => (
+                    <Card key={i} className="p-4">
+                        <div className="space-y-4">
+                            <div className="flex items-start justify-between">
+                                <div className="flex-1 space-y-2">
+                                    <Skeleton className="h-5 w-48" />
+                                    <Skeleton className="h-4 w-32" />
+                                </div>
+                            </div>
+
+                            <Skeleton className="h-16 w-full rounded-md" />
+
+                            <div className="space-y-3">
+                                <div className="flex flex-row gap-4 w-full">
+                                    <div className="w-full space-y-2">
+                                        <Skeleton className="h-4 w-32" />
+                                        <Skeleton className="h-10 w-full" />
+                                    </div>
+                                    <div className="w-full space-y-2">
+                                        <Skeleton className="h-4 w-32" />
+                                        <Skeleton className="h-10 w-full" />
+                                    </div>
+                                </div>
+
+                                <div className="flex gap-2">
+                                    <Skeleton className="h-10 flex-1" />
+                                    <Skeleton className="h-10 w-10" />
+                                </div>
+                            </div>
+                        </div>
+                    </Card>
+                ))}
+            </div>
+        );
+    }
 
     return (<div className="space-y-6">
         <div>

src/pages/Admin.tsx

@@ -2,6 +2,8 @@ import {AlertCircle, ArrowLeft, Download, FileStack, Server, Shield} from "lucid
 import { type ReactNode, useEffect, useState } from "react";
 import { useNavigate } from "react-router";
 import { Button } from "@/components/ui/button.tsx";
+import { Skeleton } from "@/components/ui/skeleton.tsx";
+import { Spinner } from "@/components/ui/spinner.tsx";
 import { useAuth } from "@/contexts/AuthContext.tsx";
 import { FailedImportJobs } from "@/features/admin/components/FailedImportJobs.tsx";
 import { ProviderManager } from "@/features/admin/components/ProviderManager.tsx";
@@ -70,6 +72,52 @@ const Admin = () => {
 		// },
 	];
 
+	if (isLoading) {
+		return (
+			<main className="min-h-screen bg-background">
+				<div className="flex">
+					<aside className="sticky top-0 h-screen w-64 shrink-0 border-r border-border bg-card">
+						<div className="flex h-full flex-col">
+							<div className="border-b border-border px-6 py-5">
+								<div className="flex items-center gap-2">
+									<Skeleton className="h-5 w-5" />
+									<Skeleton className="h-5 w-28" />
+								</div>
+								<Skeleton className="mt-2 h-3 w-40" />
+							</div>
+
+							<nav className="flex-1 space-y-1 px-3 py-4">
+								{Array.from({ length: 4 }).map((_, i) => (
+									<div
+										key={i}
+										className="flex w-full items-center gap-3 rounded-lg px-3 py-2.5"
+									>
+										<Skeleton className="h-4 w-4" />
+										<Skeleton className="h-4 w-24" />
+									</div>
+								))}
+							</nav>
+
+							<div className="border-t border-border px-3 py-4">
+								<div className="flex items-center gap-2 px-3 py-2">
+									<Skeleton className="h-4 w-4" />
+									<Skeleton className="h-4 w-20" />
+								</div>
+							</div>
+						</div>
+					</aside>
+
+					<div className="flex-1 flex items-center justify-center px-8 py-8">
+						<div className="flex flex-col items-center gap-4">
+							<Spinner className="size-12 text-primary" />
+							<Skeleton className="h-4 w-48" />
+						</div>
+					</div>
+				</div>
+			</main>
+		);
+	}
+
 	return (
 		<main className="min-h-screen bg-background">
 			<div className="flex">

src/pages/Manga.tsx

@@ -249,18 +249,20 @@ const Manga = () => {
 					{/* Manga Info Section */}
 					<div className="grid gap-8 lg:grid-cols-[300px_1fr]">
 						{/* Cover */}
-						<div className="relative aspect-2/3 overflow-hidden rounded-lg border border-border bg-muted lg:sticky lg:top-8 lg:h-fit">
+						<div className="lg:sticky lg:top-24">
-							<img
+							<div className="relative aspect-2/3 overflow-hidden rounded-lg border border-border bg-muted">
-								src={
+								<img
-									(mangaData.data?.coverImageKey &&
+									src={
-										import.meta.env.VITE_OMV_BASE_URL +
+										(mangaData.data?.coverImageKey &&
-										"/" +
+											import.meta.env.VITE_OMV_BASE_URL +
-										mangaData.data?.coverImageKey) ||
+											"/" +
-									"/placeholder.svg"
+											mangaData.data?.coverImageKey) ||
-								}
+										"/placeholder.svg"
-								alt={mangaData.data?.title ?? ""}
+									}
-								className="absolute inset-0 w-full h-full object-cover"
+									alt={mangaData.data?.title ?? ""}
-							/>
+									className="absolute inset-0 w-full h-full object-cover"
+								/>
+							</div>
 						</div>
 
 						{/* Details */}