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

fix: loader was slowing down the pages load time

Browse Source
This commit is contained in:
Julien Froidefond
2025-10-07 18:15:57 +02:00
parent ecaf804d02
commit 760bd14aa7
3 changed files with 97 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/layout/ClientLayout.tsx
View File

@@ -9,7 +9,6 @@ import { Toaster } from "@/components/ui/toaster";
import { usePathname } from "next/navigation";
import { registerServiceWorker } from "@/lib/registerSW";
import { NetworkStatus } from "../ui/NetworkStatus";
import { LoadingBar } from "@/components/ui/loading-bar";
import { DebugWrapper } from "@/components/debug/DebugWrapper";
import type { KomgaLibrary, KomgaSeries } from "@/types/komga";
@@ -70,7 +69,6 @@ export default function ClientLayout({ children, initialLibraries = [], initialF
return (
<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
<div className="relative min-h-screen h-full">
<LoadingBar />
{!isPublicRoute && <Header onToggleSidebar={handleToggleSidebar} />}
{!isPublicRoute && (
<Sidebar

97
src/components/skeletons/OptimizedSkeletons.tsx Normal file
View File

@@ -0,0 +1,97 @@
"use client";
import { cn } from "@/lib/utils";
interface OptimizedSkeletonProps {
className?: string;
children?: React.ReactNode;
}
export function OptimizedSkeleton({ className, children }: OptimizedSkeletonProps) {
return (
<div
className={cn(
"animate-pulse rounded-md bg-muted/50",
className
)}
>
{children}
</div>
);
}
export function HomePageSkeleton() {
return (
<main className="container mx-auto px-4 py-8 space-y-12">
{/* Header */}
<div className="flex justify-between items-center">
<OptimizedSkeleton className="h-8 w-48" />
<OptimizedSkeleton className="h-8 w-8 rounded-full" />
</div>
{/* Hero Section */}
<OptimizedSkeleton className="h-64 w-full rounded-lg" />
{/* Media Rows */}
<div className="space-y-12">
{Array.from({ length: 4 }).map((_, i) => (
<div key={i} className="space-y-4">
<div className="flex items-center gap-2">
<OptimizedSkeleton className="h-6 w-6 rounded" />
<OptimizedSkeleton className="h-6 w-32" />
</div>
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
{Array.from({ length: 6 }).map((_, j) => (
<OptimizedSkeleton key={j} className="aspect-[3/4] w-full rounded" />
))}
</div>
</div>
))}
</div>
</main>
);
}
export function SeriesPageSkeleton() {
return (
<main className="container mx-auto px-4 py-8 space-y-8">
{/* Header */}
<div className="flex items-center gap-4">
<OptimizedSkeleton className="h-12 w-12 rounded-lg" />
<div className="space-y-2">
<OptimizedSkeleton className="h-8 w-64" />
<OptimizedSkeleton className="h-4 w-32" />
</div>
</div>
{/* Books Grid */}
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
{Array.from({ length: 12 }).map((_, i) => (
<OptimizedSkeleton key={i} className="aspect-[3/4] w-full rounded" />
))}
</div>
</main>
);
}
export function LibraryPageSkeleton() {
return (
<main className="container mx-auto px-4 py-8 space-y-8">
{/* Header */}
<div className="flex justify-between items-center">
<OptimizedSkeleton className="h-8 w-48" />
<div className="flex gap-2">
<OptimizedSkeleton className="h-8 w-24" />
<OptimizedSkeleton className="h-8 w-8 rounded-full" />
</div>
</div>
{/* Series Grid */}
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
{Array.from({ length: 18 }).map((_, i) => (
<OptimizedSkeleton key={i} className="aspect-[3/4] w-full rounded" />
))}
</div>
</main>
);
}

97
src/components/ui/loading-bar.tsx
View File

@@ -1,97 +0,0 @@
"use client";
import { useEffect, useState, useRef } from "react";
import { cn } from "@/lib/utils";
import { Loader2 } from "lucide-react";
export function LoadingBar() {
const [isLoading, setIsLoading] = useState(false);
const [shouldRender, setShouldRender] = useState(false);
const pendingRequestsRef = useRef<number>(0);
useEffect(() => {
if (isLoading) {
setShouldRender(true);
} else {
const timer = setTimeout(() => {
setShouldRender(false);
}, 500);
return () => clearTimeout(timer);
}
}, [isLoading]);
useEffect(() => {
const handleStart = () => {
setIsLoading(true);
};
const handleStop = () => {
setTimeout(() => {
if (pendingRequestsRef.current === 0) {
setIsLoading(false);
}
}, 300);
};
window.addEventListener("navigationStart", handleStart);
window.addEventListener("navigationComplete", handleStop);
return () => {
window.removeEventListener("navigationStart", handleStart);
window.removeEventListener("navigationComplete", handleStop);
};
}, []);
useEffect(() => {
const originalFetch = window.fetch;
window.fetch = async function (...args) {
const url = args[0].toString();
const isStaticRequest =
/\.(css|js|png|jpg|jpeg|gif|webp|svg|ico|mp3|mp4|webm|ttf|woff|woff2)$/.test(url);
const isBookPageRequest = url.includes("/api/komga/images/books/") && url.includes("/pages");
if (!isStaticRequest && !isBookPageRequest) {
pendingRequestsRef.current++;
setIsLoading(true);
}
try {
const response = await originalFetch.apply(this, args);
return response;
} finally {
if (!isStaticRequest && !isBookPageRequest) {
pendingRequestsRef.current = Math.max(0, pendingRequestsRef.current - 1);
if (pendingRequestsRef.current === 0) {
setTimeout(() => {
setIsLoading(false);
}, 200);
}
}
}
};
return () => {
window.fetch = originalFetch;
};
}, []);
if (!shouldRender) return null;
return (
<div
className={cn(
"fixed inset-0 z-50",
"bg-background/80 backdrop-blur-sm",
"flex items-center justify-center",
isLoading ? "opacity-100" : "opacity-0 transition-opacity duration-500"
)}
>
<div className="flex flex-col items-center gap-2 px-4 py-2 rounded-lg bg-background/50 backdrop-blur-sm shadow-lg">
<Loader2 className="h-8 w-8 animate-spin text-primary" />
<p className="text-sm text-muted-foreground">Chargement...</p>
</div>
</div>
);
}