Add router transition flag to App router

RickyRoller · Apr 17, 2024 · a3cbe12 · a3cbe12
1 parent ab344ea
commit a3cbe12
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 10 deletions.
diff --git a/packages/next/src/client/components/app-router.tsx b/packages/next/src/client/components/app-router.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import type { ReactNode } from 'react'
+import { type ReactNode, useTransition } from 'react'
 import React, {
   use,
   useEffect,
@@ -321,6 +321,7 @@ function Router({
   )
   const [reducerState, dispatch, sync] =
     useReducerWithReduxDevtools(initialState)
+  const [isRouterTransitioning, startRouterTransition] = useTransition()
 
   useEffect(() => {
     // Ensure initialParallelRoutes is cleaned up from memory once it's used.
@@ -353,6 +354,8 @@ function Router({
    */
   const appRouter = useMemo<AppRouterInstance>(() => {
     const routerInstance: AppRouterInstance = {
+      isRouterTransitioning,
+      startRouterTransition,
       back: () => window.history.back(),
       forward: () => window.history.forward(),
       prefetch: (href, options) => {
@@ -369,7 +372,7 @@ function Router({
         if (isExternalURL(url)) {
           return
         }
-        startTransition(() => {
+        startRouterTransition(() => {
           dispatch({
             type: ACTION_PREFETCH,
             url,
@@ -378,17 +381,17 @@ function Router({
         })
       },
       replace: (href, options = {}) => {
-        startTransition(() => {
+        startRouterTransition(() => {
           navigate(href, 'replace', options.scroll ?? true)
         })
       },
       push: (href, options = {}) => {
-        startTransition(() => {
+        startRouterTransition(() => {
           navigate(href, 'push', options.scroll ?? true)
         })
       },
       refresh: () => {
-        startTransition(() => {
+        startRouterTransition(() => {
           dispatch({
             type: ACTION_REFRESH,
             origin: window.location.origin,
@@ -401,7 +404,7 @@ function Router({
             'fastRefresh can only be used in development mode. Please use refresh instead.'
           )
         } else {
-          startTransition(() => {
+          startRouterTransition(() => {
             dispatch({
               type: ACTION_FAST_REFRESH,
               origin: window.location.origin,
@@ -412,7 +415,7 @@ function Router({
     }
 
     return routerInstance
-  }, [dispatch, navigate])
+  }, [dispatch, isRouterTransitioning, navigate])
 
   useEffect(() => {
     // Exists for debugging purposes. Don't use in application code.

diff --git a/packages/next/src/client/link.tsx b/packages/next/src/client/link.tsx
@@ -234,8 +234,8 @@ function linkClicked(
     }
   }
 
-  if (isAppRouter) {
-    React.startTransition(navigate)
+  if (isAppRouter && 'startRouterTransition' in router) {
+    router.startRouterTransition(navigate)
   } else {
     navigate()
   }

diff --git a/packages/next/src/shared/lib/app-router-context.shared-runtime.ts b/packages/next/src/shared/lib/app-router-context.shared-runtime.ts
@@ -7,7 +7,7 @@ import type {
 } from '../../client/components/router-reducer/router-reducer-types'
 import type { FetchServerResponseResult } from '../../client/components/router-reducer/fetch-server-response'
 import type { FlightRouterState } from '../../server/app-render/types'
-import React from 'react'
+import React, { type TransitionStartFunction } from 'react'
 import type { ErrorComponent } from '../../client/components/error-boundary'
 
 export type ChildSegmentMap = Map<string, CacheNode>
@@ -126,6 +126,8 @@ export interface PrefetchOptions {
 }
 
 export interface AppRouterInstance {
+  isRouterTransitioning: boolean
+  startRouterTransition: TransitionStartFunction
   /**
    * Navigate to the previous history entry.
    */

diff --git a/packages/next/src/shared/lib/router/adapters.tsx b/packages/next/src/shared/lib/router/adapters.tsx
@@ -13,6 +13,8 @@ export function adaptForAppRouterInstance(
   pagesRouter: NextRouter
 ): AppRouterInstance {
   return {
+    isRouterTransitioning: false,
+    startRouterTransition: () => () => {},
     back() {
       pagesRouter.back()
     },