Refactor/virtual list (#29)

* feat(dependencies): add @tanstack/react-virtual package

* Introduced @tanstack/react-virtual version 3.13.22 to enhance virtual scrolling capabilities.
* Updated related dependencies in composer.json and package.json for compatibility.
* Ensured all lock files are in sync with the latest changes.

* refactor(App): optimize user filtering with useMemo

* refactor(imageCache): implement LRU caching for images

* Replace simple cache with LRUImageCache class
* Add methods for managing cache entries (get, set, delete, clear)
* Update SecureImage component to utilize new caching logic
* Abort fetch requests on component unmount to prevent memory leaks

* refactor(UserGrid): implement virtual scrolling for user cards

* Replace infinite scroll with virtual scrolling for improved performance
* Add responsive column detection based on container width
* Update UserGrid props to accommodate new structure
* Refactor UserCard animations to prevent re-animation on scroll

* refactor(UserGrid): improve virtual row animation and stagger

* Replace scrollContainerRef with callback ref for scroll container
* Implement staggered animation for user cards using motion variants
* Prevent re-animation of already seen cards on scroll-back
* Update eslint config to disable false positive for react-virtual

* chore(eslint): disable false positive for react-hooks with react-virtual

* Revert "refactor(UserGrid): improve virtual row animation and stagger"

This reverts commit 246aa9a.

* Revert "refactor(UserGrid): implement virtual scrolling for user cards"

This reverts commit 254da19.

* refactor(UserGrid): implement virtualized rendering for user cards

* Replace infinite scroll with virtualizer for improved performance
* Dynamically calculate grid columns based on screen size
* Update animation variants for smoother transitions
* Remove observer and loading spinner logic

* refactor(css): simplify view transition animations and remove media query

* refactor(PhotoLightbox): render with portal to document body

* refactor: improve image loading and animation

* Add async decoding and lazy loading to SecureImage for better performance
* Change UserGrid animation trigger from whileInView to animate for consistency

* refactor: ensure full-height card layout

* Add h-full class to UserCard and UserGrid item containers
* Improves card alignment and consistent sizing in grid

* docs(README): update features to reflect virtual list usage

Author: Cold-FR

README.md

@@ -50,11 +50,11 @@
 - 🛡️ **Rôles dynamiques** — Droits basés sur les groupes AD (ROLE_USER / ROLE_ADMIN) avec Voter Symfony
 - 🔑 **API sécurisée JWT** — Authentification stateless via JSON Web Tokens
 - 🔍 **Recherche instantanée** — Filtrage avec debounce (300 ms) par nom, prénom ou service, avec skeleton de chargement
-- ♾️ **Infinite scroll** — Chargement progressif par lots de 24 fiches via IntersectionObserver
+- ♾️ **Virtual list** — Chargement progressif des utilisateurs avec react-virtual
 - 🌙 **Dark mode** — Thème sombre avec animation circulaire (View Transition API) depuis le point de clic
 - 🎬 **Animations fluides** — Transitions de page, modales animées, micro-interactions (Motion/Framer Motion)
 - 💬 **Notifications toast** — Retours visuels avec barre de progression et pause au survol
-- ⚡ **Cache intelligent** — Cache des données utilisateur en sessionStorage (TTL 5 min) + cache mémoire des images (Object URL)
+- ⚡ **Cache intelligent** — Cache des données utilisateur en sessionStorage (TTL 5 min) + cache mémoire des images
 - 📜 **Mentions légales & RGPD** — Modale intégrée accessible depuis la page de connexion et le footer
 - 📱 **Responsive** — Interface adaptée mobile, tablette et desktop
 - 🎨 **Personnalisable** — Nom de l'organisation et titre de l'application configurables via variables d'environnement

client/bun.lock

@@ -1,10 +1,10 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import tseslint from 'typescript-eslint'
-import { defineConfig, globalIgnores } from 'eslint/config'
-import eslintConfigPrettier from 'eslint-config-prettier'
+import js from '@eslint/js';
+import globals from 'globals';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import tseslint from 'typescript-eslint';
+import { defineConfig, globalIgnores } from 'eslint/config';
+import eslintConfigPrettier from 'eslint-config-prettier';
 
 export default defineConfig([
   globalIgnores(['dist']),
@@ -20,6 +20,10 @@ export default defineConfig([
       ecmaVersion: 2020,
       globals: globals.browser,
     },
+    rules: {
+      // Faux positif : @tanstack/react-virtual est compatible React mais pas reconnu par le plugin
+      'react-hooks/incompatible-library': 'off',
+    },
   },
-  eslintConfigPrettier
-])
+  eslintConfigPrettier,
+]);

client/eslint.config.js

@@ -28,6 +28,7 @@
   },
   "dependencies": {
     "@tailwindcss/vite": "^4.2.1",
+    "@tanstack/react-virtual": "^3.13.22",
     "flowbite": "^4.0.1",
     "lucide-react": "^0.577.0",
     "motion": "^12.35.2",

client/package.json

@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, useMemo } from 'react';
 import { type User } from './components/UserCard';
 import LoginPage from './components/LoginPage';
 import AppNav from './components/AppNav';
@@ -11,7 +11,6 @@ import { useTheme } from './hooks/useTheme';
 import { useToast } from './hooks/useToast';
 import { useAuth } from './hooks/useAuth';
 import { useUsers } from './hooks/useUsers';
-import { useInfiniteScroll } from './hooks/useInfiniteScroll';
 import { AnimatePresence, motion, type Transition } from 'motion/react';
 
 const pageVariants = {
@@ -50,15 +49,16 @@ export default function App() {
 
   const isSearching = searchTerm !== debouncedSearch;
 
-  const filteredUsers = users.filter((user) =>
-    `${user.firstName} ${user.lastName} ${user.department}`
-      .toLowerCase()
-      .includes(debouncedSearch.toLowerCase())
+  const filteredUsers = useMemo(
+    () =>
+      users.filter((user) =>
+        `${user.firstName} ${user.lastName} ${user.department}`
+          .toLowerCase()
+          .includes(debouncedSearch.toLowerCase())
+      ),
+    [users, debouncedSearch]
   );
 
-  // Infinite scroll
-  const { visibleUsers, hasMore, observerTarget } = useInfiniteScroll(filteredUsers, searchTerm);
-
   // État des modales
   const [isUploadOpen, setIsUploadOpen] = useState(false);
   const [selectedUser, setSelectedUser] = useState<User | null>(null);
@@ -147,13 +147,11 @@ export default function App() {
               <main className="mx-auto w-full max-w-6xl p-4 sm:p-6 lg:p-8">
                 <UserGrid
                   allUsers={users}
-                  visibleUsers={visibleUsers}
+                  visibleUsers={filteredUsers}
                   filteredCount={filteredUsers.length}
                   isAdmin={isAdmin}
                   loggedUsername={username}
-                  hasMore={hasMore}
                   isSearching={isSearching}
-                  observerTarget={observerTarget}
                   onEditPhoto={openUpload}
                   onDeletePhoto={openDelete}
                 />

client/src/App.tsx

@@ -1,4 +1,5 @@
 import { useEffect } from 'react';
+import { createPortal } from 'react-dom';
 import { motion } from 'motion/react';
 import { X } from 'lucide-react';
 import { SecureImage } from './SecureImage';
@@ -29,7 +30,7 @@ export function PhotoLightbox({ src, alt, onClose }: PhotoLightboxProps) {
     return () => window.removeEventListener('keydown', handleKey);
   }, [onClose]);
 
-  return (
+  return createPortal(
     <motion.div
       className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 p-4 backdrop-blur-sm"
       variants={overlayVariants}
@@ -64,6 +65,7 @@ export function PhotoLightbox({ src, alt, onClose }: PhotoLightboxProps) {
           className="max-h-[90vh] max-w-[90vw] rounded-xl object-contain shadow-2xl"
         />
       </motion.div>
-    </motion.div>
+    </motion.div>,
+    document.body
   );
 }

client/src/components/PhotoLightbox.tsx

@@ -17,25 +17,31 @@ export function SecureImage({ src, alt, className }: SecureImageProps) {
   useEffect(() => {
     if (!src) return;
 
-    // Déjà en cache → pas besoin de fetcher
-    if (imageCache.has(src)) return;
+    // Déjà en cache → on marque comme récemment utilisé et on se met à jour si besoin
+    const cached = imageCache.get(src);
+    if (cached !== undefined) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
+      setImageSrc(cached);
+      return;
+    }
 
     let isMounted = true;
+    const controller = new AbortController();
 
     const fetchImage = async () => {
       try {
         const response = await fetch(src, {
           headers: {
             Authorization: `Bearer ${token}`,
           },
+          signal: controller.signal,
         });
 
         if (!response.ok) {
           if (response.status === 401) {
             handleLogout();
             toastError('Session expirée, veuillez vous reconnecter.');
           }
-
           return;
         }
 
@@ -47,6 +53,7 @@ export function SecureImage({ src, alt, className }: SecureImageProps) {
           setImageSrc(objectUrl);
         }
       } catch (error) {
+        if (error instanceof Error && error.name === 'AbortError') return;
         console.error("Impossible de charger l'image protégée", error);
       }
     };
@@ -55,13 +62,13 @@ export function SecureImage({ src, alt, className }: SecureImageProps) {
 
     return () => {
       isMounted = false;
-      // On ne révoque PAS l'objectUrl ici : il reste dans le cache
+      controller.abort(); // Annule le fetch si le composant démonte avant la fin
     };
-  }, [src, token]);
+  }, [src, token, handleLogout, toastError]);
 
   if (!imageSrc) {
     return <div className={`animate-pulse bg-gray-200 dark:bg-gray-700 ${className}`}></div>;
   }
 
-  return <img src={imageSrc} alt={alt} className={className} />;
+  return <img src={imageSrc} alt={alt} className={className} decoding="async" loading="lazy" />;
 }

client/src/components/SecureImage.tsx

@@ -45,7 +45,7 @@ export default memo(function UserCard({
     <motion.div
       variants={itemVariants}
       transition={itemTransition}
-      className="w-full rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800"
+      className="h-full w-full rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800"
     >
       <div className="flex h-full flex-col items-center px-4 pt-6 pb-6">
         {/* AVATAR CONTAINER */}