Loading states
Spec
Agreed Oct 10 (#72). The visuals are being designed in Figma; the behavior below is decided, the look may change. Show nothing for the first 300 ms, so fast loads never flicker.
1. First load: placeholders in the real layout
Grey shapes where the balances, runway and rows will be, so nothing jumps when data arrives. The top bar, tabs and logo are real from the start. A soft shimmer moves across; with reduced motion it stays still.
2. Refreshing: a thin bar under the top bar
When something is already on screen (switching accounts, coming back to the app, after Move money), keep it visible and run a 3px bar under the top bar. Old numbers stay readable instead of blanking out. The bar is the accent color, so it isn't mistaken for a warning.
3. Saving: the button shows it's busy
The label stays, a small spinner appears, and the button ignores more taps until the save finishes. On a slow connection, a second tap is how duplicate transactions happen. The rest of the form stays readable.
4. A very long wait
After about 8 seconds, placeholders give way to the #43 wording with a way to try again. The screen never spins forever.
Which indicator when
- First load of a screen: placeholders in the real layout; top bar, logo and tabs are real from the start.
- Something already on screen (switching accounts, coming back to the app, after Move money): keep it visible and run the 3px accent bar under the top bar.
- Saving (Add, Save, Move money, Add paycheck): spinner in the button, label stays, more taps ignored until it finishes.
Timing and access
- Nothing for the first 300 ms. After 8 seconds: "Check your connection." with Try again (the #43 wording).
- Reduced motion: no shimmer, no moving bar, no spin; still shapes instead.
- Screen readers hear "Loading" once (aria-busy on the region), not repeatedly.
Built
Not built yet.
Changes
- 1.0.0, Oct 10 2026: Placeholders, refresh bar, busy buttons, 300 ms / 8 s timings. Final visuals come from the Figma design. (#72)