From c87ca8607cf5dde72979c44abbd0da818d608078 Mon Sep 17 00:00:00 2001 From: Daniel Roe Date: Fri, 21 Jun 2024 12:12:43 +0100 Subject: [PATCH] fix(nuxt): defer registering inp handler until nuxt is mounted --- .../app/plugins/navigation-repaint.client.ts | 30 +++++++++++-------- 1 file changed, 17 insertions(+), 13 deletions(-) diff --git a/packages/nuxt/src/app/plugins/navigation-repaint.client.ts b/packages/nuxt/src/app/plugins/navigation-repaint.client.ts index 30f3a69cf1..fa368bf593 100644 --- 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) }) + }) }) }) })