From 3a604233b70dc087d44f96110ff1cb59bd134904 Mon Sep 17 00:00:00 2001
From: Valerii Petryniak <valerii15298@gmail.com>
Date: Tue, 25 Feb 2025 03:04:05 +0200
Subject: [PATCH] pending component now shown bug reproduction

---
 examples/react/basic-file-based/src/main.tsx  |  5 +-
 .../basic-file-based/src/routeTree.gen.ts     | 78 +++++--------------
 .../src/routes/posts.index.tsx                |  3 +
 .../basic-file-based/src/routes/posts.tsx     | 39 ----------
 4 files changed, 28 insertions(+), 97 deletions(-)
 delete mode 100644 examples/react/basic-file-based/src/routes/posts.tsx

diff --git a/examples/react/basic-file-based/src/main.tsx b/examples/react/basic-file-based/src/main.tsx
index 3dc73ddd51..f9888fe3b5 100644
--- a/examples/react/basic-file-based/src/main.tsx
+++ b/examples/react/basic-file-based/src/main.tsx
@@ -7,9 +7,12 @@ import './styles.css'
 // Set up a Router instance
 const router = createRouter({
   routeTree,
-  defaultPreload: 'intent',
+  // defaultPreload: 'intent',
   defaultStaleTime: 5000,
   scrollRestoration: true,
+  defaultPendingMs: 0,
+  defaultPendingMinMs: 0,
+  defaultPendingComponent: () => <div>Loading...</div>,
 })
 
 // Register things for typesafety
diff --git a/examples/react/basic-file-based/src/routeTree.gen.ts b/examples/react/basic-file-based/src/routeTree.gen.ts
index 0c13b4bffb..3a71cafe2b 100644
--- a/examples/react/basic-file-based/src/routeTree.gen.ts
+++ b/examples/react/basic-file-based/src/routeTree.gen.ts
@@ -11,7 +11,6 @@
 // Import Routes
 
 import { Route as rootRoute } from './routes/__root'
-import { Route as PostsImport } from './routes/posts'
 import { Route as AnchorImport } from './routes/anchor'
 import { Route as LayoutImport } from './routes/_layout'
 import { Route as IndexImport } from './routes/index'
@@ -23,12 +22,6 @@ import { Route as LayoutLayout2LayoutAImport } from './routes/_layout/_layout-2/
 
 // Create/Update Routes
 
-const PostsRoute = PostsImport.update({
-  id: '/posts',
-  path: '/posts',
-  getParentRoute: () => rootRoute,
-} as any)
-
 const AnchorRoute = AnchorImport.update({
   id: '/anchor',
   path: '/anchor',
@@ -47,15 +40,15 @@ const IndexRoute = IndexImport.update({
 } as any)
 
 const PostsIndexRoute = PostsIndexImport.update({
-  id: '/',
-  path: '/',
-  getParentRoute: () => PostsRoute,
+  id: '/posts/',
+  path: '/posts/',
+  getParentRoute: () => rootRoute,
 } as any)
 
 const PostsPostIdRoute = PostsPostIdImport.update({
-  id: '/$postId',
-  path: '/$postId',
-  getParentRoute: () => PostsRoute,
+  id: '/posts/$postId',
+  path: '/posts/$postId',
+  getParentRoute: () => rootRoute,
 } as any)
 
 const LayoutLayout2Route = LayoutLayout2Import.update({
@@ -100,13 +93,6 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AnchorImport
       parentRoute: typeof rootRoute
     }
-    '/posts': {
-      id: '/posts'
-      path: '/posts'
-      fullPath: '/posts'
-      preLoaderRoute: typeof PostsImport
-      parentRoute: typeof rootRoute
-    }
     '/_layout/_layout-2': {
       id: '/_layout/_layout-2'
       path: ''
@@ -116,17 +102,17 @@ declare module '@tanstack/react-router' {
     }
     '/posts/$postId': {
       id: '/posts/$postId'
-      path: '/$postId'
+      path: '/posts/$postId'
       fullPath: '/posts/$postId'
       preLoaderRoute: typeof PostsPostIdImport
-      parentRoute: typeof PostsImport
+      parentRoute: typeof rootRoute
     }
     '/posts/': {
       id: '/posts/'
-      path: '/'
-      fullPath: '/posts/'
+      path: '/posts'
+      fullPath: '/posts'
       preLoaderRoute: typeof PostsIndexImport
-      parentRoute: typeof PostsImport
+      parentRoute: typeof rootRoute
     }
     '/_layout/_layout-2/layout-a': {
       id: '/_layout/_layout-2/layout-a'
@@ -172,25 +158,12 @@ const LayoutRouteChildren: LayoutRouteChildren = {
 const LayoutRouteWithChildren =
   LayoutRoute._addFileChildren(LayoutRouteChildren)
 
-interface PostsRouteChildren {
-  PostsPostIdRoute: typeof PostsPostIdRoute
-  PostsIndexRoute: typeof PostsIndexRoute
-}
-
-const PostsRouteChildren: PostsRouteChildren = {
-  PostsPostIdRoute: PostsPostIdRoute,
-  PostsIndexRoute: PostsIndexRoute,
-}
-
-const PostsRouteWithChildren = PostsRoute._addFileChildren(PostsRouteChildren)
-
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
   '': typeof LayoutLayout2RouteWithChildren
   '/anchor': typeof AnchorRoute
-  '/posts': typeof PostsRouteWithChildren
   '/posts/$postId': typeof PostsPostIdRoute
-  '/posts/': typeof PostsIndexRoute
+  '/posts': typeof PostsIndexRoute
   '/layout-a': typeof LayoutLayout2LayoutARoute
   '/layout-b': typeof LayoutLayout2LayoutBRoute
 }
@@ -210,7 +183,6 @@ export interface FileRoutesById {
   '/': typeof IndexRoute
   '/_layout': typeof LayoutRouteWithChildren
   '/anchor': typeof AnchorRoute
-  '/posts': typeof PostsRouteWithChildren
   '/_layout/_layout-2': typeof LayoutLayout2RouteWithChildren
   '/posts/$postId': typeof PostsPostIdRoute
   '/posts/': typeof PostsIndexRoute
@@ -224,9 +196,8 @@ export interface FileRouteTypes {
     | '/'
     | ''
     | '/anchor'
-    | '/posts'
     | '/posts/$postId'
-    | '/posts/'
+    | '/posts'
     | '/layout-a'
     | '/layout-b'
   fileRoutesByTo: FileRoutesByTo
@@ -243,7 +214,6 @@ export interface FileRouteTypes {
     | '/'
     | '/_layout'
     | '/anchor'
-    | '/posts'
     | '/_layout/_layout-2'
     | '/posts/$postId'
     | '/posts/'
@@ -256,14 +226,16 @@ export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
   LayoutRoute: typeof LayoutRouteWithChildren
   AnchorRoute: typeof AnchorRoute
-  PostsRoute: typeof PostsRouteWithChildren
+  PostsPostIdRoute: typeof PostsPostIdRoute
+  PostsIndexRoute: typeof PostsIndexRoute
 }
 
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
   LayoutRoute: LayoutRouteWithChildren,
   AnchorRoute: AnchorRoute,
-  PostsRoute: PostsRouteWithChildren,
+  PostsPostIdRoute: PostsPostIdRoute,
+  PostsIndexRoute: PostsIndexRoute,
 }
 
 export const routeTree = rootRoute
@@ -279,7 +251,8 @@ export const routeTree = rootRoute
         "/",
         "/_layout",
         "/anchor",
-        "/posts"
+        "/posts/$postId",
+        "/posts/"
       ]
     },
     "/": {
@@ -294,13 +267,6 @@ export const routeTree = rootRoute
     "/anchor": {
       "filePath": "anchor.tsx"
     },
-    "/posts": {
-      "filePath": "posts.tsx",
-      "children": [
-        "/posts/$postId",
-        "/posts/"
-      ]
-    },
     "/_layout/_layout-2": {
       "filePath": "_layout/_layout-2.tsx",
       "parent": "/_layout",
@@ -310,12 +276,10 @@ export const routeTree = rootRoute
       ]
     },
     "/posts/$postId": {
-      "filePath": "posts.$postId.tsx",
-      "parent": "/posts"
+      "filePath": "posts.$postId.tsx"
     },
     "/posts/": {
-      "filePath": "posts.index.tsx",
-      "parent": "/posts"
+      "filePath": "posts.index.tsx"
     },
     "/_layout/_layout-2/layout-a": {
       "filePath": "_layout/_layout-2/layout-a.tsx",
diff --git a/examples/react/basic-file-based/src/routes/posts.index.tsx b/examples/react/basic-file-based/src/routes/posts.index.tsx
index 056433ca0a..b9d194af8b 100644
--- a/examples/react/basic-file-based/src/routes/posts.index.tsx
+++ b/examples/react/basic-file-based/src/routes/posts.index.tsx
@@ -3,6 +3,9 @@ import { createFileRoute } from '@tanstack/react-router'
 
 export const Route = createFileRoute('/posts/')({
   component: PostsIndexComponent,
+  // // uncomment one of the next lines to fix the issue
+  // beforeLoad: () => {},
+  // loader: () => {}
 })
 
 function PostsIndexComponent() {
diff --git a/examples/react/basic-file-based/src/routes/posts.tsx b/examples/react/basic-file-based/src/routes/posts.tsx
deleted file mode 100644
index c7a09ed7f8..0000000000
--- a/examples/react/basic-file-based/src/routes/posts.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import * as React from 'react'
-import { Link, Outlet, createFileRoute } from '@tanstack/react-router'
-import { fetchPosts } from '../posts'
-
-export const Route = createFileRoute('/posts')({
-  loader: fetchPosts,
-  component: PostsComponent,
-})
-
-function PostsComponent() {
-  const posts = Route.useLoaderData()
-
-  return (
-    <div className="p-2 flex gap-2">
-      <ul className="list-disc pl-4">
-        {[...posts, { id: 'i-do-not-exist', title: 'Non-existent Post' }].map(
-          (post) => {
-            return (
-              <li key={post.id} className="whitespace-nowrap">
-                <Link
-                  to="/posts/$postId"
-                  params={{
-                    postId: post.id,
-                  }}
-                  className="block py-1 text-blue-600 hover:opacity-75"
-                  activeProps={{ className: 'font-bold underline' }}
-                >
-                  <div>{post.title.substring(0, 20)}</div>
-                </Link>
-              </li>
-            )
-          },
-        )}
-      </ul>
-      <hr />
-      <Outlet />
-    </div>
-  )
-}