Examples
Dashboard Loader
Concurrent data fetching with configurable delays, failure rates, and retry policies.
Try it
Click “Load” to fetch all 3 resources. Adjust delay and failure rate sliders to see retry behavior and error states.
How it works
A dashboard needs profile, preferences, and permissions data before it can render. Each resource is fetched concurrently via Directive’s constraint–resolver flow.
- Constraints –
needsProfile(priority 100),needsPreferences(90),needsPermissions(80) – fire concurrently whenuserIdis set and the resource is idle - Resolvers – Each resolver fetches data with configurable delay and failure rate. Retry with exponential backoff handles transient failures automatically
- Derivations –
loadedCount,allLoaded,anyError,combinedStatus– auto-tracked, no manual dependency lists - Event Timeline – Every state change is logged so you can see the exact sequence of constraint evaluation, resolver execution, and retry attempts
Summary
What: A dashboard data loader that concurrently fetches profile, preferences, and permissions with configurable mock delays and failure rates.
How: Three constraints fire when userId is set, each requiring a different fetch. Resolvers handle the async work with exponential backoff retry. Derivations automatically compute combined status without manual state juggling.
Why it works: Loading states are a natural fit for constraints – each resource declares what it needs, and the runtime resolves them concurrently. No manual boolean flags, no race conditions, no flicker.
Source code
// Source file "dashboard-loader.ts" not found
