PWA / Shell · 03

Pull-to-refresh loader

Bouncy refresh bowl with a circular progress ring around it. Hint text changes pull → release → fetching. Reduced-motion swaps the rotating arrow for a static refresh icon.

Production answer

Pull-to-refresh loader is a reusable Oak Flats Muffler Men UI primitive with documented states, accessibility expectations, theme behavior, and implementation evidence.

Primary CTAReview Pull-to-refresh loader states
Generative search brief

Pull-to-refresh loader: Bouncy refresh bowl with a circular progress ring around it. Hint text changes pull → release → fetching. Reduced-motion swaps the rotating arrow for a static refresh icon.

Use case

Re-poll the bay queue at the top of every job-list scroll-position. The loader sits inside the scroll container, not the top app bar, so it feels physically attached to the list.

State · 01

Idle · half pulled

Progress at 40% — bowl scales up, ring fills.

Pull to refresh
State · 02

Armed · ready to fire

At 100% the bowl turns red and the arrow flips. Release fires the refresh.

Release to refresh
State · 03

Loading · fetching latest

Bowl teal, icon swaps to refresh and spins. Custom hint shown.

Pulling bay queue…