---
title: "Data Loading - Air Market"
description: "A page that renders first and fetches after gives people spinners and jumps. This covers loading a route's data as part of navigating to it, how long that data is trusted before it is fetched again,…"
canonical: "https://airmarket.ai/app/data-loading"
---

[Air Market](/) / [Developer Tools](/category/devtools) / Data Loading

Skill by [TanStack](/@tanstack)

# Data Loading

Have a page's data ready before the page appears

## What this does

A page that renders first and fetches after gives people spinners and jumps. This covers loading a route's data as part of navigating to it, how long that data is trusted before it is fetched again, and what shows while you wait or when it breaks. It also covers letting slower data arrive later instead of holding the whole page.

### Top 3 things it does for you

- Load a route's data before it renders
- Show a loading state without it flickering
- Handle a load that fails, per route

## Information

**Data Loading at a glance**

|  |  |
| --- | --- |
| Kind | Skill |
| Publisher | [TanStack](/@tanstack) |
| Category | [Developer Tools](/category/devtools) |
| Works with | Agent Skills - an open standard supported by 40+ agents |
| Size | 14 KB |
| Licence | MIT |
| Repository | [TanStack/router](https://github.com/TanStack/router/tree/179d9b9b5eec50dc7833b4e2ef91b735d34bbc07/packages/router-core/skills/router-core/data-loading) |
| GitHub stars | 14,984 (as of Nov 2026) |

## Security report

**Verified.** AIR scanned this exact version of Data Loading and flagged nothing. AIR's verdict: **safe**.

**What Data Loading's check was run against**

|  |  |
| --- | --- |
| Commit | 179d9b9b5eec50dc7833b4e2ef91b735d34bbc07 |
| Content hash | d2b89bdae3c2842e051538bb5413d7bde298393c44739ae39c0d3e29f0fb95b1 |
| Files read | [Browse the files at this exact commit](https://github.com/TanStack/router/blob/179d9b9b5eec50dc7833b4e2ef91b735d34bbc07/packages/router-core/skills/router-core/data-loading/SKILL.md) |

A scan is named by the exact content it read, not by a version number. A different version is a different artifact, and nothing here applies to a version AIR has not scanned.

[Read the full security report for Data Loading](/security/data-loading)

## About Data Loading

The route loader option with loaderDeps for cache keys, and the staleTime, gcTime and defaultPreloadStaleTime settings that control stale-while-revalidate caching.

Covers what a visitor sees in between: pendingComponent with pendingMs and pendingMinMs for the waiting state, and errorComponent, onError and onCatch for a load that fails.

Also covers beforeLoad, the router context and createRootRouteWithContext dependency-injection pattern, router.invalidate for refreshing, and deferring slower data with unawaited promises resolved by the Await component.

## What's inside

- SKILL.md - instructions

## Questions

### Is Data Loading safe to install?

AIR scanned this exact version of Data Loading and flagged nothing. AIR's verdict: safe. The verdict is named by the content that was read, at commit 179d9b9b5eec, so it cannot drift onto a version nobody scanned. The full report is at https://airmarket.ai/security/data-loading.

### How do I install Data Loading?

Open https://airmarket.ai/app/data-loading on Air Market and use the install action: Air Market hands Claude a prompt naming this exact skill, and Claude sets it up. Source, pinned to the exact commit this listing describes: https://github.com/TanStack/router/tree/179d9b9b5eec50dc7833b4e2ef91b735d34bbc07/packages/router-core/skills/router-core/data-loading. Install from that link, not the branch.

## Related on Air Market

- [More Developer Tools listings](/category/devtools)
- [Everything by TanStack](/@tanstack)

---

Canonical URL: <https://airmarket.ai/app/data-loading>