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

nuxt · Jun 24, 2024 · 866a531 · 866a531
1 parent e7fbc9f
commit 866a531
Showing 1 changed file with 17 additions and 13 deletions.
diff --git a/packages/nuxt/src/app/plugins/navigation-repaint.client.ts b/packages/nuxt/src/app/plugins/navigation-repaint.client.ts
@@ -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) })
       })
     })
   })
 })