Loading States

While a route's loader runs or its code chunk downloads, TanStack Router displays a pending component. VitNode provides pre-built skeleton layouts matching common UI patterns.

Quick start

1. In a Plugin Component (Suspense)

Plugin routes load dynamically. Use React Suspense with VitNode's pending skeletons:

plugins/blog/src/routes/posts-page.tsx

import { FeedPendingSkeleton } from "@vitnode/core/tanstack/pending"
import React, { Suspense } from "react"

const PostsList = () => {
  // Data loading component
  return <div>Posts List</div>
}

const PostsPage = () => (
  <Suspense fallback={<FeedPendingSkeleton />}>
    <PostsList />
  </Suspense>
)

export default PostsPage

2. In an Application Route File

Attach pendingComponent directly to createFileRoute:

apps/web/src/routes/_main/posts.tsx

import { createFileRoute } from "@tanstack/react-router"
import { FeedPendingSkeleton } from "@vitnode/core/tanstack/pending"

export const Route = createFileRoute("/_main/posts")({
  loader: async () => await fetchPosts(),
  component: PostsPage,
  pendingComponent: FeedPendingSkeleton, 
})

Pre-Built Pending Skeletons

Import these shapes from @vitnode/core/tanstack/pending:

Shape	Layout	Typical Use Case
`FeedPendingSkeleton`	Card timeline with avatars	Activity feeds, search results, articles
`TablePendingSkeleton`	Toolbar, table header, and rows	Data tables, AdminCP lists, files
`FormPendingSkeleton`	Card with inputs and button actions	Settings pages, edit dialogs
`CardsPendingSkeleton`	Responsive 1/2/3 column card grid	Dashboard overview, integrations
`AuthPendingSkeleton`	Centered authentication card	Sign in, registration, password reset
`RoutePendingSpinner`	Centered accessible spinner	Minimalistic or unconventional pages