From a7058346a5481a5f370c21af5fd9718ef30b6bf6 Mon Sep 17 00:00:00 2001
From: Rodrigo Verdiani <rocverdiani@gmail.com>
Date: Fri, 10 Apr 2026 10:13:49 -0300
Subject: [PATCH 1/3] feat: add support for content fetch in provider manager
 and display update button conditionally

---
 src/api/generated/api.schemas.ts              |  5 +-
 .../admin/components/ProviderManager.tsx      | 61 ++++++++++++-------
 2 files changed, 42 insertions(+), 24 deletions(-)

diff --git a/src/api/generated/api.schemas.ts b/src/api/generated/api.schemas.ts
index 8ef277f..72312cc 100644
--- a/src/api/generated/api.schemas.ts
+++ b/src/api/generated/api.schemas.ts
@@ -117,6 +117,7 @@ export interface ContentProviderDTO {
   name: string;
   url?: string;
   active?: boolean;
+  supportsContentFetch?: boolean;
 }
 
 export interface ContentProviderListDTO {
@@ -214,9 +215,9 @@ export interface PageMangaImportJobDTO {
   number?: number;
   pageable?: PageableObject;
   numberOfElements?: number;
+  sort?: SortObject;
   first?: boolean;
   last?: boolean;
-  sort?: SortObject;
   empty?: boolean;
 }
 
@@ -277,9 +278,9 @@ export interface PageMangaListDTO {
   number?: number;
   pageable?: PageableObject;
   numberOfElements?: number;
+  sort?: SortObject;
   first?: boolean;
   last?: boolean;
-  sort?: SortObject;
   empty?: boolean;
 }
 
diff --git a/src/features/admin/components/ProviderManager.tsx b/src/features/admin/components/ProviderManager.tsx
index 19fed53..d533001 100644
--- a/src/features/admin/components/ProviderManager.tsx
+++ b/src/features/admin/components/ProviderManager.tsx
@@ -7,6 +7,7 @@ import {
 import { Badge } from "@/components/ui/badge.tsx";
 import { Button } from "@/components/ui/button.tsx";
 import { Card } from "@/components/ui/card.tsx";
+import {toast} from "sonner";
 
 export const ProviderManager = () => {
 	const { data } = useGetContentProviders();
@@ -15,12 +16,26 @@ export const ProviderManager = () => {
 	const {
 		mutate: mutateFetchContentProviderMangas,
 		isPending: isPendingFetchContentProviderMangas,
-	} = useFetchContentProviderMangas();
+	} = useFetchContentProviderMangas({
+		mutation: {
+			onSuccess: () => {
+				toast.success("Content Provider mangas update queued successfully!");
+			},
+		},
+	});
 
 	const {
 		mutate: mutateFetchAllContentProviderMangas,
 		isPending: isPendingFetchAllContentProviderMangas,
-	} = useFetchAllContentProviderMangas();
+	} = useFetchAllContentProviderMangas(
+		{
+			mutation: {
+				onSuccess: () => {
+					toast.success("All Content Provider mangas update queued successfully!");
+				},
+			},
+		}
+	);
 
 	const activeCount = providers?.filter((p) => p.active).length;
 
@@ -104,26 +119,28 @@ export const ProviderManager = () => {
 									</p>
 								</div>
 
-								<Button
-									variant="outline"
-									size="sm"
-									onClick={() =>
-										mutateFetchContentProviderMangas({
-											providerId: provider?.id ?? -1,
-										})
-									}
-									disabled={
-										!provider.active || isPendingFetchContentProviderMangas
-									}
-									className="gap-2 shrink-0"
-								>
-									{isPendingFetchContentProviderMangas ? (
-										<Loader2 className="h-3 w-3 animate-spin" />
-									) : (
-										<RefreshCw className="h-3 w-3" />
-									)}
-									Update
-								</Button>
+								{provider.supportsContentFetch && (
+									<Button
+										variant="outline"
+										size="sm"
+										onClick={() =>
+											mutateFetchContentProviderMangas({
+												providerId: provider?.id ?? -1,
+											})
+										}
+										disabled={
+											!provider.active || isPendingFetchContentProviderMangas
+										}
+										className="gap-2 shrink-0"
+									>
+										{isPendingFetchContentProviderMangas ? (
+											<Loader2 className="h-3 w-3 animate-spin" />
+										) : (
+											<RefreshCw className="h-3 w-3" />
+										)}
+										Update
+									</Button>
+								)}
 							</div>
 						</Card>
 					);
-- 
2.49.1


From 9f1dddb057b92cfb822177c139a138eb54253a92 Mon Sep 17 00:00:00 2001
From: Rodrigo Verdiani <rocverdiani@gmail.com>
Date: Fri, 10 Apr 2026 10:53:42 -0300
Subject: [PATCH 2/3] feat: add loading states with skeletons and spinners in
 admin components

---
 .../admin/components/FailedImportJobs.tsx     | 56 +++++++++++++------
 .../admin/components/IngestReview.tsx         | 53 +++++++++++++++++-
 src/pages/Admin.tsx                           | 48 ++++++++++++++++
 src/pages/Manga.tsx                           | 26 +++++----
 4 files changed, 152 insertions(+), 31 deletions(-)

diff --git a/src/features/admin/components/FailedImportJobs.tsx b/src/features/admin/components/FailedImportJobs.tsx
index d7714a3..ee0732b 100644
--- a/src/features/admin/components/FailedImportJobs.tsx
+++ b/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>
 					)}
diff --git a/src/features/admin/components/IngestReview.tsx b/src/features/admin/components/IngestReview.tsx
index ad66fd4..197fef6 100644
--- a/src/features/admin/components/IngestReview.tsx
+++ b/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>
diff --git a/src/pages/Admin.tsx b/src/pages/Admin.tsx
index 8b8f74e..d421e17 100644
--- a/src/pages/Admin.tsx
+++ b/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">
diff --git a/src/pages/Manga.tsx b/src/pages/Manga.tsx
index 976b24c..ee154c7 100644
--- a/src/pages/Manga.tsx
+++ b/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">
-							<img
-								src={
-									(mangaData.data?.coverImageKey &&
-										import.meta.env.VITE_OMV_BASE_URL +
-										"/" +
-										mangaData.data?.coverImageKey) ||
-									"/placeholder.svg"
-								}
-								alt={mangaData.data?.title ?? ""}
-								className="absolute inset-0 w-full h-full object-cover"
-							/>
+						<div className="lg:sticky lg:top-24">
+							<div className="relative aspect-2/3 overflow-hidden rounded-lg border border-border bg-muted">
+								<img
+									src={
+										(mangaData.data?.coverImageKey &&
+											import.meta.env.VITE_OMV_BASE_URL +
+											"/" +
+											mangaData.data?.coverImageKey) ||
+										"/placeholder.svg"
+									}
+									alt={mangaData.data?.title ?? ""}
+									className="absolute inset-0 w-full h-full object-cover"
+								/>
+							</div>
 						</div>
 
 						{/* Details */}
-- 
2.49.1


From 45705c62cf4dbb9c859d814cafcfdc08d88d340a Mon Sep 17 00:00:00 2001
From: Rodrigo Verdiani <rocverdiani@gmail.com>
Date: Fri, 10 Apr 2026 10:59:40 -0300
Subject: [PATCH 3/3] feat: enable HTML rendering for manga synopsis in Manga
 component

---
 src/pages/Manga.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/pages/Manga.tsx b/src/pages/Manga.tsx
index ee154c7..609622c 100644
--- a/src/pages/Manga.tsx
+++ b/src/pages/Manga.tsx
@@ -361,9 +361,10 @@ const Manga = () => {
 									</div>
 								)}
 
-							<p className="text-pretty text-justify leading-relaxed text-foreground">
-								{mangaData.data?.synopsis}
-							</p>
+							<p
+								className="text-pretty text-justify leading-relaxed text-foreground"
+								dangerouslySetInnerHTML={{ __html: mangaData.data?.synopsis ?? "" }}
+							/>
 
 							<div className="grid gap-4 sm:grid-cols-2">
 								<div className="flex items-center gap-3 rounded-lg border border-border bg-card p-4">
-- 
2.49.1