3 LIFECYCLE STATES · PWA

LOADING · OFFLINE · EMPTY

The premium-native lifecycle. An app-shell skeleton paints instantly while data streams in, a cached-first offline banner keeps last-synced numbers readable with no signal, and a designed empty state covers a coach with no roster yet. The live phones below in 2b boot through the skeleton and react to your real connection.

3A LOADING

App-shell skeleton — shape-matched, monochrome shimmer, zero layout shift.

9:41

3B OFFLINE

Cached-first — numbers stay readable, flagged as last-synced, writes pause.

9:41

3C EMPTY

No roster yet — brand-voiced, a single line-mark, no dead white space.

9:41

2 REBUILT IN BRAND

THE PROCESS
COACH APP

Stark black-and-white brand, soft light-card layout from your reference apps. Logged in as Karem Werbe — every coach sees only their own roster and their 40% cut, paid monthly. The phones are live: tap the month strip / ‹ › arrows to travel back and analyze, switch tabs on the bottom bar (Home · Analysis · Clients · Schedule), and the exit icon returns to login.

2A LOGIN

Brand splash — wordmark, zigzag motif, one black button.

9:41

2B HOME

This month's cut — black hero card, month navigator, split, top clients.

9:41

2C ANALYSIS

Go back & forth — YTD, month-over-month bars, any month's breakdown.

9:41