src/features/home/components/MangaCard.tsx

@@ -1,6 +1,6 @@
 import { useQueryClient } from "@tanstack/react-query";
 import { Calendar, Database, Heart, Star } from "lucide-react";
-import { useCallback } from "react";
+import { useCallback, useState } from "react";
 import { Link } from "react-router";
 import type {
 	DefaultResponseDTOPageMangaListDTO,
@@ -13,7 +13,9 @@ import {
 import { Badge } from "@/components/ui/badge.tsx";
 import { Button } from "@/components/ui/button.tsx";
 import { Card, CardContent } from "@/components/ui/card.tsx";
+import { Skeleton } from "@/components/ui/skeleton.tsx";
 import { useAuth } from "@/contexts/AuthContext.tsx";
+import { cn } from "@/lib/utils.ts";
 import { formatToTwoDigitsDateRange } from "@/utils/dateFormatter.ts";
 
 interface MangaCardProps {
@@ -24,6 +26,7 @@ interface MangaCardProps {
 export const MangaCard = ({ manga, queryKey }: MangaCardProps) => {
 	const { isAuthenticated } = useAuth();
 	const queryClient = useQueryClient();
+	const [isImageLoading, setIsImageLoading] = useState(true);
 
 	const updateQueryData = useCallback(
 		(
@@ -80,6 +83,9 @@ export const MangaCard = ({ manga, queryKey }: MangaCardProps) => {
 		<Card className="h-full group overflow-hidden border-border bg-card py-0 gap-0 transition-all hover:border-primary/50 hover:shadow-lg hover:shadow-primary/10 cursor-pointer relative">
 			<CardContent className="p-0">
 				<div className="relative aspect-2/3 overflow-hidden bg-muted">
+					{isImageLoading && (
+						<Skeleton className="absolute inset-0 z-10 h-full w-full" />
+					)}
 					<Link to={`/manga/${manga.id}`}>
 						<img
 							src={
@@ -90,7 +96,11 @@ export const MangaCard = ({ manga, queryKey }: MangaCardProps) => {
 								"/placeholder.svg"
 							}
 							alt={manga.title}
-							className="absolute inset-0 w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
+							onLoad={() => setIsImageLoading(false)}
+							className={cn(
+								"absolute inset-0 h-full w-full object-cover transition-all duration-300 group-hover:scale-105",
+								isImageLoading ? "opacity-0" : "opacity-100",
+							)}
 						/>
 						<div className="absolute right-2 top-2">
 							<Badge

src/features/home/components/MangaGrid.tsx

@@ -3,7 +3,7 @@ import { MangaCard } from "@/features/home/components/MangaCard.tsx";
 
 interface MangaGridProps {
 	manga: MangaListDTO[];
-	queryKey: unknown;
+	queryKey: readonly unknown[];
 }
 
 export const MangaGrid = ({ manga, queryKey }: MangaGridProps) => {

src/pages/Manga.tsx

@@ -14,7 +14,7 @@ import { useCallback } from "react";
 import { useNavigate, useParams } from "react-router";
 import { toast } from "sonner";
 import { useGetManga } from "@/api/generated/catalog/catalog.ts";
-import {useFetchAllContentImages, useFetchContentProviderContentList} from "@/api/generated/ingestion/ingestion.ts";
+import { useFetchAllContentImages, useFetchContentProviderContentList } from "@/api/generated/ingestion/ingestion.ts";
 import {
 	useFollowManga,
 	useSetFavorite,
@@ -36,6 +36,7 @@ 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";
+import { Spinner } from "@/components/ui/spinner";
 
 const Manga = () => {
 	const { isAuthenticated } = useAuth();
@@ -291,7 +292,13 @@ const Manga = () => {
 													}}
 													disabled={isPendingFollowChange}
 												>
-													{mangaData?.data?.following ? <BellOff /> : <Bell />}
+													{isPendingFollowChange ? (
+														<Spinner />
+													) : mangaData?.data?.following ? (
+														<BellOff className="h-4 w-4" />
+													) : (
+														<Bell className="h-4 w-4" />
+													)}
 												</Button>
 												<Button
 													size="icon"
@@ -305,13 +312,16 @@ const Manga = () => {
 													}}
 													disabled={isPendingFavoriteChange}
 												>
+													{isPendingFavoriteChange ? (
+														<Spinner />
+													) : (
 														<Heart
-														className={`h-4 w-4 transition-colors ${
-															mangaData?.data?.favorite
+															className={`h-4 w-4 transition-colors ${mangaData?.data?.favorite
 																? "fill-red-500 text-red-500"
 																: "text-muted-foreground hover:text-red-500"
 																}`}
 														/>
+													)}
 												</Button>
 											</>
 										)}
@@ -428,11 +438,18 @@ const Manga = () => {
 								<Card key={provider.id} className="border-border bg-card">
 									<Collapsible
 										open={expandedProviderIds.includes(provider.id ?? -1)}
-										onOpenChange={() => toggleProvider(provider.id ?? -1)}
+										onOpenChange={() => {
+											if (provider.chaptersAvailable > 0) {
+												toggleProvider(provider.id ?? -1);
+											}
+										}}
 									>
-										<CollapsibleTrigger className="w-full">
 										<CardContent className="flex items-center justify-between p-4">
-												<div className="flex items-center justify-between w-full">
+											<CollapsibleTrigger
+												asChild
+												className={`flex-1 ${provider.chaptersAvailable > 0 ? "cursor-pointer" : "cursor-default"}`}
+											>
+												<div className="flex items-center justify-between">
 													<div className="flex items-center gap-4">
 														<Database className="h-5 w-5 text-primary" />
 														<div className="text-left">
@@ -445,48 +462,71 @@ const Manga = () => {
 															</p>
 														</div>
 													</div>
+												</div>
+											</CollapsibleTrigger>
+
 											{provider.supportsChapterFetch && provider.active && (
-														<div className={"flex gap-4 pr-4"}>
-															<Button
-																size="sm"
-																variant="outline"
-																disabled={(isPending || fetchAllPending) && provider.chaptersAvailable > 0}
-																onClick={() =>
-																	fetchAllMutate({
-																		mangaContentProviderId: provider.id?? -1,
-																	})
-																}
-																className="gap-2"
-															>
-																<Database className="h-4 w-4" />
-																Fetch all from Provider
-															</Button>
+														<div className="flex gap-4 px-4">
+															{provider.chaptersAvailable > 0 && (
 																<Button
 																	size="sm"
 																	variant="outline"
 																	disabled={isPending || fetchAllPending}
-																onClick={() =>
-																	mutate({
+																	onClick={(e) => {
+																		e.stopPropagation();
+																		fetchAllMutate({
 																			mangaContentProviderId: provider.id ?? -1,
-																	})
-																}
+																		});
+																	}}
 																	className="gap-2"
 																>
+																	{fetchAllPending ? (
+																		<Spinner />
+																	) : (
 																		<Database className="h-4 w-4" />
+																	)}
+																	Fetch all from Provider
+																</Button>
+															)}
+															<Button
+																size="sm"
+																variant="outline"
+																disabled={isPending || fetchAllPending}
+																onClick={(e) => {
+																	e.stopPropagation();
+																	mutate({
+																		mangaContentProviderId: provider.id ?? -1,
+																	});
+																}}
+																className="gap-2"
+															>
+																{isPending ? (
+																	<Spinner />
+																) : (
+																	<Database className="h-4 w-4" />
+																)}
 																Fetch list from Provider
 															</Button>
 														</div>
 											)}
-												</div>
+
+											<CollapsibleTrigger asChild>
+												<div
+													className={
+														provider.chaptersAvailable > 0
+															? "cursor-pointer"
+															: "invisible"
+													}
+												>
 													<ChevronDown
-													className={`h-5 w-5 text-muted-foreground transition-transform ${
-														expandedProviderIds.includes(provider.id ?? -1)
+														className={`h-5 w-5 text-muted-foreground transition-transform ${expandedProviderIds.includes(provider.id ?? -1)
 															? "rotate-180"
 															: ""
 															}`}
 													/>
-											</CardContent>
+												</div>
 											</CollapsibleTrigger>
+										</CardContent>
 										<CollapsibleContent>
 											<MangaChapter
 												mangaId={mangaId}