Enhance image upload and background management: Update Docker configuration to create a dedicated backgrounds directory for uploaded images, modify API routes to handle background images specifically, and improve README documentation to reflect these changes. Additionally, refactor components to utilize the new Avatar component for consistent avatar rendering across the application.

hooks/usePreferences.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState, useRef } from "react";
 
 interface Preferences {
   homeBackground: string | null;
@@ -43,15 +43,29 @@ export function useBackgroundImage(
 ) {
   const { preferences } = usePreferences();
   const [backgroundImage, setBackgroundImage] = useState(defaultImage);
+  const prevImageRef = useRef<string>(defaultImage);
 
   useEffect(() => {
     if (preferences) {
       const imageKey = `${page}Background` as keyof Preferences;
       const customImage = preferences[imageKey];
-      // Utiliser requestAnimationFrame pour éviter les cascades de rendu
-      requestAnimationFrame(() => {
-        setBackgroundImage(customImage || defaultImage);
-      });
+      const targetImage = customImage || defaultImage;
+      
+      // Ne changer que si l'image est vraiment différente
+      if (targetImage !== prevImageRef.current) {
+        prevImageRef.current = targetImage;
+        // Précharger l'image avant de changer
+        const img = new Image();
+        img.onload = () => {
+          setBackgroundImage(targetImage);
+        };
+        img.onerror = () => {
+          // Si l'image échoue, utiliser l'image par défaut
+          setBackgroundImage(defaultImage);
+          prevImageRef.current = defaultImage;
+        };
+        img.src = targetImage;
+      }
     }
   }, [preferences, page, defaultImage]);