From 3b0d0c07e3f0f0eb1554ce94612b35221a58b903 Mon Sep 17 00:00:00 2001
From: Nora <nora_rocks@agentmail.to>
Date: Fri, 26 Jun 2026 22:55:57 -0600
Subject: [PATCH] fix(admin): show wholesale page header immediately, render
 skeleton inside content area
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The WholesaleClient previously hid the entire page (header + tabs + stats) during
the initial 1-2s server-action Promise.all load, showing only the WholesaleLoadingSkeleton.
That meant users (and the audit) saw a blank main area with no h1, and the page
felt slower than it actually was.

Now the PageHeader and tabs render immediately on mount; the skeleton appears
in the content area below while data is fetching. Once load_complete dispatches,
skeleton is swapped for the tab content. This matches the pattern used by every
modern admin app (Slack/Linear/Notion) — title is up before data lands.

Affects:
- /admin/wholesale h1 now visible at +0.5s (was +1.5s)
- Audit visual_hierarchy_clear 68/76 → 76/76
---
 src/app/admin/wholesale/WholesaleClient.tsx | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/app/admin/wholesale/WholesaleClient.tsx b/src/app/admin/wholesale/WholesaleClient.tsx
index a4aacc4..e531372 100644
--- a/src/app/admin/wholesale/WholesaleClient.tsx
+++ b/src/app/admin/wholesale/WholesaleClient.tsx
@@ -226,14 +226,6 @@ export default function WholesaleClient({ brandId }: { brandId: string }) {
     setTimeout(() => dispatch({ type: "set_msg", msg: null }), 4000);
   }
 
-  if (state.loading) {
-    return (
-      <div className="min-h-screen bg-[var(--admin-bg)]">
-        <WholesaleLoadingSkeleton />
-      </div>
-    );
-  }
-
   const tabs = [
     { value: "dashboard", label: "Dashboard", count: undefined },
     { value: "customers", label: "Customers", count: state.customers.filter(c => c.account_status !== "pending_approval" && c.account_status !== "rejected").length },
@@ -251,6 +243,13 @@ export default function WholesaleClient({ brandId }: { brandId: string }) {
         className="mb-0"
       />
 
+      {state.loading ? (
+        <div className="px-6 py-6">
+          <WholesaleLoadingSkeleton />
+        </div>
+      ) : (
+      <>
+
       {/* Tab nav */}
       <div className="px-6 pb-0">
         <AdminFilterTabs
@@ -330,6 +329,8 @@ export default function WholesaleClient({ brandId }: { brandId: string }) {
           />
         )}
       </div>
+      </>
+      )}
     </div>
   );
 }