From c4e6bf2ba0d42462c4ecf092dd5ebef494e8e78f Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Fri, 15 Jul 2022 16:28:39 +0200 Subject: [PATCH] Fix check for optimistic routing and handle loading in server-patch --- packages/next/client/components/reducer.ts | 46 ++++++++++++---------- 1 file changed, 25 insertions(+), 21 deletions(-) diff --git a/packages/next/client/components/reducer.ts b/packages/next/client/components/reducer.ts index abb2b82c3607..2767862c24b5 100644 --- a/packages/next/client/components/reducer.ts +++ b/packages/next/client/components/reducer.ts @@ -154,27 +154,28 @@ const canOptimisticallyRender = ( ): boolean => { const segment = segments[0] const isLastSegment = segments.length === 1 - const [existingSegment, existingParallelRoutes, , , loadingMarker] = flightRouterState + // If the segments mismatch we can't resolve deeper into the tree + const segmentMatches = matchSegment(existingSegment, segment) - const hasLoading = loadingMarker === 'loading' + // If the segment mismatches we can't assume this level has loading + if (!segmentMatches) { + return false + } + const hasLoading = loadingMarker === 'loading' // If the tree path holds at least one loading.js it will be optimistic if (hasLoading) { return true } - // Above already catches the last segment case where `hasLoading` is true, so in this case it would always be `false`. if (isLastSegment) { return false } - // If the segments mismatch we can't resolve deeper into the tree - const segmentMatches = matchSegment(existingSegment, segment) - // If the existingParallelRoutes does not have a `children` parallelRouteKey we can't resolve deeper into the tree - if (!segmentMatches || !existingParallelRoutes.children) { + if (!existingParallelRoutes.children) { return hasLoading } @@ -188,9 +189,9 @@ const canOptimisticallyRender = ( const createOptimisticTree = ( segments: string[], flightRouterState: FlightRouterState | null, - isFirstSegment: boolean, + _isFirstSegment: boolean, parentRefetch: boolean, - href?: string + _href?: string ): FlightRouterState => { const [existingSegment, existingParallelRoutes] = flightRouterState || [ null, @@ -232,10 +233,11 @@ const createOptimisticTree = ( result[3] = 'refetch' } + // TODO-APP: Revisit // Add url into the tree - if (isFirstSegment) { - result[2] = href - } + // if (isFirstSegment) { + // result[2] = href + // } // Copy the loading flag from existing tree if (flightRouterState && flightRouterState[4]) { @@ -250,15 +252,16 @@ const walkTreeWithFlightDataPath = ( flightRouterState: FlightRouterState, treePatch: FlightRouterState ): FlightRouterState => { - const [segment, parallelRoutes, url] = flightRouterState + const [segment, parallelRoutes /* , url */] = flightRouterState // Root refresh if (flightSegmentPath.length === 1) { const tree: FlightRouterState = [...treePatch] - if (url) { - tree[2] = url - } + // TODO-APP: revisit + // if (url) { + // tree[2] = url + // } return tree } @@ -286,13 +289,14 @@ const walkTreeWithFlightDataPath = ( }, ] - if (url) { - tree[2] = url - } + // TODO-APP: Revisit + // if (url) { + // tree[2] = url + // } // Copy loading flag - if (flightSegmentPath[4]) { - tree[4] = flightSegmentPath[4] + if (flightRouterState[4]) { + tree[4] = flightRouterState[4] } return tree