perf(media): memoize toast context and improve loading state UX

- wrap ToastContext value in useMemo to prevent unnecessary re-renders
- show skeleton only on initial load, use opacity transition for subsequent fetches
- destructure toastError from toast context to stabilize fetchItems dependency

src/core/toast/ToastContext.js

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { createContext, useContext, useState, useCallback } from 'react';
+import React, { createContext, useContext, useState, useCallback, useMemo } from 'react';
 
 const ToastContext = createContext();
 
@@ -88,7 +88,7 @@ export const ToastProvider = ({ children }) => {
         });
     }, [addToast]);
 
-    const value = {
+    const value = useMemo(() => ({
         toasts,
         addToast,
         removeToast,
@@ -97,7 +97,7 @@ export const ToastProvider = ({ children }) => {
         error,
         warning,
         info,
-    };
+    }), [toasts, addToast, removeToast, clearAllToasts, success, error, warning, info]);
 
     return (
         <ToastContext.Provider value={value}>

src/features/media/components/MediaGrid.client.js

@@ -40,7 +40,7 @@ export default function MediaGrid({
   selectedIds = new Set(),
   emptyMessage = 'Aucun média',
 }) {
-  if (loading) {
+  if (loading && items.length === 0) {
     return (
       <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-3">
         {Array.from({ length: 12 }).map((_, i) => (
@@ -59,7 +59,7 @@ export default function MediaGrid({
   }
 
   return (
-    <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-3">
+    <div className={`grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-3 transition-opacity ${loading ? 'opacity-60' : ''}`}>
       {items.map(media => {
         const Icon = iconForMime(media.mime_type);
         const isSelected = selectedIds.has(media.id);

src/features/media/pages/MediaPage.client.js

@@ -204,6 +204,7 @@ const MediaPage = ({ user }) => {
   const [filters, setFilters] = useState({ search: '', kind: '', visibility: '' });
   const [selected, setSelected] = useState(null);
 
+  const { error: toastError } = toast;
   const fetchItems = useCallback(async () => {
     setLoading(true);
     try {
@@ -217,11 +218,11 @@ const MediaPage = ({ user }) => {
       const data = await response.json();
       setItems(data.media || []);
     } catch (err) {
-      toast.error(err.message || 'Échec du chargement');
+      toastError(err.message || 'Échec du chargement');
     } finally {
       setLoading(false);
     }
-  }, [filters, toast]);
+  }, [filters, toastError]);
 
   useEffect(() => {
     fetchItems();