fix(admin): show wholesale page header immediately, render skeleton inside content area
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
This commit is contained in:
@@ -226,14 +226,6 @@ export default function WholesaleClient({ brandId }: { brandId: string }) {
|
|||||||
setTimeout(() => dispatch({ type: "set_msg", msg: null }), 4000);
|
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 = [
|
const tabs = [
|
||||||
{ value: "dashboard", label: "Dashboard", count: undefined },
|
{ 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 },
|
{ 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"
|
className="mb-0"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
{state.loading ? (
|
||||||
|
<div className="px-6 py-6">
|
||||||
|
<WholesaleLoadingSkeleton />
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
|
||||||
{/* Tab nav */}
|
{/* Tab nav */}
|
||||||
<div className="px-6 pb-0">
|
<div className="px-6 pb-0">
|
||||||
<AdminFilterTabs
|
<AdminFilterTabs
|
||||||
@@ -330,6 +329,8 @@ export default function WholesaleClient({ brandId }: { brandId: string }) {
|
|||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user