From 7c8bcb58dcf5097fd9e0778638f616d9feb18d72 Mon Sep 17 00:00:00 2001
From: VPS 4 Deploy Agent <deploy@clube67.com>
Date: Mon, 11 May 2026 07:08:25 +0200
Subject: [PATCH] =?UTF-8?q?fix(inbox):=20preloader=20aparece=20desde=20o?=
 =?UTF-8?q?=20primeiro=20render=20at=C3=A9=20o=20primeiro=20load=20complet?=
 =?UTF-8?q?ar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../frontend/pages/inbox/index.tsx            | 39 +++++++++++++++++++
 1 file changed, 39 insertions(+)

diff --git a/clube67/newwhats.local/frontend/pages/inbox/index.tsx b/clube67/newwhats.local/frontend/pages/inbox/index.tsx
index 3a96482..96bd482 100644
--- a/clube67/newwhats.local/frontend/pages/inbox/index.tsx
+++ b/clube67/newwhats.local/frontend/pages/inbox/index.tsx
@@ -127,6 +127,14 @@ export default function WhatsAppInboxPage() {
     const [isMobile, setIsMobile] = useState(false)
     const [isNewConvoModalOpen, setIsNewConvoModalOpen] = useState(false)
 
+    // Preloader: começa visível e some após o primeiro ciclo loading true→false
+    const [pageReady, setPageReady] = useState(false)
+    const prevLoadingRef = useRef(false)
+    useEffect(() => {
+        if (prevLoadingRef.current && !loading) setPageReady(true)
+        prevLoadingRef.current = loading
+    }, [loading])
+
     const optionsRef    = useRef<HTMLDivElement>(null)
     const initialized   = useRef(false)
 
@@ -184,6 +192,37 @@ export default function WhatsAppInboxPage() {
     // ── Render ────────────────────────────────────────────────────────────────
     return (
         <div className="flex h-screen w-full bg-[#f0f2f5] overflow-hidden select-none font-sans text-[#111b21]">
+            {/* Preloader global – visível até o primeiro carregamento de chats completar */}
+            <AnimatePresence>
+                {!pageReady && (
+                    <motion.div
+                        key="inbox-preloader"
+                        exit={{ opacity: 0 }}
+                        transition={{ duration: 0.4 }}
+                        className="fixed inset-0 z-[9999] flex items-center justify-center bg-[#070b14]"
+                    >
+                        <div className="flex flex-col items-center gap-5">
+                            <motion.div
+                                animate={{ opacity: [1, 0.2, 1] }}
+                                transition={{ duration: 1.6, repeat: Infinity, ease: 'easeInOut' }}
+                            >
+                                <svg viewBox="0 0 175.216 175.552" xmlns="http://www.w3.org/2000/svg" className="w-20 h-20">
+                                    <defs>
+                                        <linearGradient id="wpp-grad" x1="85.915" y1="173.376" x2="85.915" y2="5.765" gradientUnits="userSpaceOnUse">
+                                            <stop offset="0" stopColor="#20b038"/>
+                                            <stop offset="1" stopColor="#60d66a"/>
+                                        </linearGradient>
+                                    </defs>
+                                    <path d="M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 8.232 30.673L26 149.344l33.79-8.854a61.22 61.22 0 0 0 29.376 7.483h.023c33.73 0 61.17-27.423 61.18-61.13a60.75 60.75 0 0 0-17.91-43.263 60.77 60.77 0 0 0-43.27-17.353z" fill="url(#wpp-grad)"/>
+                                    <path d="M122.08 106.07c-1.96-1.02-11.6-5.72-13.4-6.38-1.8-.66-3.11-.98-4.42.98-1.31 1.96-5.06 6.38-6.21 7.69s-2.29 1.47-4.25.49c-11.6-5.8-19.21-10.36-26.83-23.5-2.03-3.49.43-3.25 1.16-5.42.6-1.77.3-3.27-.17-4.25-.49-.98-4.42-10.65-6.05-14.58-1.59-3.83-3.22-3.3-4.42-3.36-1.14-.06-2.45-.07-3.76-.07s-3.44.49-5.24 2.45c-1.8 1.96-6.87 6.71-6.87 16.37s7.04 18.99 8.02 20.3c.98 1.31 13.85 21.14 33.57 29.67 12.47 5.38 17.35 5.83 23.59 4.91 3.79-.57 11.6-4.74 13.24-9.33 1.63-4.59 1.63-8.52 1.14-9.33-.47-.81-1.78-1.31-3.74-2.31z" fill="#fff"/>
+                                </svg>
+                            </motion.div>
+                            <span className="text-slate-500 text-sm">Carregando conversas…</span>
+                        </div>
+                    </motion.div>
+                )}
+            </AnimatePresence>
+
             <div className="flex flex-1 overflow-hidden h-full">
                 <ThinSidebar activeTab={activeTab} setActiveTab={setActiveTab} activeInstance={activeInstance} />