Skip to content

Commit

Permalink
Store loading data in CacheNode
Browse files Browse the repository at this point in the history
  • Loading branch information
@ztanner
ztanner committed Mar 8, 2024
1 parent 22de327 commit 1be6d1b
Show file tree
Hide file tree
Showing 20 changed files with 101 additions and 25 deletions.
2 changes: 2 additions & 0 deletions packages/next/src/client/components/app-router.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -184,6 +184,7 @@ export function createEmptyCacheNode(): CacheNode {
prefetchRsc: null,
parallelRoutes: new Map(),
lazyDataResolved: false,
loading: null,
}
}

Expand Down Expand Up @@ -676,6 +677,7 @@ function Router({
// Root node always has `url`
// Provided in AppTreeContext to ensure it can be overwritten in layout-router
url: canonicalUrl,
loading: cache.loading,
}}
>
{content}
Expand Down
23 changes: 7 additions & 16 deletions packages/next/src/client/components/layout-router.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -356,6 +356,7 @@ function InnerLayoutRouter({
head: null,
parallelRoutes: new Map(),
lazyDataResolved: false,
loading: null,
}

/**
Expand Down Expand Up @@ -450,6 +451,7 @@ function InnerLayoutRouter({
childNodes: childNode.parallelRoutes,
// TODO-APP: overriding of url for parallel routes
url: url,
loading: childNode.loading,
}}
>
{resolvedRsc}
Expand All @@ -468,15 +470,13 @@ function LoadingBoundary({
loading,
loadingStyles,
loadingScripts,
hasLoading,
}: {
children: React.ReactNode
loading?: React.ReactNode
loadingStyles?: React.ReactNode
loadingScripts?: React.ReactNode
hasLoading: boolean
}): JSX.Element {
if (hasLoading) {
if (loading) {
return (
<Suspense
fallback={
Expand Down Expand Up @@ -507,10 +507,6 @@ export default function OuterLayoutRouter({
errorScripts,
templateStyles,
templateScripts,
loading,
loadingStyles,
loadingScripts,
hasLoading,
template,
notFound,
notFoundStyles,
Expand All @@ -524,10 +520,6 @@ export default function OuterLayoutRouter({
templateStyles: React.ReactNode | undefined
templateScripts: React.ReactNode | undefined
template: React.ReactNode
loading: React.ReactNode | undefined
loadingStyles: React.ReactNode | undefined
loadingScripts: React.ReactNode | undefined
hasLoading: boolean
notFound: React.ReactNode | undefined
notFoundStyles: React.ReactNode | undefined
styles?: React.ReactNode
Expand All @@ -537,7 +529,7 @@ export default function OuterLayoutRouter({
throw new Error('invariant expected layout router to be mounted')
}

const { childNodes, tree, url } = context
const { childNodes, tree, url, loading } = context

// Get the current parallelRouter cache node
let childNodesForParallelRouter = childNodes.get(parallelRouterKey)
Expand Down Expand Up @@ -588,10 +580,9 @@ export default function OuterLayoutRouter({
errorScripts={errorScripts}
>
<LoadingBoundary
hasLoading={hasLoading}
loading={loading}
loadingStyles={loadingStyles}
loadingScripts={loadingScripts}
loading={loading?.[0]}
loadingStyles={loading?.[1]}
loadingScripts={loading?.[2]}
>
<NotFoundBoundary
notFound={notFound}
Expand Down
3 changes: 3 additions & 0 deletions packages/next/src/client/components/router-reducer/apply-flight-data.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@ export function applyFlightData(

if (flightDataPath.length === 3) {
const rsc = cacheNodeSeedData[2]
const loading = cacheNodeSeedData[3]
cache.loading = loading
cache.rsc = rsc
// This is a PPR-only field. When PPR is enabled, we shouldn't hit
// this path during a navigation, but until PPR is fully implemented
Expand All @@ -43,6 +45,7 @@ export function applyFlightData(
// PPR value, if it exists.
cache.prefetchRsc = existingCache.prefetchRsc
cache.parallelRoutes = new Map(existingCache.parallelRoutes)
cache.loading = existingCache.loading
// Create a copy of the existing cache with the rsc applied.
fillCacheWithNewSubTreeData(
cache,
Expand Down
7 changes: 5 additions & 2 deletions packages/next/src/client/components/router-reducer/create-initial-router-state.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ describe('createInitialRouterState', () => {
buildId,
initialTree,
initialCanonicalUrl,
initialSeedData: ['', {}, children],
initialSeedData: ['', {}, children, null],
initialParallelRoutes,
location: new URL('/linking', 'https://localhost') as any,
initialHead: <title>Test</title>,
Expand All @@ -48,7 +48,7 @@ describe('createInitialRouterState', () => {
buildId,
initialTree,
initialCanonicalUrl,
initialSeedData: ['', {}, children],
initialSeedData: ['', {}, children, null],
initialParallelRoutes,
location: new URL('/linking', 'https://localhost') as any,
initialHead: <title>Test</title>,
Expand All @@ -58,6 +58,7 @@ describe('createInitialRouterState', () => {
lazyData: null,
rsc: children,
prefetchRsc: null,
loading: null,
parallelRoutes: new Map([
[
'children',
Expand All @@ -76,6 +77,7 @@ describe('createInitialRouterState', () => {
rsc: null,
prefetchRsc: null,
parallelRoutes: new Map(),
loading: null,
head: <title>Test</title>,
},
],
Expand All @@ -85,6 +87,7 @@ describe('createInitialRouterState', () => {
lazyData: null,
rsc: null,
prefetchRsc: null,
loading: null,
},
],
]),
Expand Down
1 change: 1 addition & 0 deletions packages/next/src/client/components/router-reducer/create-initial-router-state.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ export function createInitialRouterState({
prefetchRsc: null,
// The cache gets seeded during the first render. `initialParallelRoutes` ensures the cache from the first render is there during the second render.
parallelRoutes: isServer ? new Map() : initialParallelRoutes,
loading: initialSeedData[3],
}

const prefetchCache = new Map<string, PrefetchCacheEntry>()
Expand Down
8 changes: 8 additions & 0 deletions packages/next/src/client/components/router-reducer/fill-cache-with-data-property.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,11 +26,13 @@ describe('fillCacheWithDataProperty', () => {
rsc: null,
prefetchRsc: null,
parallelRoutes: new Map(),
loading: null,
}
const existingCache: CacheNode = {
lazyData: null,
rsc: <>Root layout</>,
prefetchRsc: null,
loading: null,
parallelRoutes: new Map([
[
'children',
Expand All @@ -41,6 +43,7 @@ describe('fillCacheWithDataProperty', () => {
lazyData: null,
rsc: <>Linking</>,
prefetchRsc: null,
loading: null,
parallelRoutes: new Map([
[
'children',
Expand All @@ -52,6 +55,7 @@ describe('fillCacheWithDataProperty', () => {
rsc: <>Page</>,
prefetchRsc: null,
parallelRoutes: new Map(),
loading: null,
},
],
]),
Expand All @@ -71,14 +75,17 @@ describe('fillCacheWithDataProperty', () => {
expect(cache).toMatchInlineSnapshot(`
{
"lazyData": null,
"loading": null,
"parallelRoutes": Map {
"children" => Map {
"linking" => {
"lazyData": null,
"loading": null,
"parallelRoutes": Map {
"children" => Map {
"" => {
"lazyData": null,
"loading": null,
"parallelRoutes": Map {},
"prefetchRsc": null,
"rsc": <React.Fragment>
Expand All @@ -94,6 +101,7 @@ describe('fillCacheWithDataProperty', () => {
},
"dashboard" => {
"lazyData": Promise {},
"loading": null,
"parallelRoutes": Map {},
"prefetchRsc": null,
"rsc": null,
Expand Down
3 changes: 3 additions & 0 deletions packages/next/src/client/components/router-reducer/fill-cache-with-data-property.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ export function fillCacheWithDataProperty(
rsc: null,
prefetchRsc: null,
parallelRoutes: new Map(),
loading: null,
})
}
return
Expand All @@ -55,6 +56,7 @@ export function fillCacheWithDataProperty(
rsc: null,
prefetchRsc: null,
parallelRoutes: new Map(),
loading: null,
})
}
return
Expand All @@ -66,6 +68,7 @@ export function fillCacheWithDataProperty(
rsc: childCacheNode.rsc,
prefetchRsc: childCacheNode.prefetchRsc,
parallelRoutes: new Map(childCacheNode.parallelRoutes),
loading: childCacheNode.loading,
} as CacheNode
childSegmentMap.set(cacheKey, childCacheNode)
}
Expand Down
9 changes: 9 additions & 0 deletions packages/next/src/client/components/router-reducer/fill-cache-with-new-subtree-data.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,12 +30,14 @@ describe('fillCacheWithNewSubtreeData', () => {
lazyData: null,
rsc: null,
prefetchRsc: null,
loading: null,
parallelRoutes: new Map(),
}
const existingCache: CacheNode = {
lazyData: null,
rsc: <>Root layout</>,
prefetchRsc: null,
loading: null,
parallelRoutes: new Map([
[
'children',
Expand All @@ -46,6 +48,7 @@ describe('fillCacheWithNewSubtreeData', () => {
lazyData: null,
rsc: <>Linking</>,
prefetchRsc: null,
loading: null,
parallelRoutes: new Map([
[
'children',
Expand All @@ -56,6 +59,7 @@ describe('fillCacheWithNewSubtreeData', () => {
lazyData: null,
rsc: <>Page</>,
prefetchRsc: null,
loading: null,
parallelRoutes: new Map(),
},
],
Expand Down Expand Up @@ -84,6 +88,7 @@ describe('fillCacheWithNewSubtreeData', () => {
lazyData: null,
rsc: null,
prefetchRsc: null,
loading: null,
parallelRoutes: new Map([
[
'children',
Expand All @@ -94,6 +99,7 @@ describe('fillCacheWithNewSubtreeData', () => {
lazyData: null,
rsc: <>Linking</>,
prefetchRsc: null,
loading: null,
parallelRoutes: new Map([
[
'children',
Expand All @@ -105,13 +111,15 @@ describe('fillCacheWithNewSubtreeData', () => {
lazyData: null,
rsc: <>Page</>,
prefetchRsc: null,
loading: null,
parallelRoutes: new Map(),
},
],
[
'about',
{
lazyData: null,
loading: null,
parallelRoutes: new Map([
[
'children',
Expand All @@ -123,6 +131,7 @@ describe('fillCacheWithNewSubtreeData', () => {
rsc: null,
prefetchRsc: null,
parallelRoutes: new Map(),
loading: null,
head: (
<>
<title>Head Injected!</title>
Expand Down
3 changes: 3 additions & 0 deletions packages/next/src/client/components/router-reducer/fill-cache-with-new-subtree-data.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,10 +48,12 @@ export function fillCacheWithNewSubTreeData(
) {
const seedData: CacheNodeSeedData = flightDataPath[3]
const rsc = seedData[2]
const loading = seedData[3]
childCacheNode = {
lazyData: null,
rsc,
prefetchRsc: null,
loading,
// Ensure segments other than the one we got data for are preserved.
parallelRoutes: existingChildCacheNode
? new Map(existingChildCacheNode.parallelRoutes)
Expand Down Expand Up @@ -92,6 +94,7 @@ export function fillCacheWithNewSubTreeData(
rsc: childCacheNode.rsc,
prefetchRsc: childCacheNode.prefetchRsc,
parallelRoutes: new Map(childCacheNode.parallelRoutes),
loading: childCacheNode.loading,
} as CacheNode
childSegmentMap.set(cacheKey, childCacheNode)
}
Expand Down
Loading

0 comments on commit 1be6d1b

Please sign in to comment.