diff --git a/packages/qwik-city/src/runtime/src/qwik-city-component.tsx b/packages/qwik-city/src/runtime/src/qwik-city-component.tsx index 6bb2099a849..657453435ea 100644 --- a/packages/qwik-city/src/runtime/src/qwik-city-component.tsx +++ b/packages/qwik-city/src/runtime/src/qwik-city-component.tsx @@ -13,6 +13,7 @@ import { _weakSerialize, useStyles$, _waitUntilRendered, + untrack, type QRL, } from '@builder.io/qwik'; import { isBrowser, isDev, isServer } from '@builder.io/qwik'; @@ -291,7 +292,9 @@ export const QwikCityProvider = component$((props) => { } actionState.value = undefined; - routeLocation.isNavigating = true; + untrack(() => { + routeLocation.isNavigating = true; + }); return new Promise((resolve) => { navResolver.r = resolve; @@ -389,31 +392,35 @@ export const QwikCityProvider = component$((props) => { } // Update route location - if (!isSamePath(trackUrl, prevUrl)) { - routeLocation.prevUrl = prevUrl; - } - - routeLocation.url = trackUrl; - routeLocation.params = { ...params }; + untrack(() => { + if (!isSamePath(trackUrl, prevUrl)) { + routeLocation.prevUrl = prevUrl; + } + routeLocation.url = trackUrl; + routeLocation.params = { ...params }; + + // Needs to be done after routeLocation is updated + const resolvedHead = resolveHead(clientPageData!, routeLocation, contentModules, locale); + + // Update content + content.headings = pageModule.headings; + content.menu = menu; + contentInternal.value = noSerialize(contentModules); + + // Update document head + documentHead.links = resolvedHead.links; + documentHead.meta = resolvedHead.meta; + documentHead.styles = resolvedHead.styles; + documentHead.scripts = resolvedHead.scripts; + documentHead.title = resolvedHead.title; + documentHead.frontmatter = resolvedHead.frontmatter; + }); (routeInternal as any).untrackedValue = { type: navType, dest: trackUrl }; // Needs to be done after routeLocation is updated const resolvedHead = resolveHead(clientPageData!, routeLocation, contentModules, locale); - // Update content - content.headings = pageModule.headings; - content.menu = menu; - contentInternal.value = noSerialize(contentModules); - - // Update document head - documentHead.links = resolvedHead.links; - documentHead.meta = resolvedHead.meta; - documentHead.styles = resolvedHead.styles; - documentHead.scripts = resolvedHead.scripts; - documentHead.title = resolvedHead.title; - documentHead.frontmatter = resolvedHead.frontmatter; - if (isBrowser) { if (props.viewTransition !== false) { // mark next DOM render to use startViewTransition API @@ -617,7 +624,9 @@ export const QwikCityProvider = component$((props) => { saveScrollHistory(scrollState); win._qCityScrollEnabled = true; - routeLocation.isNavigating = false; + untrack(() => { + routeLocation.isNavigating = false; + }); navResolver.r?.(); }); }