UI Playground.
A small workspace for real frontend problems. Change an input, follow the state, inspect the implementation.
Workspace members
Fictional records. Real sorting, filtering and state.
Loading workspace members… | ||||
One search. Three strategies.
Compare concurrency, cancellation and response order.
Race scenario sends an (1,400 ms), then angular (350 ms). The source is local and deterministic; no external requests are made.
Results
Start with a question.
Search the local library or run the race scenario.
Request lifecycle
Latest completed requests + all running workUnsubscribed ≠ aborted. Each row reports the actual subscription and source operation.
No requests yet. Your first query starts the trace.
Create your workspace
Local validation and a simulated save. Nothing is sent or stored.
One source of truth. A derived view.
The table reads a feature-local Signals store. Search, filters, sort order, page size and selected IDs are independent inputs; the visible rows are computed from them.
- A cancellable mock source returns typed workspace records after 450 ms.
- Computed state filters and sorts immutably, then clamps the page and slices visible records.
- Selection uses stable IDs and remains intact across page and filter changes. The header checkbox affects the current page only.
- Archiving replaces the matching records immutably. Reload restores the fixture and clears selection; adding a member changes the actual collection.
The tradeoff
Client-side sorting works for this small fixture. A large production dataset should delegate filtering and pagination to a server and define selection semantics explicitly.
Read the implementation.
Exact source files exported at build time. This code powers the live demo.