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

feat: loading on page change

Browse Source
This commit is contained in:
Julien Froidefond
2025-02-15 11:37:54 +01:00
parent c049341fcd
commit eb542feaef
5 changed files with 171 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/app/layout.tsx
View File

@@ -2,6 +2,8 @@ import type { Metadata } from "next";
import { Inter } from "next/font/google"; import { Inter } from "next/font/google";
import "@/styles/globals.css"; import "@/styles/globals.css";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import ClientLayout from "@/components/layout/ClientLayout";
import { NetworkProgressProvider } from "@/components/ui/network-progress";
const inter = Inter({ subsets: ["latin"] }); const inter = Inter({ subsets: ["latin"] });
@@ -53,9 +55,6 @@ export const metadata: Metadata = {
}, },
}; };
// Composant client séparé pour le layout
import ClientLayout from "@/components/layout/ClientLayout";
export default function RootLayout({ children }: { children: React.ReactNode }) { export default function RootLayout({ children }: { children: React.ReactNode }) {
return ( return (
<html lang="fr" suppressHydrationWarning> <html lang="fr" suppressHydrationWarning>
@@ -115,7 +114,9 @@ export default function RootLayout({ children }: { children: React.ReactNode })
/> />
</head> </head>
<body className={cn("min-h-screen bg-background font-sans antialiased", inter.className)}> <body className={cn("min-h-screen bg-background font-sans antialiased", inter.className)}>
<NetworkProgressProvider>
<ClientLayout>{children}</ClientLayout> <ClientLayout>{children}</ClientLayout>
</NetworkProgressProvider>
</body> </body>
</html> </html>
); );

25
src/components/home/HomeContent.tsx
View File

@@ -4,25 +4,28 @@ import { HeroSection } from "./HeroSection";
import { MediaRow } from "./MediaRow"; import { MediaRow } from "./MediaRow";
import { KomgaBook, KomgaSeries } from "@/types/komga"; import { KomgaBook, KomgaSeries } from "@/types/komga";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import { useNetworkRequest } from "@/lib/hooks/use-network-request";
interface HomeContentProps { interface HomeData {
data: {
ongoing: KomgaSeries[]; ongoing: KomgaSeries[];
recentlyRead: KomgaBook[]; recentlyRead: KomgaBook[];
onDeck: KomgaBook[]; onDeck: KomgaBook[];
}; }
interface HomeContentProps {
data: HomeData;
} }
export function HomeContent({ data }: HomeContentProps) { export function HomeContent({ data }: HomeContentProps) {
const router = useRouter(); const router = useRouter();
const handleItemClick = (item: KomgaSeries | KomgaBook) => { const { executeRequest } = useNetworkRequest();
// Si c'est une série (a la propriété booksCount), on va vers la page de la série
if ("booksCount" in item) { const handleItemClick = async (item: KomgaSeries | KomgaBook) => {
router.push(`/series/${item.id}`); const path = "booksCount" in item ? `/series/${item.id}` : `/books/${item.id}`;
} else {
// Si c'est un livre, on va directement vers la page de lecture await executeRequest(async () => {
router.push(`/books/${item.id}`); router.push(path);
} });
}; };
// Vérification des données pour le debug // Vérification des données pour le debug

43
src/components/layout/Sidebar.tsx
View File

@@ -7,6 +7,7 @@ import { cn } from "@/lib/utils";
import { authService } from "@/lib/services/auth.service"; import { authService } from "@/lib/services/auth.service";
import { useEffect, useState, useCallback } from "react"; import { useEffect, useState, useCallback } from "react";
import { KomgaLibrary, KomgaSeries } from "@/types/komga"; import { KomgaLibrary, KomgaSeries } from "@/types/komga";
import { useNetworkRequest } from "@/lib/hooks/use-network-request";
interface SidebarProps { interface SidebarProps {
isOpen: boolean; isOpen: boolean;
@@ -16,6 +17,7 @@ interface SidebarProps {
export function Sidebar({ isOpen, onClose }: SidebarProps) { export function Sidebar({ isOpen, onClose }: SidebarProps) {
const pathname = usePathname(); const pathname = usePathname();
const router = useRouter(); const router = useRouter();
const { executeRequest } = useNetworkRequest();
const [libraries, setLibraries] = useState<KomgaLibrary[]>([]); const [libraries, setLibraries] = useState<KomgaLibrary[]>([]);
const [favorites, setFavorites] = useState<KomgaSeries[]>([]); const [favorites, setFavorites] = useState<KomgaSeries[]>([]);
const [isLoading, setIsLoading] = useState(true); const [isLoading, setIsLoading] = useState(true);
@@ -104,8 +106,11 @@ export function Sidebar({ isOpen, onClose }: SidebarProps) {
router.push("/login"); router.push("/login");
}; };
const handleLinkClick = () => { const handleLinkClick = async (path: string) => {
onClose(); onClose();
await executeRequest(async () => {
router.push(path);
});
}; };
const navigation = [ const navigation = [
@@ -131,18 +136,17 @@ export function Sidebar({ isOpen, onClose }: SidebarProps) {
<div className="space-y-1"> <div className="space-y-1">
<h2 className="mb-2 px-4 text-lg font-semibold tracking-tight">Navigation</h2> <h2 className="mb-2 px-4 text-lg font-semibold tracking-tight">Navigation</h2>
{navigation.map((item) => ( {navigation.map((item) => (
<Link <button
key={item.href} key={item.href}
href={item.href} onClick={() => handleLinkClick(item.href)}
onClick={handleLinkClick}
className={cn( className={cn(
"flex items-center rounded-lg px-3 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground", "w-full flex items-center rounded-lg px-3 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground",
pathname === item.href ? "bg-accent" : "transparent" pathname === item.href ? "bg-accent" : "transparent"
)} )}
> >
<item.icon className="mr-2 h-4 w-4" /> <item.icon className="mr-2 h-4 w-4" />
{item.name} {item.name}
</Link> </button>
))} ))}
</div> </div>
</div> </div>
@@ -159,18 +163,17 @@ export function Sidebar({ isOpen, onClose }: SidebarProps) {
<div className="px-3 py-2 text-sm text-muted-foreground">Aucun favori</div> <div className="px-3 py-2 text-sm text-muted-foreground">Aucun favori</div>
) : ( ) : (
favorites.map((series) => ( favorites.map((series) => (
<Link <button
key={series.id} key={series.id}
href={`/series/${series.id}`} onClick={() => handleLinkClick(`/series/${series.id}`)}
onClick={handleLinkClick}
className={cn( className={cn(
"flex items-center rounded-lg px-3 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground", "w-full flex items-center rounded-lg px-3 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground",
pathname === `/series/${series.id}` ? "bg-accent" : "transparent" pathname === `/series/${series.id}` ? "bg-accent" : "transparent"
)} )}
> >
<Star className="mr-2 h-4 w-4 fill-yellow-400 text-yellow-400" /> <Star className="mr-2 h-4 w-4 fill-yellow-400 text-yellow-400" />
<span className="truncate">{series.metadata.title}</span> <span className="truncate">{series.metadata.title}</span>
</Link> </button>
)) ))
)} )}
</div> </div>
@@ -195,18 +198,17 @@ export function Sidebar({ isOpen, onClose }: SidebarProps) {
<div className="px-3 py-2 text-sm text-muted-foreground">Aucune bibliothèque</div> <div className="px-3 py-2 text-sm text-muted-foreground">Aucune bibliothèque</div>
) : ( ) : (
libraries.map((library) => ( libraries.map((library) => (
<Link <button
key={library.id} key={library.id}
href={`/libraries/${library.id}`} onClick={() => handleLinkClick(`/libraries/${library.id}`)}
onClick={handleLinkClick}
className={cn( className={cn(
"flex items-center rounded-lg px-3 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground", "w-full flex items-center rounded-lg px-3 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground",
pathname === `/libraries/${library.id}` ? "bg-accent" : "transparent" pathname === `/libraries/${library.id}` ? "bg-accent" : "transparent"
)} )}
> >
<Library className="mr-2 h-4 w-4" /> <Library className="mr-2 h-4 w-4" />
{library.name} {library.name}
</Link> </button>
)) ))
)} )}
</div> </div>
@@ -215,17 +217,16 @@ export function Sidebar({ isOpen, onClose }: SidebarProps) {
<div className="px-3 py-2"> <div className="px-3 py-2">
<div className="space-y-1"> <div className="space-y-1">
<h2 className="mb-2 px-4 text-lg font-semibold tracking-tight">Configuration</h2> <h2 className="mb-2 px-4 text-lg font-semibold tracking-tight">Configuration</h2>
<Link <button
href="/settings" onClick={() => handleLinkClick("/settings")}
onClick={handleLinkClick}
className={cn( className={cn(
"flex items-center rounded-lg px-3 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground", "w-full flex items-center rounded-lg px-3 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground",
pathname === "/settings" ? "bg-accent" : "transparent" pathname === "/settings" ? "bg-accent" : "transparent"
)} )}
> >
<Settings className="mr-2 h-4 w-4" /> <Settings className="mr-2 h-4 w-4" />
Préférences Préférences
</Link> </button>
</div> </div>
</div> </div>
</div> </div>

88
src/components/ui/network-progress.tsx Normal file
View File

@@ -0,0 +1,88 @@
"use client";
import { createContext, useContext, useState, useCallback } from "react";
import { Loader2 } from "lucide-react";
import { cn } from "@/lib/utils";
interface NetworkProgressContextType {
startProgress: (requestId: string) => void;
updateProgress: (requestId: string, progress: number) => void;
completeProgress: (requestId: string) => void;
}
const NetworkProgressContext = createContext<NetworkProgressContextType | null>(null);
export function NetworkProgressProvider({ children }: { children: React.ReactNode }) {
const [activeRequests, setActiveRequests] = useState<Record<string, number>>({});
const startProgress = useCallback((requestId: string) => {
setActiveRequests((prev) => ({ ...prev, [requestId]: 0 }));
}, []);
const updateProgress = useCallback((requestId: string, progress: number) => {
setActiveRequests((prev) => ({ ...prev, [requestId]: progress }));
}, []);
const completeProgress = useCallback((requestId: string) => {
setActiveRequests((prev) => {
const newRequests = { ...prev };
delete newRequests[requestId];
return newRequests;
});
}, []);
const totalProgress = Object.values(activeRequests).reduce((acc, curr) => acc + curr, 0);
const requestCount = Object.keys(activeRequests).length;
const averageProgress = requestCount > 0 ? totalProgress / requestCount : 0;
return (
<NetworkProgressContext.Provider value={{ startProgress, updateProgress, completeProgress }}>
{children}
{requestCount > 0 && (
<>
{/* Barre de progression en haut */}
<div className="fixed top-0 left-0 right-0 z-50">
<div className="h-1 w-full bg-muted">
<div
className="h-full bg-primary transition-all duration-300 ease-out"
style={{ width: `${averageProgress}%` }}
/>
</div>
</div>
{/* Indicateur de progression au centre */}
<div className="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-50">
<div className="bg-background/80 backdrop-blur-sm rounded-lg p-4 flex items-center gap-2">
<Loader2 className="h-4 w-4 animate-spin" />
<span className="text-sm font-medium">{Math.round(averageProgress)}%</span>
</div>
</div>
</>
)}
</NetworkProgressContext.Provider>
);
}
export function useNetworkProgress() {
const context = useContext(NetworkProgressContext);
if (!context) {
throw new Error("useNetworkProgress must be used within a NetworkProgressProvider");
}
return context;
}
// Fonction utilitaire pour simuler une progression
export async function simulateProgress(
requestId: string,
updateFn: (requestId: string, progress: number) => void,
duration: number = 1000
) {
const steps = 20;
const increment = 100 / steps;
const stepDuration = duration / steps;
for (let i = 1; i <= steps; i++) {
await new Promise((resolve) => setTimeout(resolve, stepDuration));
updateFn(requestId, Math.min(increment * i, 99));
}
}

40
src/lib/hooks/use-network-request.ts Normal file
View File

@@ -0,0 +1,40 @@
"use client";
import { useNetworkProgress, simulateProgress } from "@/components/ui/network-progress";
import { useCallback } from "react";
export function useNetworkRequest() {
const { startProgress, updateProgress, completeProgress } = useNetworkProgress();
const executeRequest = useCallback(
async <T>(requestFn: () => Promise<T>): Promise<T> => {
const requestId = Math.random().toString(36).substring(7);
try {
startProgress(requestId);
// Démarrer la simulation de progression
const progressPromise = simulateProgress(requestId, updateProgress, 500);
// Exécuter la requête
const result = await requestFn();
// Attendre que la simulation soit terminée
await progressPromise;
// Forcer la progression à 100% avant de terminer
updateProgress(requestId, 100);
setTimeout(() => completeProgress(requestId), 100);
return result;
} catch (error) {
// En cas d'erreur, on termine quand même la progression
completeProgress(requestId);
throw error;
}
},
[startProgress, updateProgress, completeProgress]
);
return { executeRequest };
}