From b494751d8257ceaaa4213fff0535adb93ca48060 Mon Sep 17 00:00:00 2001
From: Manuel Schiller <manuel.schiller@caligano.de>
Date: Fri, 26 Jul 2024 23:16:44 +0200
Subject: [PATCH 1/2] fix: prefer pendingComponent over defaultPendingComponent
 when wrapping Outlet in Suspense

---
 packages/react-router/src/Match.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/react-router/src/Match.tsx b/packages/react-router/src/Match.tsx
index 24cfe06810..4bf0e61b73 100644
--- a/packages/react-router/src/Match.tsx
+++ b/packages/react-router/src/Match.tsx
@@ -291,11 +291,12 @@ export const Outlet = React.memo(function OutletImpl() {
 
   const nextMatch = <Match matchId={childMatchId} />
 
-  const pendingElement = router.options.defaultPendingComponent ? (
-    <router.options.defaultPendingComponent />
-  ) : null
-
   if (matchId === rootRouteId) {
+    const PendingComponent =
+      route.options.pendingComponent ?? router.options.defaultPendingComponent
+
+    const pendingElement = PendingComponent ? <PendingComponent /> : null
+
     return (
       <React.Suspense fallback={pendingElement}>{nextMatch}</React.Suspense>
     )

From bc811688fd3e9e8d549a441a5cf37f90d2694bb8 Mon Sep 17 00:00:00 2001
From: Manuel Schiller <manuel.schiller@caligano.de>
Date: Sat, 27 Jul 2024 12:04:09 +0200
Subject: [PATCH 2/2] do not wrap root outlet in suspense if neither
 pendingComponent nor defaultPendingComponent are configured

---
 packages/react-router/src/Match.tsx | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/react-router/src/Match.tsx b/packages/react-router/src/Match.tsx
index 4bf0e61b73..58f00e8e77 100644
--- a/packages/react-router/src/Match.tsx
+++ b/packages/react-router/src/Match.tsx
@@ -294,12 +294,13 @@ export const Outlet = React.memo(function OutletImpl() {
   if (matchId === rootRouteId) {
     const PendingComponent =
       route.options.pendingComponent ?? router.options.defaultPendingComponent
-
-    const pendingElement = PendingComponent ? <PendingComponent /> : null
-
-    return (
-      <React.Suspense fallback={pendingElement}>{nextMatch}</React.Suspense>
-    )
+    if (PendingComponent !== undefined) {
+      return (
+        <React.Suspense fallback={<PendingComponent />}>
+          {nextMatch}
+        </React.Suspense>
+      )
+    }
   }
 
   return nextMatch