Lesson 2 of 7 · 3 min
Navigating the Four Tabs
Learn how the tab system is structured, when each tab loads its data, and what to expect before data appears.
Navigating the Four Tabs
Video coming soon
Lesson Notes
The tabs bar appears immediately below the page header and subtitle. The four tab triggers are: Revenue (the default active tab), Customers, Tax, and Payouts. Clicking a tab label switches the content panel below without a full page reload — the URL stays at /reports; there is no deep-link per tab.
Revenue loads on page arrival — its KPI stat cards and bar chart begin populating as soon as the page mounts, because the revenue report is the most commonly needed view. Customers, Tax, and Payouts are each lazy-loaded: the first time you click their tab, a skeleton placeholder appears while the request completes. If you switch back and forth, the data is cached in component state for the session — switching back to a previously loaded tab is instant.
During loading, each tab content area shows a Skeleton placeholder that mirrors the shape of the real content (a 64px-tall skeleton for the chart, a 64-row-height skeleton for tables, etc.). This prevents layout shift when the data arrives. If a network error occurs on a tab, the tab falls back to an empty state rather than an error screen — for example, if the Payouts request fails, it renders the 'No Stripe Connect account on file' empty state so the page never crashes.
The Customers tab loads the top 25 customers by lifetime spend. The Tax tab re-fetches each time you change the quarterly/monthly toggle, discarding the previous data and showing a fresh skeleton. The Payouts tab fetches once and caches; there is no manual refresh — reload the page to get fresh payout data.
If you land on Reports and see the Access Denied screen, your account's effective role in the active workspace does not include Owner, Admin, or Project Manager. Ask your workspace Owner to update your member role in Settings > Team.
Key Takeaways
- Revenue tab loads immediately on page open; the other three tabs load lazily on first click.
- Switching back to an already-loaded tab uses cached state — no re-fetch until you reload the page.
- Skeleton placeholders prevent layout shift during loading; errors fall back to empty states, not crashes.
- The Tax tab is the only one that re-fetches automatically — it triggers a fresh request when you switch between Quarterly and Monthly.