diff --git a/examples/react/basic-ssr/src/routeConfig.tsx b/examples/react/basic-ssr/src/routeConfig.tsx
index 29ef7e4a45..2c7010c0a0 100644
--- a/examples/react/basic-ssr/src/routeConfig.tsx
+++ b/examples/react/basic-ssr/src/routeConfig.tsx
@@ -19,7 +19,7 @@ export const routeConfig = createRouteConfig().createChildren((createRoute) => [
component: Posts,
errorComponent: () => 'Oh crap!',
loader: async () => {
- await new Promise((resolve) => setTimeout(resolve, 2000))
+ await new Promise((resolve) => setTimeout(resolve, 500))
return {
posts: await fetchPosts(),
}
@@ -30,7 +30,7 @@ export const routeConfig = createRouteConfig().createChildren((createRoute) => [
path: ':postId',
component: Post,
loader: async ({ params: { postId } }) => {
- await new Promise((resolve) => setTimeout(resolve, 4000))
+ await new Promise((resolve) => setTimeout(resolve, 300))
return {
post: await fetchPostById(postId),
}
diff --git a/packages/react-router-devtools/src/devtools.tsx b/packages/react-router-devtools/src/devtools.tsx
index 727cdf6451..30904077ac 100644
--- a/packages/react-router-devtools/src/devtools.tsx
+++ b/packages/react-router-devtools/src/devtools.tsx
@@ -829,10 +829,6 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
Status |
{activeMatch.status} |
-
- Pending |
- {activeMatch.isPending.toString()} |
-
Invalid |
{activeMatch.isInvalid.toString()} |
diff --git a/packages/react-router/src/index.tsx b/packages/react-router/src/index.tsx
index 0d3d917f6c..c7ab0242a4 100644
--- a/packages/react-router/src/index.tsx
+++ b/packages/react-router/src/index.tsx
@@ -270,6 +270,12 @@ export function createReactRouter<
next,
} = linkInfo
+ const reactHandleClick = (e: Event) => {
+ React.startTransition(() => {
+ handleClick(e)
+ })
+ }
+
const composeHandlers =
(handlers: (undefined | ((e: any) => void))[]) =>
(e: React.SyntheticEvent) => {
@@ -292,7 +298,7 @@ export function createReactRouter<
...resolvedInactiveProps,
...rest,
href: disabled ? undefined : next.href,
- onClick: composeHandlers([handleClick, onClick]),
+ onClick: composeHandlers([reactHandleClick, onClick]),
onFocus: composeHandlers([handleFocus, onFocus]),
onMouseEnter: composeHandlers([handleEnter, onMouseEnter]),
onMouseLeave: composeHandlers([handleLeave, onMouseLeave]),
@@ -472,12 +478,12 @@ export function Outlet() {
const matches = useMatches().slice(1)
const match = matches[0]
+ const defaultPending = React.useCallback(() => null, [])
+
if (!match) {
return null
}
- const defaultPending = React.useCallback(() => null, [])
-
const PendingComponent = (match.__.pendingComponent ??
router.options.defaultPendingComponent ??
defaultPending) as any