Search

Search components, tokens, patterns, architecture

Patterns

Loading States

Don't fake latency. Peri renders instantly from local data; loading UI exists only for the three real waits — background Drive sync, blocking wearable import, and PDF export.

Rules

  1. 01No skeletons anywhere.
  2. 02Background waits live in the sync dot; blocking is reserved for data-integrity operations.
  3. 03Name the operation and progress (“Night 14 of 30”).
  4. 04Blocking waits end with an artifact (the PDF card).

Examples

Drive sync

Pulsing amber dot + “Syncing…” caption. The dashboard never blocks.

Anti-patterns

What breaks this pattern

  • Shimmer placeholders on instant content
  • Unlabelled spinners
  • Progress bars that lie

Do

  • ·Show progress only for actual waits
  • ·Keep the app readable during background syncs

Don't

  • ·Add artificial delay for perceived gravitas
  • ·Block the dashboard for syncs