From 6273d6c6e8d5f7d79f7a0c62f48edaf6504de04d Mon Sep 17 00:00:00 2001
From: Vaggelis Yfantis <me@octoper.me>
Date: Mon, 2 Sep 2024 18:42:19 +0300
Subject: [PATCH 1/2] fix(tanstack-start): Fix hard reload when component
 internal navigation happens

---
 .../src/client/ClerkProvider.tsx              | 21 +++++++++++++++++++
 .../src/client/useAwaitableNavigate.ts        | 16 +++++++-------
 2 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/packages/tanstack-start/src/client/ClerkProvider.tsx b/packages/tanstack-start/src/client/ClerkProvider.tsx
index 6693e99687b..5c60687aadf 100644
--- a/packages/tanstack-start/src/client/ClerkProvider.tsx
+++ b/packages/tanstack-start/src/client/ClerkProvider.tsx
@@ -1,9 +1,11 @@
 import { ClerkProvider as ReactClerkProvider } from '@clerk/clerk-react';
 import { ScriptOnce, useRouteContext } from '@tanstack/react-router';
+import { useEffect } from 'react';
 
 import { isClient } from '../utils';
 import { ClerkOptionsProvider } from './OptionsContext';
 import type { TanstackStartClerkProviderProps } from './types';
+import { useAwaitableNavigate } from './useAwaitableNavigate';
 import { mergeWithPublicEnvs, pickFromClerkInitState } from './utils';
 
 export * from '@clerk/clerk-react';
@@ -13,10 +15,17 @@ const SDK_METADATA = {
   version: PACKAGE_VERSION,
 };
 
+const awaitableNavigateRef: { current: ReturnType<typeof useAwaitableNavigate> | undefined } = { current: undefined };
+
 export function ClerkProvider({ children, ...providerProps }: TanstackStartClerkProviderProps): JSX.Element {
   const routerContext = useRouteContext({
     strict: false,
   });
+  const awaitableNavigate = useAwaitableNavigate();
+
+  useEffect(() => {
+    awaitableNavigateRef.current = awaitableNavigate;
+  }, [awaitableNavigate]);
 
   const clerkInitState = isClient() ? (window as any).__clerk_init_state : routerContext?.clerkInitialState;
 
@@ -34,6 +43,18 @@ export function ClerkProvider({ children, ...providerProps }: TanstackStartClerk
         <ReactClerkProvider
           initialState={clerkSsrState}
           sdkMetadata={SDK_METADATA}
+          routerPush={(to: string) =>
+            awaitableNavigateRef.current?.({
+              to,
+              replace: false,
+            })
+          }
+          routerReplace={(to: string) =>
+            awaitableNavigateRef.current?.({
+              to,
+              replace: true,
+            })
+          }
           {...mergedProps}
         >
           {children}
diff --git a/packages/tanstack-start/src/client/useAwaitableNavigate.ts b/packages/tanstack-start/src/client/useAwaitableNavigate.ts
index 4c4ab6fd6ec..22ed640da43 100644
--- a/packages/tanstack-start/src/client/useAwaitableNavigate.ts
+++ b/packages/tanstack-start/src/client/useAwaitableNavigate.ts
@@ -1,6 +1,6 @@
 import type { NavigateOptions } from '@tanstack/react-router';
 import { useLocation, useNavigate } from '@tanstack/react-router';
-import React from 'react';
+import React, { useTransition } from 'react';
 
 type Resolve = (value?: unknown) => void;
 
@@ -12,20 +12,18 @@ export const useAwaitableNavigate = () => {
     resolveFunctionsRef.current.forEach(resolve => resolve());
     resolveFunctionsRef.current.splice(0, resolveFunctionsRef.current.length);
   };
+  const [_, startTransition] = useTransition();
 
   React.useEffect(() => {
     resolveAll();
   }, [location]);
 
-  return ({ to, replace }: NavigateOptions) => {
+  return (options: NavigateOptions) => {
     return new Promise(res => {
-      resolveFunctionsRef.current.push(res);
-      res(
-        navigate({
-          to,
-          replace,
-        }),
-      );
+      startTransition(() => {
+        resolveFunctionsRef.current.push(res);
+        res(navigate(options));
+      });
     });
   };
 };

From 4824a4024a6ba7d4e3ca54769039a862c6c312c8 Mon Sep 17 00:00:00 2001
From: Vaggelis Yfantis <me@octoper.me>
Date: Mon, 2 Sep 2024 18:53:57 +0300
Subject: [PATCH 2/2] chore(repo): Add changeset

---
 .changeset/stale-feet-tease.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/stale-feet-tease.md

diff --git a/.changeset/stale-feet-tease.md b/.changeset/stale-feet-tease.md
new file mode 100644
index 00000000000..57cdc8a4358
--- /dev/null
+++ b/.changeset/stale-feet-tease.md
@@ -0,0 +1,5 @@
+---
+"@clerk/tanstack-start": patch
+---
+
+Fix to prevent hard reload for internal navigation