Zengtudor
/
Nuxt
mirror of https://github.com/nuxt/nuxt.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix(nuxt): defer registering inp handler until nuxt is mounted

This commit is contained in:
Daniel Roe 2024-06-21 12:12:43 +01:00
parent 209e81b60d
commit c87ca8607c
No known key found for this signature in database
GPG Key ID: 3714AB03996F442B
1 changed files with 17 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
packages/nuxt/src/app/plugins/navigation-repaint.client.ts
View File

@ -1,19 +1,23 @@
import { defineNuxtPlugin } from '../nuxt'
import { useRouter } from '../composables'
import { onNuxtReady } from '../composables/ready'
import { useRouter } from '../composables/router'
export default defineNuxtPlugin(() => {
useRouter().beforeResolve(async () => {
/**
* This gives an opportunity for the browser to repaint, acknowledging user interaction.
* It can reduce INP when navigating on prerendered routes.
*
* @see https://github.com/nuxt/nuxt/issues/26271#issuecomment-2178582037
* @see https://vercel.com/blog/demystifying-inp-new-tools-and-actionable-insights
*/
await new Promise((resolve) => {
// Ensure we always resolve, even if the animation frame never fires
setTimeout(resolve, 100)
requestAnimationFrame(() => { setTimeout(resolve, 0) })
const router = useRouter()
onNuxtReady(() => {
router.beforeResolve(async () => {
/**
* This gives an opportunity for the browser to repaint, acknowledging user interaction.
* It can reduce INP when navigating on prerendered routes.
*
* @see https://github.com/nuxt/nuxt/issues/26271#issuecomment-2178582037
* @see https://vercel.com/blog/demystifying-inp-new-tools-and-actionable-insights
*/
await new Promise((resolve) => {
// Ensure we always resolve, even if the animation frame never fires
setTimeout(resolve, 100)
requestAnimationFrame(() => { setTimeout(resolve, 0) })
})
})
})
})