From a92a3b6d3a88bab99adb40a225e9da7fa093bf55 Mon Sep 17 00:00:00 2001
From: Tim Neutkens <tim@timneutkens.nl>
Date: Tue, 27 Sep 2022 10:46:30 +0200
Subject: [PATCH] Handle loading returning undefined (#40938)

Since React 18 returning `undefined` from components is allowed which renders to `undefined` in the RSC response so we need a separate prop to know if the loading boundary was provided.

Thanks to @finn-orsini who reported this problem.



## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have a helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have a helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `pnpm lint`
- [ ] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
---
 packages/next/client/components/layout-router.client.tsx | 9 +++++++--
 packages/next/server/app-render.tsx                      | 3 +++
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/next/client/components/layout-router.client.tsx b/packages/next/client/components/layout-router.client.tsx
index f79d188ef0b7..ed96a6fb390f 100644
--- a/packages/next/client/components/layout-router.client.tsx
+++ b/packages/next/client/components/layout-router.client.tsx
@@ -278,11 +278,14 @@ export function InnerLayoutRouter({
 function LoadingBoundary({
   children,
   loading,
+  hasLoading,
 }: {
   children: React.ReactNode
   loading?: React.ReactNode
+  hasLoading: boolean
 }): JSX.Element {
-  if (loading) {
+  if (hasLoading) {
+    // @ts-expect-error TODO-APP: React.Suspense fallback type is wrong
     return <React.Suspense fallback={loading}>{children}</React.Suspense>
   }
 
@@ -450,6 +453,7 @@ export default function OuterLayoutRouter({
   childProp,
   error,
   loading,
+  hasLoading,
   template,
   notFound,
   rootLayoutIncluded,
@@ -460,6 +464,7 @@ export default function OuterLayoutRouter({
   error: ErrorComponent
   template: React.ReactNode
   loading: React.ReactNode | undefined
+  hasLoading: boolean
   notFound: React.ReactNode | undefined
   rootLayoutIncluded: boolean
 }) {
@@ -510,7 +515,7 @@ export default function OuterLayoutRouter({
             key={preservedSegment}
             value={
               <ErrorBoundary errorComponent={error}>
-                <LoadingBoundary loading={loading}>
+                <LoadingBoundary hasLoading={hasLoading} loading={loading}>
                   <NotFoundBoundary notFound={notFound}>
                     <RedirectBoundary>
                       <InnerLayoutRouter
diff --git a/packages/next/server/app-render.tsx b/packages/next/server/app-render.tsx
index 3d1120d96590..6b1f8d9572ff 100644
--- a/packages/next/server/app-render.tsx
+++ b/packages/next/server/app-render.tsx
@@ -942,6 +942,7 @@ export async function renderToHTMLOrFlight(
                   parallelRouterKey={parallelRouteKey}
                   segmentPath={createSegmentPath(currentSegmentPath)}
                   loading={Loading ? <Loading /> : undefined}
+                  hasLoading={Boolean(Loading)}
                   error={ErrorComponent}
                   template={
                     <Template>
@@ -982,6 +983,8 @@ export async function renderToHTMLOrFlight(
                 segmentPath={segmentPath}
                 error={ErrorComponent}
                 loading={Loading ? <Loading /> : undefined}
+                // TODO-APP: Add test for loading returning `undefined`. This currently can't be tested as the `webdriver()` tab will wait for the full page to load before returning.
+                hasLoading={Boolean(Loading)}
                 template={
                   <Template>
                     <RenderFromTemplateContext />