fix: isTransitioning onLoad

TanStack · Dec 7, 2023 · b886bdb · b886bdb
1 parent f655adc
commit b886bdb
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 8 deletions.
diff --git a/examples/react/deferred-data/src/main.tsx b/examples/react/deferred-data/src/main.tsx
@@ -32,7 +32,7 @@ type CommentType = {
 
 const fetchPosts = async () => {
   console.log('Fetching posts...')
-  await new Promise((r) => setTimeout(r, 500))
+  await new Promise((r) => setTimeout(r, 100))
   return axios
     .get<PostType[]>('https://jsonplaceholder.typicode.com/posts')
     .then((r) => r.data.slice(0, 10))
@@ -41,17 +41,20 @@ const fetchPosts = async () => {
 const fetchPost = async (postId: string) => {
   console.log(`Fetching post with id ${postId}...`)
 
-  const commentsPromise = new Promise((r) => setTimeout(r, 1500))
+  const commentsPromise = new Promise((r) => setTimeout(r, 2000))
     .then(() =>
       axios.get<CommentType[]>(
         `https://jsonplaceholder.typicode.com/comments?postId=${postId}`,
       ),
     )
     .then((r) => r.data)
 
-  await new Promise((r) => setTimeout(r, 150))
-  const post = await axios
-    .get<PostType>(`https://jsonplaceholder.typicode.com/posts/${postId}`)
+  const post = await new Promise((r) => setTimeout(r, 1000))
+    .then(() =>
+      axios.get<PostType>(
+        `https://jsonplaceholder.typicode.com/posts/${postId}`,
+      ),
+    )
     .catch((err) => {
       if (err.response.status === 404) {
         throw new NotFoundError(`Post with id "${postId}" not found!`)

diff --git a/packages/react-router/src/RouterProvider.tsx b/packages/react-router/src/RouterProvider.tsx
@@ -165,11 +165,11 @@ function Transitioner() {
 
   useLayoutEffect(() => {
     if (
+      routerState.isTransitioning &&
       !isTransitioning &&
       !routerState.isLoading &&
       routerState.resolvedLocation !== routerState.location
     ) {
-      console.log('onResolved', routerState.location)
       router.emit({
         type: 'onResolved',
         fromLocation: routerState.resolvedLocation,
@@ -185,7 +185,13 @@ function Transitioner() {
         resolvedLocation: s.location,
       }))
     }
-  }, [isTransitioning, routerState.isLoading])
+  }, [
+    routerState.isTransitioning,
+    isTransitioning,
+    routerState.isLoading,
+    routerState.resolvedLocation,
+    routerState.location,
+  ])
 
   useLayoutEffect(() => {
     if (!window.__TSR_DEHYDRATED__) {

diff --git a/packages/react-router/src/router.ts b/packages/react-router/src/router.ts
@@ -1691,7 +1691,7 @@ export function getInitialRouterState(
     isLoading: false,
     isTransitioning: false,
     status: 'idle',
-    resolvedLocation: location,
+    resolvedLocation: { ...location },
     location,
     matches: [],
     pendingMatches: [],