mangamochi/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add loading skeleton state to Manga page

Browse Source
This commit is contained in:
Rodrigo Verdiani 2026-04-05 20:56:35 -03:00
parent 7dab8ec21c
commit 4c73722f9a
1 changed files with 81 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
src/pages/Manga.tsx
View File

@ -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">