resilience

Standardize asynchronous UI state with Suspense, skeletons, and error boundaries in TanStack Router and Query.

Updated Jan 20, 2026

Search Tags:#suspense #tanstack #resilience #query #router #error-boundary #skeletons

Ready to run

npx skills add https://github.com/jmgomezdev/itx-mobile-shop --skill resilience-jmgomezdev

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: resilience
Source: https://github.com/jmgomezdev/itx-mobile-shop/tree/main/.github/skills/resilience
Command: npx skills add https://github.com/jmgomezdev/itx-mobile-shop --skill resilience-jmgomezdev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Standardizes asynchronous UI state management by applying Suspense, skeletons, and error boundaries within TanStack Router + TanStack Query patterns to deliver a consistent loading and error-handling experience.

Core Features & Use Cases

Centralized loading and error handling through Suspense, granular skeleton components, and robust error boundaries.
Route-level error boundaries with retry triggers using router.invalidate().
Graceful mutation error handling with toasts to avoid breaking user input and to guide recovery.
Real-world use: building data-driven routes with predictable UX during loading and after mutations.

Quick Start

Wrap route components with Suspense and provide an error boundary to automatically manage loading, errors, and retries.

Frequently Asked Questions about resilience

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I standardize async UI states with TanStack Router and Query?▼

Standardize async UI states by applying Suspense, granular skeleton components, and robust error boundaries within TanStack Router and Query patterns. This delivers consistent loading and error-handling experiences across data-driven SPA routes.

What is the best way to handle route-level error boundaries and retries in a SPA?▼

Handle route-level error boundaries by wrapping route components with Suspense and providing an error boundary. Trigger retries automatically by invoking router.invalidate() to refresh the route data and clear the error state.

How do I manage mutation errors without losing user input in TanStack Query?▼

Manage mutation errors gracefully by catching failures and displaying toast-based feedback. This approach avoids breaking user input forms and guides the user toward recovery without unmounting the current route component.

Does TanStack Router support non-blocking UX with Suspense and skeletons?▼

Yes, TanStack Router supports non-blocking UX by combining Suspense boundaries with skeleton components. This pattern automatically manages loading states during route-based data fetching scenarios and provides predictable UX.

Why do I need Suspense for route-based data fetching scenarios?▼

You need Suspense for route-based data fetching to standardize asynchronous UI state management. It provides automatic loading states via skeletons and predictable error handling, ensuring non-blocking UX during data loaders and mutations.

Can I use this approach for mutations across all SPA pages?▼

Yes, you can apply this pattern for mutations across SPA pages. It provides graceful mutation error handling with toasts and retry mechanisms via router.invalidate(), ensuring predictable UX and recovery across data-driven routes.