Update May 21 by Elvis

app/admin/clients/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect, useCallback } from "react";
+import { useState, useEffect, useCallback, startTransition } from "react";
 import { Card } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -34,7 +34,7 @@ export default function AdminClients() {
     }
   }, [query]);
 
-  useEffect(() => { load(); }, [load]);
+  useEffect(() => { startTransition(() => load()); }, [load]);
 
   const handleSearch = (e: React.FormEvent) => {
     e.preventDefault();

app/admin/commandes/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect, useCallback } from "react";
+import { useState, useEffect, useCallback, startTransition } from "react";
 import { Card } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -56,7 +56,7 @@ export default function AdminCommandes() {
     }
   }, [filter]);
 
-  useEffect(() => { load(); }, [load]);
+  useEffect(() => { startTransition(() => load()); }, [load]);
 
   const handleStatus = async (id: string, status: string) => {
     setUpdating(id);

app/admin/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, startTransition } from "react";
 import { Package, CalendarCheck, Clock, TrendingUp, ShoppingBag, Users, AlertTriangle, Euro } from "lucide-react";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
@@ -8,6 +8,41 @@ import { useAdmin } from "@/contexts/AdminContext";
 import { useLanguage } from "@/contexts/LanguageContext";
 import { getDashboardStats, DashboardStats } from "@/lib/api/admin";
 
+function Skeleton() {
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+      {Array.from({ length: 4 }).map((_, i) => (
+        <Card key={i}>
+          <CardContent className="p-5">
+            <div className="h-4 bg-muted animate-pulse rounded w-2/3 mb-3" />
+            <div className="h-7 bg-muted animate-pulse rounded w-1/3" />
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+  );
+}
+
+function StatGrid({ cards }: { cards: { label: string; value: string | number; icon: React.ElementType; color: string; bg: string }[] }) {
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+      {cards.map((s) => (
+        <Card key={s.label}>
+          <CardContent className="p-5 flex items-center justify-between">
+            <div>
+              <p className="text-sm text-muted-foreground">{s.label}</p>
+              <p className="text-2xl font-semibold mt-1">{s.value}</p>
+            </div>
+            <div className={`h-10 w-10 rounded-full ${s.bg} flex items-center justify-center`}>
+              <s.icon className={`h-5 w-5 ${s.color}`} />
+            </div>
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+  );
+}
+
 export default function AdminOverview() {
   const { reservations } = useAdmin();
   const { t, locale } = useLanguage();
@@ -40,37 +75,6 @@ export default function AdminOverview() {
       ]
     : [];
 
-  const Skeleton = () => (
-    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
-      {Array.from({ length: 4 }).map((_, i) => (
-        <Card key={i}>
-          <CardContent className="p-5">
-            <div className="h-4 bg-muted animate-pulse rounded w-2/3 mb-3" />
-            <div className="h-7 bg-muted animate-pulse rounded w-1/3" />
-          </CardContent>
-        </Card>
-      ))}
-    </div>
-  );
-
-  const StatGrid = ({ cards }: { cards: { label: string; value: string | number; icon: React.ElementType; color: string; bg: string }[] }) => (
-    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
-      {cards.map((s) => (
-        <Card key={s.label}>
-          <CardContent className="p-5 flex items-center justify-between">
-            <div>
-              <p className="text-sm text-muted-foreground">{s.label}</p>
-              <p className="text-2xl font-semibold mt-1">{s.value}</p>
-            </div>
-            <div className={`h-10 w-10 rounded-full ${s.bg} flex items-center justify-center`}>
-              <s.icon className={`h-5 w-5 ${s.color}`} />
-            </div>
-          </CardContent>
-        </Card>
-      ))}
-    </div>
-  );
-
   return (
     <div className="space-y-8">
       <div>

app/admin/planning/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect, useCallback } from "react";
+import { useState, useEffect, useCallback, startTransition } from "react";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -263,7 +263,7 @@ function CalendarTab() {
       .finally(() => setLoadingSlots(false));
   }, [year, month]);
 
-  useEffect(() => { loadSlots(); }, [loadSlots]);
+  useEffect(() => { startTransition(() => loadSlots()); }, [loadSlots]);
 
   const prevMonth = () => {
     if (month === 0) { setYear((y) => y - 1); setMonth(11); }

app/admin/services/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, startTransition } from "react";
 import { Card } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -54,7 +54,7 @@ export default function AdminServices() {
     }
   };
 
-  useEffect(() => { load(); }, []);
+  useEffect(() => { startTransition(() => load()); }, []);
 
   const openCreate = () => {
     setEditing(null);

app/boutique/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Suspense, useState, useEffect } from "react";
+import { Suspense, useState, useEffect, startTransition } from "react";
 import { useLanguage } from "@/contexts/LanguageContext";
 import { useSearchParams, useRouter } from "next/navigation";
 import { categories } from "@/data/products";
@@ -21,7 +21,7 @@ function ShopContent() {
   };
 
   useEffect(() => {
-    setLoading(true);
+    startTransition(() => setLoading(true));
     listProducts({
       per_page: 100,
       category: selectedCategory === "all" ? undefined : selectedCategory,

app/mon-compte/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, startTransition } from "react";
 import { useRouter } from "next/navigation";
 import { useAuth } from "@/contexts/AuthContext";
 import { useLanguage } from "@/contexts/LanguageContext";
@@ -40,8 +40,10 @@ export default function MonCompte() {
 
   useEffect(() => {
     if (user) {
-      setName(user.full_name ?? "");
+      startTransition(() => {
-      setPhone(user.phone ?? "");
+        setName(user.full_name ?? "");
+        setPhone(user.phone ?? "");
+      });
     }
   }, [user]);
 

app/produit/[id]/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, startTransition } from "react";
 import { Star, ChevronLeft, Check } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { useLanguage } from "@/contexts/LanguageContext";
@@ -26,7 +26,7 @@ export default function ProductDetail() {
 
   useEffect(() => {
     if (!id) return;
-    setLoading(true);
+    startTransition(() => setLoading(true));
     getProduct(id as string)
       .then((p) => {
         setProduct(p);

app/reservation/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, startTransition } from "react";
 import { Calendar } from "@/components/ui/calendar";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -43,16 +43,20 @@ export default function Booking() {
 
   useEffect(() => {
     if (user) {
-      setName(user.full_name ?? "");
+      startTransition(() => {
-      setEmail(user.email ?? "");
+        setName(user.full_name ?? "");
-      setPhone(user.phone ?? "");
+        setEmail(user.email ?? "");
+        setPhone(user.phone ?? "");
+      });
     }
   }, [user]);
 
   useEffect(() => {
     if (!selectedDate) return;
-    setSlotsLoading(true);
+    startTransition(() => {
-    setSelectedSlot(null);
+      setSlotsLoading(true);
+      setSelectedSlot(null);
+    });
     const dateStr = toDateStr(selectedDate);
     getAvailableSlots(dateStr, dateStr)
       .then(setSlots)

contexts/AdminContext.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useContext, useState, useEffect, ReactNode, createContext } from "react";
+import React, { useContext, useState, useEffect, startTransition, ReactNode, createContext } from "react";
 import { useAuth } from "@/contexts/AuthContext";
 import * as productsApi from "@/lib/api/products";
 import * as bookingsApi from "@/lib/api/bookings";
@@ -82,8 +82,10 @@ export const AdminProvider = ({ children }: { children: ReactNode }) => {
 
   useEffect(() => {
     if (isAdmin) {
-      refreshProducts();
+      startTransition(() => {
-      refreshReservations();
+        refreshProducts();
+        refreshReservations();
+      });
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isAdmin]);

contexts/AuthContext.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { createContext, useContext, useState, useEffect, ReactNode } from "react";
+import React, { createContext, useContext, useState, useEffect, startTransition, ReactNode } from "react";
 import { getToken } from "@/lib/api";
 import * as authApi from "@/lib/api/auth";
 
@@ -24,7 +24,7 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
   useEffect(() => {
     const token = getToken();
     if (!token) {
-      setIsLoading(false);
+      startTransition(() => setIsLoading(false));
       return;
     }
     authApi.getMe()

hooks/use-mobile.ts

@@ -11,7 +11,7 @@ export function useIsMobile() {
       setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
     }
     mql.addEventListener("change", onChange)
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    React.startTransition(() => setIsMobile(window.innerWidth < MOBILE_BREAKPOINT))
     return () => mql.removeEventListener("change", onChange)
   }, [])