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

feat/loading-state #31

Merged
rov merged 8 commits from feat/loading-state into main 2026-04-05 21:28:30 -03:00
Conversation 0 Commits 8 Files Changed 12 +96 -46
3 changed files with 96 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 3db1ce9bdb - Show all commits

14
src/features/home/components/MangaCard.tsx
View File

@ -1,6 +1,6 @@
import { useQueryClient } from "@tanstack/react-query"; import { useQueryClient } from "@tanstack/react-query";
import { Calendar, Database, Heart, Star } from "lucide-react"; import { Calendar, Database, Heart, Star } from "lucide-react";
import { useCallback } from "react"; import { useCallback, useState } from "react";
import { Link } from "react-router"; import { Link } from "react-router";
import type { import type {
DefaultResponseDTOPageMangaListDTO, DefaultResponseDTOPageMangaListDTO,
@ -13,7 +13,9 @@ import {
import { Badge } from "@/components/ui/badge.tsx"; import { Badge } from "@/components/ui/badge.tsx";
import { Button } from "@/components/ui/button.tsx"; import { Button } from "@/components/ui/button.tsx";
import { Card, CardContent } from "@/components/ui/card.tsx"; import { Card, CardContent } from "@/components/ui/card.tsx";
import { Skeleton } from "@/components/ui/skeleton.tsx";
import { useAuth } from "@/contexts/AuthContext.tsx"; import { useAuth } from "@/contexts/AuthContext.tsx";
import { cn } from "@/lib/utils.ts";
import { formatToTwoDigitsDateRange } from "@/utils/dateFormatter.ts"; import { formatToTwoDigitsDateRange } from "@/utils/dateFormatter.ts";
interface MangaCardProps { interface MangaCardProps {
@ -24,6 +26,7 @@ interface MangaCardProps {
export const MangaCard = ({ manga, queryKey }: MangaCardProps) => { export const MangaCard = ({ manga, queryKey }: MangaCardProps) => {
const { isAuthenticated } = useAuth(); const { isAuthenticated } = useAuth();
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const [isImageLoading, setIsImageLoading] = useState(true);
const updateQueryData = useCallback( 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"> <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"> <CardContent className="p-0">
<div className="relative aspect-2/3 overflow-hidden bg-muted"> <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}`}> <Link to={`/manga/${manga.id}`}>
<img <img
src={ src={
@ -90,7 +96,11 @@ export const MangaCard = ({ manga, queryKey }: MangaCardProps) => {
"/placeholder.svg" "/placeholder.svg"
} }
alt={manga.title} 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"> <div className="absolute right-2 top-2">
<Badge <Badge

2
src/features/home/components/MangaGrid.tsx
View File

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

126
src/pages/Manga.tsx
View File

@ -14,7 +14,7 @@ import { useCallback } from "react";
import { useNavigate, useParams } from "react-router"; import { useNavigate, useParams } from "react-router";
import { toast } from "sonner"; import { toast } from "sonner";
import { useGetManga } from "@/api/generated/catalog/catalog.ts"; 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 { import {
useFollowManga, useFollowManga,
useSetFavorite, useSetFavorite,
@ -36,6 +36,7 @@ import { MangaChapter } from "@/features/manga/MangaChapter.tsx";
import { useScrollPersistence } from "@/hooks/useScrollPersistence.ts"; import { useScrollPersistence } from "@/hooks/useScrollPersistence.ts";
import { formatToTwoDigitsDateRange } from "@/utils/dateFormatter.ts"; import { formatToTwoDigitsDateRange } from "@/utils/dateFormatter.ts";
import { Skeleton } from "@/components/ui/skeleton"; import { Skeleton } from "@/components/ui/skeleton";
import { Spinner } from "@/components/ui/spinner";
const Manga = () => { const Manga = () => {
const { isAuthenticated } = useAuth(); const { isAuthenticated } = useAuth();
@ -253,8 +254,8 @@ const Manga = () => {
src={ src={
(mangaData.data?.coverImageKey && (mangaData.data?.coverImageKey &&
import.meta.env.VITE_OMV_BASE_URL + import.meta.env.VITE_OMV_BASE_URL +
"/" + "/" +
mangaData.data?.coverImageKey) || mangaData.data?.coverImageKey) ||
"/placeholder.svg" "/placeholder.svg"
} }
alt={mangaData.data?.title ?? ""} alt={mangaData.data?.title ?? ""}
@ -291,7 +292,13 @@ const Manga = () => {
}} }}
disabled={isPendingFollowChange} 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>
<Button <Button
size="icon" size="icon"
@ -305,13 +312,16 @@ const Manga = () => {
}} }}
disabled={isPendingFavoriteChange} disabled={isPendingFavoriteChange}
> >
<Heart {isPendingFavoriteChange ? (
className={`h-4 w-4 transition-colors ${ <Spinner />
mangaData?.data?.favorite ) : (
<Heart
className={`h-4 w-4 transition-colors ${mangaData?.data?.favorite
? "fill-red-500 text-red-500" ? "fill-red-500 text-red-500"
: "text-muted-foreground hover:text-red-500" : "text-muted-foreground hover:text-red-500"
}`} }`}
/> />
)}
</Button> </Button>
</> </>
)} )}
@ -364,7 +374,7 @@ const Manga = () => {
<p className="text-sm text-muted-foreground">Chapters</p> <p className="text-sm text-muted-foreground">Chapters</p>
<p className="text-lg font-semibold text-foreground"> <p className="text-lg font-semibold text-foreground">
{mangaData.data?.chapterCount && {mangaData.data?.chapterCount &&
mangaData.data?.chapterCount > 0 mangaData.data?.chapterCount > 0
? mangaData.data?.chapterCount ? mangaData.data?.chapterCount
: "-"} : "-"}
</p> </p>
@ -428,11 +438,18 @@ const Manga = () => {
<Card key={provider.id} className="border-border bg-card"> <Card key={provider.id} className="border-border bg-card">
<Collapsible <Collapsible
open={expandedProviderIds.includes(provider.id ?? -1)} 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">
<CardContent className="flex items-center justify-between p-4"> <CollapsibleTrigger
<div className="flex items-center justify-between w-full"> 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"> <div className="flex items-center gap-4">
<Database className="h-5 w-5 text-primary" /> <Database className="h-5 w-5 text-primary" />
<div className="text-left"> <div className="text-left">
@ -445,48 +462,71 @@ const Manga = () => {
</p> </p>
</div> </div>
</div> </div>
{provider.supportsChapterFetch && provider.active && ( </div>
<div className={"flex gap-4 pr-4"}> </CollapsibleTrigger>
<Button
size="sm" {provider.supportsChapterFetch && provider.active && (
variant="outline" <div className="flex gap-4 px-4">
disabled={(isPending || fetchAllPending) && provider.chaptersAvailable > 0} {provider.chaptersAvailable > 0 && (
onClick={() => <Button
fetchAllMutate({ size="sm"
mangaContentProviderId: provider.id?? -1, variant="outline"
}) disabled={isPending || fetchAllPending}
} onClick={(e) => {
className="gap-2" e.stopPropagation();
> fetchAllMutate({
<Database className="h-4 w-4" /> mangaContentProviderId: provider.id ?? -1,
Fetch all from Provider });
</Button> }}
className="gap-2"
>
{fetchAllPending ? (
<Spinner />
) : (
<Database className="h-4 w-4" />
)}
Fetch all from Provider
</Button>
)}
<Button <Button
size="sm" size="sm"
variant="outline" variant="outline"
disabled={isPending || fetchAllPending} disabled={isPending || fetchAllPending}
onClick={() => onClick={(e) => {
e.stopPropagation();
mutate({ mutate({
mangaContentProviderId: provider.id ?? -1, mangaContentProviderId: provider.id ?? -1,
}) });
} }}
className="gap-2" className="gap-2"
> >
<Database className="h-4 w-4" /> {isPending ? (
<Spinner />
) : (
<Database className="h-4 w-4" />
)}
Fetch list from Provider Fetch list from Provider
</Button> </Button>
</div> </div>
)} )}
</div>
<ChevronDown <CollapsibleTrigger asChild>
className={`h-5 w-5 text-muted-foreground transition-transform ${ <div
expandedProviderIds.includes(provider.id ?? -1) className={
provider.chaptersAvailable > 0
? "cursor-pointer"
: "invisible"
}
>
<ChevronDown
className={`h-5 w-5 text-muted-foreground transition-transform ${expandedProviderIds.includes(provider.id ?? -1)
? "rotate-180" ? "rotate-180"
: "" : ""
}`} }`}
/> />
</CardContent> </div>
</CollapsibleTrigger> </CollapsibleTrigger>
</CardContent>
<CollapsibleContent> <CollapsibleContent>
<MangaChapter <MangaChapter
mangaId={mangaId} mangaId={mangaId}