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