aurorascharff · Jul 16, 2026 · Jul 16, 2026 · Jul 18, 2026 · Jul 18, 2026 · Jul 18, 2026
diff --git a/docs/01-app/01-getting-started/04-linking-and-navigating.mdx b/docs/01-app/01-getting-started/04-linking-and-navigating.mdx
@@ -3,6 +3,7 @@ title: Linking and Navigating
 description: Learn how the built-in navigation optimizations work, including prefetching, prerendering, and client-side navigation, and how to optimize navigation for dynamic routes and slow networks.
 related:
   links:
+    - app/guides/loading-ui
     - app/api-reference/components/link
     - app/api-reference/file-conventions/loading
     - app/guides/prefetching

diff --git a/docs/01-app/01-getting-started/06-fetching-data.mdx b/docs/01-app/01-getting-started/06-fetching-data.mdx
@@ -5,6 +5,7 @@ related:
   title: API Reference
   description: Learn more about the features mentioned in this page by reading the API Reference.
   links:
+    - app/guides/loading-ui
     - app/guides/data-security
     - app/api-reference/functions/fetch
     - app/api-reference/file-conventions/loading

diff --git a/docs/01-app/02-guides/instant-navigation.mdx b/docs/01-app/02-guides/instant-navigation.mdx
@@ -6,6 +6,7 @@ related:
   title: Learn more
   description: Explore the full instant API, caching, and revalidation.
   links:
+    - app/guides/loading-ui
     - app/api-reference/file-conventions/route-segment-config/instant
     - app/guides/runtime-prefetching
     - app/getting-started/caching

diff --git a/docs/01-app/02-guides/interactive-apps.mdx b/docs/01-app/02-guides/interactive-apps.mdx
@@ -5,6 +5,7 @@ nav_title: Interactive apps
 related:
   description: Learn more about the APIs used in this guide.
   links:
+    - app/guides/loading-ui
     - app/api-reference/functions/refresh
     - app/api-reference/directives/use-cache
     - app/api-reference/functions/cacheTag
@@ -15,7 +16,9 @@ When a user interaction requires server-side work, the result is not available i
 
 This guide adds responsive feedback to a task management app called _Taskboard_. Each step handles a different kind of pending work, from streaming slow reads to confirming mutations before the server responds.
 
-> **Good to know:** The patterns in this guide also improve [Core Web Vitals](https://web.dev/articles/vitals). Streaming with [`<Suspense>`](https://react.dev/reference/react/Suspense) lowers [FCP](https://web.dev/articles/fcp) and [LCP](https://web.dev/articles/lcp) by letting the shell paint while slow reads finish. Optimistic UI and transitions lower [INP](https://web.dev/articles/inp) by keeping the click frame fast. Prefetching the next route makes FCP, LCP, and INP on the destination page near-instant. These patterns help, but they don't replace the usual INP work: shipping less client JavaScript and avoiding blocking roundtrips during interactions.
+For the loading reveals themselves, such as sizing skeletons, choosing Suspense boundary granularity, and animating the swap to real content, see [Designing loading UI](/docs/app/guides/loading-ui).
+
+> **Good to know:** The patterns in this guide also improve [Core Web Vitals](https://web.dev/articles/vitals). Streaming with [`<Suspense>`](https://react.dev/reference/react/Suspense) lowers [FCP](https://web.dev/articles/fcp) and [LCP](https://web.dev/articles/lcp) by letting the shell paint while slow reads finish. Optimistic UI and transitions lower [INP](https://web.dev/articles/inp) by keeping the click frame fast. Prefetching the next route makes FCP, LCP, and INP on the destination page near-instant. These patterns help, but they don't replace the usual INP work: shipping less client JavaScript and avoiding blocking roundtrips during interactions. For [CLS](https://web.dev/articles/cls), keeping placeholders and streamed content from shifting the layout as it loads, see [Designing loading UI](/docs/app/guides/loading-ui).
 
 ## Example
 
@@ -53,7 +56,7 @@ import { getTask } from '@/features/task/task-queries'
 import { TaskDetail } from '@/features/task/components/task-detail'
 import { CommentSection } from '@/features/task/components/comment-section'
 
-export default async function TaskPage({ params }) {
+export default async function TaskPage({ params }: PageProps<'/task/[id]'>) {
   const { id } = await params
   const task = await getTask(id)
 
@@ -81,7 +84,7 @@ import {
   CommentSectionSkeleton,
 } from '@/features/task/components/comment-section'
 
-export default function TaskPage({ params }) {
+export default function TaskPage({ params }: PageProps<'/task/[id]'>) {
   return (
     <div>
       <Suspense fallback={<TaskDetailSkeleton />}>
@@ -693,7 +696,7 @@ const nextConfig: NextConfig = {
 export default nextConfig
 ```
 
-Enabling Cache Components applies prerender validation across every route, not just the ones in this step. A route that reads request data such as `cookies()`, `headers()`, or `searchParams` outside [`<Suspense>`](https://react.dev/reference/react/Suspense) now blocks prerendering and needs the Step 1 treatment. To turn it on in an existing app, see [Migrating to Cache Components](/docs/app/guides/migrating-to-cache-components).
+Enabling Cache Components applies prerender validation across every route, not only the ones in this step. A route that reads request data such as `cookies()`, `headers()`, or `searchParams` outside [`<Suspense>`](https://react.dev/reference/react/Suspense) now blocks prerendering and needs the Step 1 treatment. To turn it on in an existing app, see [Migrating to Cache Components](/docs/app/guides/migrating-to-cache-components).
 
 #### Cache reusable reads
 
@@ -743,7 +746,7 @@ If the destination's cached reads depend on request data (cookies, headers, `sea
 ```tsx filename="app/task/[id]/page.tsx"
 export const prefetch = 'allow-runtime'
 
-export default function TaskPage({ params }) {
+export default function TaskPage({ params }: PageProps<'/task/[id]'>) {
   // …
 }
 ```
@@ -770,10 +773,11 @@ The patterns in this guide combine a handful of primitives:
 | Reusable reads should survive across requests and stay fresh after writes | [`'use cache'`](/docs/app/api-reference/directives/use-cache) with [`cacheTag`](/docs/app/api-reference/functions/cacheTag), revalidated by [`updateTag`](/docs/app/api-reference/functions/updateTag) or [`revalidateTag`](/docs/app/api-reference/functions/revalidateTag) |
 | Navigation between pages of an interactive app should feel instant        | [`<Link>`](/docs/app/api-reference/components/link) prefetching with [Partial Prefetching](/docs/app/guides/adopting-partial-prefetching), and [Runtime prefetching](/docs/app/guides/runtime-prefetching) for request-dependent reads                                       |
 
-Most patterns mix two or more of these. Reach for whichever primitive fits the constraint you're solving.
+Most patterns mix two or more of these. Reach for whichever one fits the constraint you're solving.
 
 Related guides:
 
 - [Streaming](/docs/app/guides/streaming) for loading boundaries and `<Suspense>` patterns
 - [Instant Navigation](/docs/app/guides/instant-navigation) for validating that navigations stay instant
+- [Designing loading UI](/docs/app/guides/loading-ui) for sizing fallbacks and ordering their reveals
 - [View Transitions](/docs/app/guides/view-transitions) for animating state changes