Prevent scrolling to top before page has rendered

packages/react/src/App.ts

@@ -5,6 +5,7 @@ import PageContext from './PageContext'
 
 let currentIsInitialPage = true
 let routerIsInitialized = false
+let swapPromise = null
 let swapComponent: PageHandler = async () => {
   // Dummy function so we can init the router outside of the useEffect hook. This is
   // needed so `router.reload()` works right away (on mount) in any of the user's
@@ -58,11 +59,20 @@ export default function App({
         page,
         key: preserveState ? current.key : Date.now(),
       }))
+
+      return new Promise((resolve) => {
+        swapPromise = resolve
+      })
     }
 
     router.on('navigate', () => headManager.forceUpdate())
   }, [])
 
+  useEffect(() => {
+    swapPromise?.()
+    swapPromise = null
+  }, [swapPromise])
+
   if (!current.component) {
     return createElement(
       HeadContext.Provider,

packages/react/test-app/Pages/LongPage.jsx

@@ -0,0 +1,81 @@
+import { Link } from '@inertiajs/react'
+import { useEffect, useState } from 'react'
+
+export default ({ page }) => {
+	useEffect(() => {
+		console.log('LongPage mounted!' + Date.now())
+	}, []);
+
+	return Array.from({ length: 3000 }, (_, i) => (
+		<>
+			<h1 style={{ 'fontSize': '40px', }}>Article Header</h1>
+			{i === 0 && (<h2 style={{ 'fontSize': '40px', }}>Page {page}</h2>)}
+			<article style={{ 'fontSize': '20px', 'maxWidth': '500px' }}>
+				<p>
+					Sunt culpa sit sunt enim aliquip. Esse ea ea quis voluptate. Enim consectetur aliqua ex ex magna cupidatat id
+					minim sit elit. Amet pariatur occaecat pariatur duis eiusmod dolore magna. Et commodo cupidatat in commodo
+					elit cupidatat minim qui id non enim ad. Culpa aliquip ad Lorem sit consectetur ullamco culpa duis nisi et
+					fugiat mollit eiusmod. Laboris voluptate veniam consequat proident in nulla irure velit.
+				</p>
+				{i === 0 && (
+					<Link href={`/long-page/${parseInt(page) + 1}`} style={{ 'display': 'block', 'marginTop': '20px' }}>
+						Go to page {parseInt(page) + 1}
+					</Link>
+				)}
+				<p>
+					Sit sint laboris sunt eiusmod ipsum laborum eiusmod amet commodo exercitation in duis magna. Proident sunt
+					minim in elit qui. Id pariatur commodo fugiat excepteur in deserunt Lorem ipsum occaecat est. Excepteur sit
+					tempor ipsum ex officia veniam enim amet velit fugiat mollit cillum. Incididunt aliqua nulla id occaecat
+					nulla. Non ea ad est occaecat deserunt officia qui commodo exercitation.
+				</p>
+				<p>
+					Voluptate laborum quis aliqua ullamco magna amet ullamco laborum qui cillum eu. Dolore dolore aliqua proident
+					proident sunt ipsum in. Enim velit dolore labore dolor quis incididunt duis culpa Lorem. Eu adipisicing non
+					elit fugiat voluptate labore ipsum dolore consectetur commodo. Et in et cillum duis consequat quis ex eu
+					commodo. Eiusmod aliqua excepteur consectetur eiusmod aute et consectetur sit pariatur dolore qui officia
+					pariatur.
+				</p>
+				<p>
+					Non sunt eu mollit qui reprehenderit. Aute culpa anim voluptate do in esse duis laborum ad dolore. Ullamco
+					nisi in nostrud officia do. Duis pariatur officia id duis. Deserunt ad incididunt est sint consectetur
+					reprehenderit mollit est Lorem ea pariatur anim dolor adipisicing. Nostrud irure magna nostrud laboris aute
+					sunt veniam laboris veniam incididunt sit. Nulla proident ad aliqua fugiat culpa sunt est in dolor velit ad
+					irure nulla.
+				</p>
+				<p>
+					Do aute laborum deserunt non laborum voluptate voluptate. Anim ut laborum magna sunt cupidatat irure.
+					Cupidatat fugiat minim sint cillum laborum excepteur irure id est irure ad occaecat adipisicing enim. Deserunt
+					nulla anim proident velit irure nostrud est est reprehenderit consequat pariatur qui. Fugiat Lorem sint eu
+					laborum minim pariatur cillum mollit nulla consequat ullamco ex. Ex consectetur ad ut irure fugiat occaecat
+					aliqua exercitation cillum ipsum anim dolore tempor.
+				</p>
+				<p>
+					Adipisicing consequat irure fugiat Lorem deserunt aliquip do cupidatat. Lorem labore elit ex qui nostrud qui
+					cillum sunt adipisicing occaecat. Sunt nostrud amet amet cupidatat fugiat Lorem quis nulla id cillum esse eu.
+					Ullamco aliqua dolore irure amet mollit anim velit dolore.
+				</p>
+				<p>
+					Veniam cupidatat ipsum ea officia ipsum nisi laborum culpa qui dolore. Aliqua Lorem nisi labore ea velit
+					aliquip irure excepteur eu. Laboris proident duis non labore sunt quis aute tempor laboris enim anim eiusmod.
+				</p>
+				<p>
+					Minim proident ut aliqua ea ut culpa fugiat ullamco nisi esse nostrud reprehenderit id. Id id ullamco velit
+					anim nisi magna Lorem tempor. Et veniam occaecat ut labore consequat fugiat duis.
+				</p>
+				<p>
+					Adipisicing ea consectetur adipisicing aute eu pariatur enim labore consequat occaecat consectetur minim nisi.
+					Cillum commodo sunt labore reprehenderit. Duis esse excepteur magna tempor eiusmod exercitation Lorem
+					reprehenderit excepteur pariatur. Esse cupidatat occaecat magna do aliquip Lorem. Consectetur adipisicing
+					consequat dolore nostrud esse eu cillum id commodo duis. Aliquip dolor cillum cupidatat fugiat.
+				</p>
+				<p>
+					Ex eiusmod id est laborum sunt ex ea aute adipisicing ad magna deserunt duis. Nostrud velit dolore id commodo
+					quis enim fugiat. Sint non quis consectetur voluptate aliqua dolore ad voluptate nulla. Irure sit
+					reprehenderit sint laboris non elit. Duis minim nisi esse dolor. Sit ex in consequat non occaecat commodo
+					irure et. Commodo qui ipsum Lorem magna consequat consequat et minim eiusmod Lorem eiusmod cupidatat
+					voluptate.
+				</p>
+			</article>
+		</>
+	))
+}

packages/vue3/src/app.ts

@@ -5,6 +5,7 @@ import {
   defineComponent,
   h,
   markRaw,
+  nextTick,
   Plugin,
   PropType,
   reactive,
@@ -73,6 +74,8 @@ const App: InertiaApp = defineComponent({
           component.value = markRaw(args.component)
           page.value = args.page
           key.value = args.preserveState ? key.value : Date.now()
+
+          return nextTick()
         },
       })
 

tests/app/server.js

@@ -57,6 +57,13 @@ app.get('/article', (req, res) =>
   }),
 )
 
+app.get('/long-page/:page', (req, res) =>
+  inertia.render(req, res, {
+    component: 'LongPage',
+    props: { page: req.params.page },
+  }),
+)
+
 app.get('/links/partial-reloads', (req, res) =>
   inertia.render(req, res, {
     component: 'Links/PartialReloads',