Repository navigation
docs: add Designing loading UI guide - #95859
aurorascharff wants to merge 9 commits into
Conversation
Add a guide for designing loading states: choosing between a fallback and a pending indicator, sizing skeletons to keep CLS at zero, holding previous results during updates with transitions, revealing variable-height sections top-down with nested Suspense, and crossfading reveals with ViewTransition. Cross-links the profiling guide for finding boundaries that gate too much, and adds CLS cross-links to the interactive apps guide.
Failing test suitesCommit: 39b996a | About building and testing Next.js
Expand output● app-dir types › should check types
Expand output● app-root-param-getters - typecheck (simple) › should pass typecheck with generated root-params types ● app-root-param-getters - typecheck (multiple-roots) › should pass typecheck with generated root-params types
Expand output● typed-routes › should have passing tsc after start
Expand output● actions-streaming › actions returning a ReadableStream › should properly stream the response without buffering
Expand output● actions-unused-args › should not call server actions with unused arguments
Expand output● adapter-dynamic-metadata › should classify dynamic metadata routes as app routes in adapter outputs ● adapter-dynamic-metadata › should serve dynamic metadata routes
Expand output● app-root-param-getters - typecheck (simple) › should pass typecheck with generated root-params types ● app-root-param-getters - typecheck (multiple-roots) › should pass typecheck with generated root-params types
Expand output● app-root-param-getters - cache - at runtime › should allow using root params within a "use cache" - start ● app-root-param-getters - cache - at runtime › should create separate cache entries for different root params ● app-root-param-getters - cache - at runtime › should resume with the same cached data that was prerendered ● app-root-param-getters - cache - at runtime › should handle conditional root param reads based on arguments ● app-root-param-getters - cache - at runtime › should handle root param reads introduced after revalidation ● app-root-param-getters - cache - at runtime › should handle root param reads conditional on another root param value ● app-root-param-getters - cache - at runtime › should error when using root params within ● app-root-param-getters - cache - at runtime › should error when using root params in "use cache" nested inside unstable_cache - start ● app-root-param-getters - private cache › should allow using root params within a "use cache: private" - start ● app-root-param-getters - cache - at build › should allow using root params within a "use cache" at build time ● app-root-param-getters - cache dedup with root params › should dedupe same root params and isolate different root params ● app-root-param-getters - cache dedup with root params › should dedupe same root params and isolate different root params for private caches
Expand output● client-reference-chunking › should use the same chunks for client references across routes
Expand output● css-media-query › should preserve max-width media query syntax instead of transpiling to range syntax ● css-media-query › should apply the correct styles based on media query
Expand output● css-modules-pure-no-check › should apply styles correctly ● css-modules-pure-no-check › should have emitted a CSS file
Expand output● global-not-found - basic › should render global-not-found for 404 ● global-not-found - basic › should ssr global-not-found for 404 ● global-not-found - basic › should render not-found boundary when calling notFound() in a page
Expand output● hello-world › should work using cheerio ● hello-world › should work using browser ● hello-world › should work with html ● hello-world › should work with fetch
Expand output● partial prefetching - deep subtree-hint propagation › downgrades a prefetch={true} to a partial prefetch when a deeply nested segment opts in
Expand output● app-dir - reexport-client-component-metadata › should render the page metadata if override ● app-dir - reexport-client-component-metadata › should render the layout metadata if not override
Expand output● root-layout-redirect › should work using browser
Expand output● Scss Mixins › should work using browser
Expand output● dynamic on hover › prefetches the dynamic data for a Link on hover
Expand output● max prefetch inlining › bundles all segment data into a single request per route ● max prefetch inlining › works with dynamic routes ● max prefetch inlining › deduplicates inlined prefetch requests for the same route
Expand output● optimistic routing - parallel slot catch-all regression › does not match a parallel-slot catch-all for an unrelated sibling URL
Expand output● optimistic routing - rewrite detection regression › does not predict from a rewrite that shortens the URL ● optimistic routing - rewrite detection regression › does not predict from a rewrite to a static-sibling URL ● optimistic routing - rewrite detection regression › does not predict when the rewrite hides a deeper static segment
Expand output● segment cache prefetch fallback retry › does not retry a prefetch that received a concrete (non-fallback) response ● segment cache prefetch fallback retry › does not retry a fallback shell for a route that can never be upgraded ● segment cache prefetch fallback retry › picks up the upgraded version on retry once the server regenerates the ISR entry ... truncated to fit in one GitHub comment ... |
Stats skippedCommit: ab07db4 |
An aria-hidden skeleton gains nothing from ul/li semantics (screen readers skip the subtree); the geometry that prevents layout shift comes from the classes. Switch to plain divs and note why.
1 participant
Adds the Designing loading UI guide (DOC-3272), built around the team directory demo (source):
instant()<ViewTransition>, keeping animations on the compositorAlso adds CLS cross-links to Building interactive apps.
Based on #95568 for the profiling-guide links; lands after it. The current lint failure is inherited from the base branch (alex warnings in
skills/next-performance-profiling/SKILL.md).