julienfroidefond/stripstream
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: remove loading state management and indicators from PaginatedSeriesGrid and PaginatedBookGrid components for cleaner UI

Browse Source
This commit is contained in:
Julien Froidefond
2025-10-17 11:13:22 +02:00
parent faca1cdce6
commit e90ceefc60
2 changed files with 2 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/library/PaginatedSeriesGrid.tsx
View File

@@ -4,8 +4,6 @@ import { SeriesGrid } from "./SeriesGrid";
import { Pagination } from "@/components/ui/Pagination"; import { Pagination } from "@/components/ui/Pagination";
import { useRouter, usePathname, useSearchParams } from "next/navigation"; import { useRouter, usePathname, useSearchParams } from "next/navigation";
import { useState, useEffect, useCallback } from "react"; import { useState, useEffect, useCallback } from "react";
import { Loader2 } from "lucide-react";
import { cn } from "@/lib/utils";
import type { KomgaSeries } from "@/types/komga"; import type { KomgaSeries } from "@/types/komga";
import { SearchInput } from "./SearchInput"; import { SearchInput } from "./SearchInput";
import { useTranslate } from "@/hooks/useTranslate"; import { useTranslate } from "@/hooks/useTranslate";
@@ -34,7 +32,6 @@ export function PaginatedSeriesGrid({
const router = useRouter(); const router = useRouter();
const pathname = usePathname(); const pathname = usePathname();
const searchParams = useSearchParams(); const searchParams = useSearchParams();
const [isChangingPage, setIsChangingPage] = useState(false);
const [showOnlyUnread, setShowOnlyUnread] = useState(initialShowOnlyUnread); const [showOnlyUnread, setShowOnlyUnread] = useState(initialShowOnlyUnread);
const { isCompact, itemsPerPage: _itemsPerPage } = useDisplayPreferences(); const { isCompact, itemsPerPage: _itemsPerPage } = useDisplayPreferences();
const { t } = useTranslate(); const { t } = useTranslate();
@@ -43,7 +40,6 @@ export function PaginatedSeriesGrid({
updates: Record<string, string | null>, updates: Record<string, string | null>,
replace: boolean = false replace: boolean = false
) => { ) => {
setIsChangingPage(true);
const params = new URLSearchParams(searchParams.toString()); const params = new URLSearchParams(searchParams.toString());
Object.entries(updates).forEach(([key, value]) => { Object.entries(updates).forEach(([key, value]) => {
@@ -61,11 +57,6 @@ export function PaginatedSeriesGrid({
} }
}, [router, pathname, searchParams]); }, [router, pathname, searchParams]);
// Reset loading state when series change
useEffect(() => {
setIsChangingPage(false);
}, [series]);
// Update local state when prop changes // Update local state when prop changes
useEffect(() => { useEffect(() => {
setShowOnlyUnread(initialShowOnlyUnread); setShowOnlyUnread(initialShowOnlyUnread);
@@ -120,27 +111,7 @@ export function PaginatedSeriesGrid({
</div> </div>
</div> </div>
<div className="relative">
{/* Loading indicator */}
{isChangingPage && (
<div className="absolute inset-0 flex items-center justify-center bg-background/50 backdrop-blur-sm z-10">
<div className="flex items-center gap-2 px-4 py-2 rounded-full bg-background/70 backdrop-blur-md border shadow-sm">
<Loader2 className="h-4 w-4 animate-spin" />
<span className="text-sm">{t("sidebar.libraries.loading")}</span>
</div>
</div>
)}
{/* Grid with transition animation */}
<div
className={cn(
"transition-opacity duration-200",
isChangingPage ? "opacity-25" : "opacity-100"
)}
>
<SeriesGrid series={series} isCompact={isCompact} /> <SeriesGrid series={series} isCompact={isCompact} />
</div>
</div>
<div className="flex flex-col items-center gap-4 sm:flex-row sm:justify-between"> <div className="flex flex-col items-center gap-4 sm:flex-row sm:justify-between">
<p className="text-sm text-muted-foreground order-2 sm:order-1"> <p className="text-sm text-muted-foreground order-2 sm:order-1">

29
src/components/series/PaginatedBookGrid.tsx
View File

@@ -4,8 +4,6 @@ import { BookGrid } from "./BookGrid";
import { Pagination } from "@/components/ui/Pagination"; import { Pagination } from "@/components/ui/Pagination";
import { useRouter, usePathname, useSearchParams } from "next/navigation"; import { useRouter, usePathname, useSearchParams } from "next/navigation";
import { useState, useEffect, useCallback } from "react"; import { useState, useEffect, useCallback } from "react";
import { Loader2 } from "lucide-react";
import { cn } from "@/lib/utils";
import type { KomgaBook } from "@/types/komga"; import type { KomgaBook } from "@/types/komga";
import { useTranslate } from "@/hooks/useTranslate"; import { useTranslate } from "@/hooks/useTranslate";
import { useDisplayPreferences } from "@/hooks/useDisplayPreferences"; import { useDisplayPreferences } from "@/hooks/useDisplayPreferences";
@@ -33,7 +31,6 @@ export function PaginatedBookGrid({
const router = useRouter(); const router = useRouter();
const pathname = usePathname(); const pathname = usePathname();
const searchParams = useSearchParams(); const searchParams = useSearchParams();
const [isChangingPage, setIsChangingPage] = useState(false);
const [showOnlyUnread, setShowOnlyUnread] = useState(initialShowOnlyUnread); const [showOnlyUnread, setShowOnlyUnread] = useState(initialShowOnlyUnread);
const { isCompact, itemsPerPage } = useDisplayPreferences(); const { isCompact, itemsPerPage } = useDisplayPreferences();
const { t } = useTranslate(); const { t } = useTranslate();
@@ -42,7 +39,6 @@ export function PaginatedBookGrid({
updates: Record<string, string | null>, updates: Record<string, string | null>,
replace: boolean = false replace: boolean = false
) => { ) => {
setIsChangingPage(true);
const params = new URLSearchParams(searchParams.toString()); const params = new URLSearchParams(searchParams.toString());
Object.entries(updates).forEach(([key, value]) => { Object.entries(updates).forEach(([key, value]) => {
@@ -60,11 +56,6 @@ export function PaginatedBookGrid({
} }
}, [router, pathname, searchParams]); }, [router, pathname, searchParams]);
// Reset loading state when books change
useEffect(() => {
setIsChangingPage(false);
}, [books]);
// Update local state when prop changes // Update local state when prop changes
useEffect(() => { useEffect(() => {
setShowOnlyUnread(initialShowOnlyUnread); setShowOnlyUnread(initialShowOnlyUnread);
@@ -133,27 +124,7 @@ export function PaginatedBookGrid({
</div> </div>
</div> </div>
<div className="relative">
{/* Loading indicator */}
{isChangingPage && (
<div className="absolute inset-0 flex items-center justify-center bg-background/50 backdrop-blur-sm z-10">
<div className="flex items-center gap-2 px-4 py-2 rounded-full bg-background/70 backdrop-blur-md border shadow-sm">
<Loader2 className="h-4 w-4 animate-spin" />
<span className="text-sm">{t("books.loading")}</span>
</div>
</div>
)}
{/* Grid with transition animation */}
<div
className={cn(
"transition-opacity duration-200",
isChangingPage ? "opacity-25" : "opacity-100"
)}
>
<BookGrid books={books} onBookClick={handleBookClick} isCompact={isCompact} /> <BookGrid books={books} onBookClick={handleBookClick} isCompact={isCompact} />
</div>
</div>
<div className="flex flex-col items-center gap-4 sm:flex-row sm:justify-between"> <div className="flex flex-col items-center gap-4 sm:flex-row sm:justify-between">
<p className="text-sm text-muted-foreground order-2 sm:order-1"> <p className="text-sm text-muted-foreground order-2 sm:order-1">