vinext 1.0.0-beta.2 → 1.0.0-beta.3

package/dist/server/app-page-cache-finalizer.js

@@ -1,7 +1,7 @@
 import { NEXTJS_CACHE_HEADER, VINEXT_CACHE_HEADER } from "./headers.js";
-import { setCacheStateHeaders } from "./cache-headers.js";
 import { applyCdnResponseHeaders } from "./cache-control.js";
 import { buildAppPageCacheValue } from "./isr-cache.js";
+import { setCacheStateHeaders } from "./cache-headers.js";
 import { readStreamAsText } from "../utils/text-stream.js";
 import { createEmptyAppPageRenderObservationState } from "./app-page-render-observation.js";
 //#region src/server/app-page-cache-finalizer.ts

package/dist/server/app-page-cache.d.ts

@@ -18,7 +18,7 @@ type AppPageCacheOutcomeMetric = Readonly<{
    */
   cacheKey: string;
   outcome: "hit" | "miss" | "stale";
-  reason: "empty-entry" | "no-entry" | "non-app-page-entry" | "query-variant-unproven" | "read-error" | "served" | "stale-empty-entry";
+  reason: "empty-entry" | "expired" | "no-entry" | "non-app-page-entry" | "query-variant-unproven" | "read-error" | "served" | "stale-empty-entry";
 }>;
 type AppPageCacheOutcomeRecorder = (metric: AppPageCacheOutcomeMetric) => void;
 type AppPageCacheRenderResult = {

package/dist/server/app-page-cache.js

@@ -1,9 +1,9 @@
 import { VINEXT_MOUNTED_SLOTS_HEADER } from "./headers.js";
-import { setCacheStateHeaders } from "./cache-headers.js";
 import { applyCdnResponseHeaders } from "./cache-control.js";
 import { decideIsr } from "./isr-decision.js";
 import { buildAppPageCacheValue } from "./isr-cache.js";
 import { encodeCacheTag } from "../utils/encode-cache-tag.js";
+import { setCacheStateHeaders } from "./cache-headers.js";
 import { VINEXT_RSC_CONTENT_TYPE, VINEXT_RSC_VARY_HEADER, applyRscCompatibilityIdHeader, applyRscDeploymentIdHeader } from "./app-rsc-cache-busting.js";
 import { mergeMiddlewareResponseHeaders } from "./middleware-response-headers.js";
 import { applyEdgeRuntimeHeader } from "./app-page-response.js";
@@ -58,7 +58,7 @@ function hasQueryInvariantAppPageProof(cachedValue) {
 function resolveRegeneratedAppPageCachePolicy(options) {
 	let revalidateSeconds = options.routeRevalidateSeconds;
 	const renderRevalidateSeconds = options.renderCacheControl?.revalidate;
-	if (renderRevalidateSeconds !== void 0) revalidateSeconds = revalidateSeconds > 0 ? Math.min(revalidateSeconds, renderRevalidateSeconds) : renderRevalidateSeconds;
+	if (typeof renderRevalidateSeconds === "number") revalidateSeconds = revalidateSeconds > 0 ? Math.min(revalidateSeconds, renderRevalidateSeconds) : renderRevalidateSeconds;
 	return {
 		expireSeconds: options.renderCacheControl?.expire ?? options.expireSeconds,
 		revalidateSeconds
@@ -105,6 +105,10 @@ function buildAppPageCachedResponse(cachedValue, options) {
 	});
 }
 async function serveAppPageCachedHtml(options, transformValue) {
+	if (options.cached?.isExpired) {
+		options.isrDebug?.("MISS (expired)", options.pathname);
+		return null;
+	}
 	if (typeof options.cachedValue.html !== "string" || options.cachedValue.html.length === 0) {
 		if (options.cached?.isStale) options.scheduleRegeneration();
 		options.isrDebug?.(options.emptyDebugMessage, options.pathname);
@@ -137,6 +141,16 @@ async function readAppPageCacheResponse(options) {
 	try {
 		const cached = await options.isrGet(isrKey);
 		const cachedValue = getCachedAppPageValue(cached);
+		if (cached?.isExpired) {
+			recordAppPageCacheOutcome(options.recordCacheOutcome, {
+				artifact,
+				cacheKey: isrKey,
+				outcome: "miss",
+				reason: "expired"
+			});
+			options.isrDebug?.("MISS (expired)", options.cleanPathname);
+			return null;
+		}
 		if (cached && !cachedValue) {
 			recordAppPageCacheOutcome(options.recordCacheOutcome, {
 				artifact,

package/dist/server/app-page-dispatch.d.ts

@@ -36,6 +36,8 @@ type AppPageDispatchIntercept<TPage = unknown> = {
   interceptLayouts?: readonly unknown[] | null;
   interceptLayoutSegments?: readonly (readonly string[])[] | null;
   interceptBranchSegments?: readonly string[] | null;
+  interceptLoadings?: readonly unknown[] | null;
+  interceptLoadingTreePositions?: readonly number[] | null;
   interceptNotFoundBranchSegments?: readonly string[] | null;
   notFound?: unknown;
   notFoundTreePosition?: number | null;
@@ -52,6 +54,8 @@ type AppPageDispatchInterceptOptions<TPage = unknown> = {
   interceptLayouts?: readonly unknown[] | null;
   interceptLayoutSegments?: readonly (readonly string[])[] | null;
   interceptBranchSegments?: readonly string[] | null;
+  interceptLoadings?: readonly unknown[] | null;
+  interceptLoadingTreePositions?: readonly number[] | null;
   interceptNotFoundBranchSegments?: readonly string[] | null;
   interceptNotFound?: unknown;
   interceptNotFoundTreePosition?: number | null;
@@ -69,6 +73,8 @@ type AppPageModule = {
 };
 type AppPageDispatchSlot = {
   default?: AppPageModule | null;
+  loading?: AppPageModule | null;
+  loadings?: readonly (AppPageModule | null | undefined)[] | null;
   page?: AppPageModule | null;
   slotPatternParts?: readonly string[] | null;
   slotParamNames?: readonly string[] | null;
@@ -85,6 +91,8 @@ type AppPageDispatchRoute = {
   layouts: readonly AppPageModule[];
   layoutTreePositions?: readonly number[];
   loading?: AppPageModule | null;
+  loadings?: readonly (AppPageModule | null | undefined)[];
+  loadingTreePositions?: readonly number[];
   notFound?: AppPageModule | null;
   notFounds?: readonly (AppPageModule | null | undefined)[];
   params: readonly string[];

package/dist/server/app-page-dispatch.js

@@ -1,4 +1,4 @@
-import { createRequestContext, runWithRequestContext } from "../shims/unified-request-context.js";
+import { closeAfterResponse, createRequestContext, runWithRequestContext } from "../shims/unified-request-context.js";
 import { getRequestExecutionContext } from "../shims/request-context.js";
 import "../utils/protocol-headers.js";
 import { AppElementsWire } from "./app-elements-wire.js";
@@ -23,6 +23,22 @@ import { resolveAppPageMethodResponse } from "./app-page-method.js";
 import { buildAppPageElement, resolveAppPageIntercept, resolveAppPageInterceptionRerenderTarget, validateAppPageDynamicParams } from "./app-page-request.js";
 import { renderAppPageLifecycle } from "./app-page-render.js";
 //#region src/server/app-page-dispatch.ts
+function getActiveLoadingTreePositions(route) {
+	const positions = [];
+	for (const [index, loadingModule] of (route.loadings ?? []).entries()) {
+		if (!loadingModule?.default) continue;
+		const treePosition = route.loadingTreePositions?.[index];
+		if (treePosition !== void 0) positions.push(treePosition);
+	}
+	if (positions.length === 0 && route.loading?.default) positions.push(route.routeSegments.length);
+	return positions;
+}
+function getAppPageLayoutProbeCount(route, loadingTreePositions) {
+	const firstLoadingTreePosition = loadingTreePositions.reduce((first, position) => first === null || position < first ? position : first, null);
+	if (firstLoadingTreePosition === null) return route.layouts.length;
+	const firstSuspendedLayoutIndex = (route.layoutTreePositions ?? []).findIndex((position) => position > firstLoadingTreePosition);
+	return firstSuspendedLayoutIndex === -1 ? route.layouts.length : firstSuspendedLayoutIndex;
+}
 function resolveAppPageRouteBoundaryModule(route, statusCode) {
 	if (statusCode === 403) return route.forbidden ?? null;
 	if (statusCode === 401) return route.unauthorized ?? null;
@@ -110,7 +126,7 @@ function hasSearchParams(searchParams) {
 }
 async function runAppPageRevalidationContext(options, renderFn) {
 	const { createStaticGenerationHeadersContext } = await import("./app-static-generation.js");
-	return runWithRequestContext(createRequestContext({
+	const requestContext = createRequestContext({
 		headersContext: createStaticGenerationHeadersContext({
 			draftModeEnabled: false,
 			draftModeSecret: options.draftModeSecret,
@@ -122,7 +138,8 @@ async function runAppPageRevalidationContext(options, renderFn) {
 		currentForceDynamicFetchDefault: options.dynamicConfig === "force-dynamic",
 		executionContext: getRequestExecutionContext(),
 		unstableCacheRevalidation: "foreground"
-	}), async () => {
+	});
+	const revalidation = runWithRequestContext(requestContext, async () => {
 		ensureFetchPatch();
 		setRefreshStaleFetchesInForeground(process.env.VINEXT_PRERENDER === "1");
 		setCurrentFetchSoftTags(buildAppPageTags(options.cleanPathname, [], options.routeSegments));
@@ -133,6 +150,11 @@ async function runAppPageRevalidationContext(options, renderFn) {
 		});
 		return await runWithFetchDedupe(renderFn);
 	});
+	try {
+		return await revalidation;
+	} finally {
+		await closeAfterResponse(requestContext);
+	}
 }
 function toInterceptOptions(interceptionContext, intercept) {
 	return {
@@ -140,6 +162,8 @@ function toInterceptOptions(interceptionContext, intercept) {
 		interceptLayouts: intercept.interceptLayouts,
 		interceptLayoutSegments: intercept.interceptLayoutSegments,
 		interceptBranchSegments: intercept.interceptBranchSegments,
+		interceptLoadings: intercept.interceptLoadings,
+		interceptLoadingTreePositions: intercept.interceptLoadingTreePositions,
 		interceptNotFoundBranchSegments: intercept.interceptNotFoundBranchSegments,
 		interceptNotFound: intercept.notFound,
 		interceptNotFoundTreePosition: intercept.notFoundTreePosition,
@@ -173,7 +197,8 @@ async function dispatchAppPageInner(options) {
 	const hasRequestSearchParams = !shouldUseEmptySearchParams && hasSearchParams(options.searchParams);
 	const pageSearchParams = shouldUseEmptySearchParams ? new URLSearchParams() : options.searchParams;
 	const layoutParamAccess = createAppLayoutParamAccessTracker();
-	const hasActiveLoadingBoundary = Boolean(route.loading?.default);
+	const activeLoadingTreePositions = getActiveLoadingTreePositions(route);
+	const hasActiveLoadingBoundary = activeLoadingTreePositions.length > 0;
 	setCurrentFetchSoftTags(buildAppPageTags(options.cleanPathname, [], route.routeSegments));
 	setCurrentFetchCacheMode(options.fetchCache ?? null);
 	setCurrentForceDynamicFetchDefault(isForceDynamic);
@@ -410,7 +435,7 @@ async function dispatchAppPageInner(options) {
 			});
 		},
 		async probePageSpecialError() {
-			if (route.loading?.default) return null;
+			if (hasActiveLoadingBoundary) return null;
 			return resolveAppPageSpecialError(await probeAppPageThrownError({
 				probePage: () => options.probePage(pageSearchParams),
 				runWithSuppressedHookWarning(probe) {
@@ -500,7 +525,7 @@ async function dispatchAppPageInner(options) {
 		isrSet: options.isrSet,
 		interceptionContext: options.interceptionContext,
 		expireSeconds: options.expireSeconds,
-		layoutCount: route.layouts.length,
+		layoutCount: getAppPageLayoutProbeCount(route, activeLoadingTreePositions),
 		loadSsrHandler: options.loadSsrHandler,
 		middlewareContext: options.middlewareContext,
 		navigationParams,

package/dist/server/app-page-element-builder.d.ts

@@ -22,6 +22,8 @@ type AppPageInterceptOptions<TModule extends AppPageModule = AppPageModule> = {
   interceptLayouts?: readonly (TModule | null | undefined)[] | null;
   interceptLayoutSegments?: readonly (readonly string[])[] | null;
   interceptBranchSegments?: readonly string[] | null;
+  interceptLoadings?: readonly (TModule | null | undefined)[] | null;
+  interceptLoadingTreePositions?: readonly number[] | null;
   interceptNotFoundBranchSegments?: readonly string[] | null;
   interceptNotFound?: TModule | null;
   interceptNotFoundTreePosition?: number | null;

package/dist/server/app-page-element-builder.js

@@ -15,7 +15,7 @@ import { resolveAppPageParentHttpAccessBoundary } from "./app-page-boundary.js";
 import { sanitizeErrorForClient } from "./app-rsc-errors.js";
 import { DEFAULT_GLOBAL_ERROR_MODULE } from "./default-global-error-module.js";
 import { shouldServeStreamingMetadata } from "./streaming-metadata.js";
-import { createElement } from "react";
+import { Suspense, createElement } from "react";
 //#region src/server/app-page-element-builder.ts
 function resolveInterceptLayoutParams(branchSegments, layoutSegments, params) {
 	return resolveAppPageBranchParams(branchSegments, layoutSegments.length, params, layoutSegments);
@@ -111,7 +111,7 @@ async function buildPageElements(options) {
 		} : {},
 		ownerTreePosition: route.routeSegments?.length ?? 0
 	} : null;
-	const parallelRoutes = [...activeParallelRouteHeadInputs.map((input) => input.head), ...primaryParallelRouteHeadInput ? [primaryParallelRouteHeadInput.head] : []];
+	const parallelRoutes = [...primaryParallelRouteHeadInput ? [primaryParallelRouteHeadInput.head] : [], ...activeParallelRouteHeadInputs.map((input) => input.head)];
 	const metadataSearchParamsObserver = observeMetadataSearchParamsAccess ? createAppPageSearchParamsObserver() : void 0;
 	const preparedHead = prepareAppPageHead({
 		applyFileBasedMetadata: options.applyFileBasedMetadata,
@@ -210,11 +210,35 @@ async function buildPageElements(options) {
 	const mountedSlotIds = mountedSlotsHeader ? new Set(mountedSlotsHeader.split(" ")) : null;
 	const slotOverrides = buildSlotOverrides(route, params, routePath, opts);
 	let siblingInterceptElement = isSiblingIntercept && EffectivePageComponent ? createPageElement(EffectivePageComponent, pageProps) : null;
-	if (isSiblingIntercept && siblingInterceptElement !== null && opts?.interceptLayouts?.length) for (let i = opts.interceptLayouts.length - 1; i >= 0; i--) {
-		const LayoutComponent = opts.interceptLayouts[i]?.default;
-		if (LayoutComponent) {
-			const interceptLayoutSegments = opts.interceptLayoutSegments?.[i] ?? [];
-			siblingInterceptElement = createElement(LayoutComponent, { params: makeThenableParams(resolveInterceptLayoutParams(opts.interceptBranchSegments ?? interceptLayoutSegments, interceptLayoutSegments, effectiveParams)) }, siblingInterceptElement);
+	if (isSiblingIntercept && siblingInterceptElement !== null) {
+		const layoutIndexesByTreePosition = /* @__PURE__ */ new Map();
+		for (const [index, layoutModule] of (opts?.interceptLayouts ?? []).entries()) {
+			if (!layoutModule?.default) continue;
+			const treePosition = opts?.interceptLayoutSegments?.[index]?.length ?? 0;
+			const indexes = layoutIndexesByTreePosition.get(treePosition) ?? [];
+			indexes.push(index);
+			layoutIndexesByTreePosition.set(treePosition, indexes);
+		}
+		const loadingIndexesByTreePosition = /* @__PURE__ */ new Map();
+		for (const [index, loadingModule] of (opts?.interceptLoadings ?? []).entries()) {
+			if (!loadingModule?.default) continue;
+			const treePosition = opts?.interceptLoadingTreePositions?.[index];
+			if (treePosition !== void 0) loadingIndexesByTreePosition.set(treePosition, index);
+		}
+		const treePositions = Array.from(/* @__PURE__ */ new Set([...layoutIndexesByTreePosition.keys(), ...loadingIndexesByTreePosition.keys()])).sort((left, right) => left - right);
+		for (let index = treePositions.length - 1; index >= 0; index--) {
+			const treePosition = treePositions[index];
+			const loadingIndex = loadingIndexesByTreePosition.get(treePosition);
+			const LoadingComponent = loadingIndex === void 0 ? null : opts?.interceptLoadings?.[loadingIndex]?.default;
+			if (LoadingComponent) siblingInterceptElement = createElement(Suspense, { fallback: createElement(LoadingComponent) }, siblingInterceptElement);
+			const layoutIndexes = layoutIndexesByTreePosition.get(treePosition) ?? [];
+			for (let layoutOffset = layoutIndexes.length - 1; layoutOffset >= 0; layoutOffset--) {
+				const layoutIndex = layoutIndexes[layoutOffset];
+				const LayoutComponent = opts?.interceptLayouts?.[layoutIndex]?.default;
+				if (!LayoutComponent) continue;
+				const interceptLayoutSegments = opts?.interceptLayoutSegments?.[layoutIndex] ?? [];
+				siblingInterceptElement = createElement(LayoutComponent, { params: makeThenableParams(resolveInterceptLayoutParams(opts?.interceptBranchSegments ?? interceptLayoutSegments, interceptLayoutSegments, effectiveParams)) }, siblingInterceptElement);
+			}
 		}
 	}
 	return buildAppPageElements({
@@ -267,6 +291,8 @@ function buildSlotOverrides(route, routeParams, routePath, opts) {
 		branchSegments: opts.interceptBranchSegments ?? null,
 		layoutModules: opts.interceptLayouts || null,
 		layoutSegments: opts.interceptLayoutSegments ?? null,
+		loadingModules: opts.interceptLoadings || null,
+		loadingTreePositions: opts.interceptLoadingTreePositions ?? null,
 		pageModule: opts.interceptPage,
 		params: opts.interceptParams || routeParams,
 		routeSegments: resolveInterceptedSlotSegments(opts.interceptSourcePageSegments, opts.interceptSlotKey)

package/dist/server/app-page-head.d.ts

@@ -1,7 +1,7 @@
 import { MetadataFileRoute } from "./metadata-routes.js";
 import { AppPageParams } from "./app-page-boundary.js";
 import { ThenableParamsObserver } from "../shims/thenable-params.js";
-import { Metadata, Viewport } from "../shims/metadata.js";
+import { Metadata, ResolvedViewport } from "../shims/metadata.js";
 import { applyFileBasedMetadata } from "./file-based-metadata.js";
 
 //#region src/server/app-page-head.d.ts
@@ -96,11 +96,11 @@ type ResolveAppPageHeadResult = {
   hasSearchParams: boolean;
   metadata: Metadata | null;
   pageSearchParams: AppPageSearchParams;
-  viewport: Viewport;
+  viewport: ResolvedViewport;
 };
 type PreparedAppPageHead = Omit<ResolveAppPageHeadResult, "metadata" | "viewport"> & {
   metadata: Promise<Metadata | null>;
-  viewport: Promise<Viewport>;
+  viewport: Promise<ResolvedViewport>;
 };
 type AppPageSearchParamsCollection = {
   hasSearchParams: boolean;

package/dist/server/app-page-head.js

@@ -79,7 +79,7 @@ function resolveActiveParallelRouteHeadInputs(options) {
 			} : {},
 			ownerTreePosition
 		};
-	});
+	}).sort((left, right) => right.ownerTreePosition - left.ownerTreePosition);
 }
 function isPresent(value) {
 	return value !== null && value !== void 0;
@@ -165,11 +165,25 @@ async function resolveLayoutMetadata(layoutInputs, params, routeSegments) {
 	}
 	return Promise.all(layoutMetadataPromises);
 }
-async function resolveLayoutViewport(layoutInputs, params, routeSegments) {
-	return Promise.all(layoutInputs.map((layoutInput) => {
+function resolveLayoutViewport(layoutInputs, params, routeSegments) {
+	const viewportPromises = [];
+	let accumulatedViewport = Promise.resolve(mergeViewport([]));
+	for (const layoutInput of layoutInputs) {
+		const parentForLayout = accumulatedViewport;
 		const layoutParams = resolveAppPageSegmentParams(routeSegments, layoutInput.treePosition, params);
-		return resolveModuleViewport(layoutInput.module, layoutParams);
-	}));
+		const viewportPromise = resolveModuleViewport(layoutInput.module, layoutParams, void 0, parentForLayout);
+		viewportPromises.push(viewportPromise);
+		viewportPromise.catch(() => null);
+		accumulatedViewport = mergeResolvedViewport(parentForLayout, viewportPromise);
+		accumulatedViewport.catch(() => null);
+	}
+	return {
+		resolvedViewport: accumulatedViewport,
+		viewportResults: Promise.all(viewportPromises)
+	};
+}
+function mergeResolvedViewport(parent, viewport) {
+	return Promise.all([parent, viewport]).then(([resolvedParent, resolvedViewport]) => resolvedViewport ? mergeViewport([resolvedParent, resolvedViewport]) : resolvedParent);
 }
 function getParallelRouteModules(parallelRoute) {
 	return [...parallelRoute.layoutModules ?? [], parallelRoute.layoutModule].filter(isPresent);
@@ -211,16 +225,34 @@ async function resolveParallelRouteMetadata(parallelRoute, fallbackParams, fallb
 		metadataSources
 	};
 }
-async function resolveParallelRouteViewport(parallelRoute, fallbackParams, fallbackRouteSegments, pageSearchParams, searchParamsObserver) {
+function resolveParallelRouteViewport(parallelRoute, fallbackParams, fallbackRouteSegments, pageSearchParams, parent, searchParamsObserver) {
 	const params = parallelRoute.params ?? fallbackParams;
 	const routeSegments = parallelRoute.routeSegments ?? fallbackRouteSegments;
 	const layoutModules = getParallelRouteModules(parallelRoute);
 	const layoutTreePositions = parallelRoute.layoutTreePositions ?? [];
 	const layoutParams = parallelRoute.layoutParams ?? [];
-	const layoutViewportPromise = Promise.all(layoutModules.map((layoutModule, index) => resolveModuleViewport(layoutModule, layoutParams[index] ?? resolveParallelLayoutParams(routeSegments, layoutTreePositions[index] ?? 0, params))));
-	const pageViewportPromise = parallelRoute.pageModule ? resolveModuleViewport(parallelRoute.pageModule, params, pageSearchParams, searchParamsObserver) : Promise.resolve(null);
-	const [layoutViewports, pageViewport] = await Promise.all([layoutViewportPromise, pageViewportPromise]);
-	return parallelRoute.pageModule ? [...layoutViewports, pageViewport] : layoutViewports;
+	const viewportPromises = [];
+	let accumulatedViewport = parent;
+	for (const [index, layoutModule] of layoutModules.entries()) {
+		const parentForLayout = accumulatedViewport;
+		const viewportPromise = resolveModuleViewport(layoutModule, layoutParams[index] ?? resolveParallelLayoutParams(routeSegments, layoutTreePositions[index] ?? 0, params), void 0, parentForLayout);
+		viewportPromises.push(viewportPromise);
+		viewportPromise.catch(() => null);
+		accumulatedViewport = mergeResolvedViewport(parentForLayout, viewportPromise);
+		accumulatedViewport.catch(() => null);
+	}
+	if (parallelRoute.pageModule) {
+		const parentForPage = accumulatedViewport;
+		const viewportPromise = resolveModuleViewport(parallelRoute.pageModule, params, pageSearchParams, parentForPage, searchParamsObserver);
+		viewportPromises.push(viewportPromise);
+		viewportPromise.catch(() => null);
+		accumulatedViewport = mergeResolvedViewport(parentForPage, viewportPromise);
+		accumulatedViewport.catch(() => null);
+	}
+	return {
+		resolvedViewport: accumulatedViewport,
+		viewportResults: Promise.all(viewportPromises)
+	};
 }
 /**
 * Resolve an explicit metadata-source sequence.
@@ -279,16 +311,29 @@ function prepareAppPageHeadInner(options) {
 	const primaryHasDynamicMetadata = layoutInputs.some((input) => hasGenerateMetadata(input.module)) || hasGenerateMetadata(options.pageModule);
 	const { hasSearchParams, pageSearchParams } = collectAppPageSearchParams(options.searchParams);
 	const layoutMetadataPromise = resolveLayoutMetadata(layoutInputs, options.params, routeSegments);
-	const layoutViewportPromise = resolveLayoutViewport(layoutInputs, options.params, routeSegments);
+	const layoutViewport = resolveLayoutViewport(layoutInputs, options.params, routeSegments);
+	const layoutViewportPromise = layoutViewport.viewportResults;
 	const layoutMetadataResultsForParent = layoutMetadataPromise.then((metadataResults) => metadataResults.filter(isPresent));
 	layoutMetadataResultsForParent.catch(() => null);
 	const pageParentPromise = layoutMetadataResultsForParent.then((metadataResults) => metadataResults.length > 0 ? mergeMetadataEntries(metadataResults.map((metadata) => ({ metadata }))) : {});
 	pageParentPromise.catch(() => null);
 	const pageMetadataPromise = options.pageModule ? resolveModuleMetadata(options.pageModule, options.params, pageSearchParams, pageParentPromise, options.searchParamsObserver) : Promise.resolve(null);
-	const pageViewportPromise = options.pageModule ? resolveModuleViewport(options.pageModule, options.params, pageSearchParams, options.searchParamsObserver) : Promise.resolve(null);
 	const parallelRoutes = options.parallelRoutes ?? [];
 	const parallelRouteMetadataPromise = Promise.all(parallelRoutes.map((parallelRoute) => resolveParallelRouteMetadata(parallelRoute, options.params, routeSegments, pageSearchParams, pageParentPromise, options.searchParamsObserver)));
-	const parallelRouteViewportPromise = Promise.all(parallelRoutes.map((parallelRoute) => resolveParallelRouteViewport(parallelRoute, options.params, routeSegments, pageSearchParams, options.searchParamsObserver)));
+	const parallelRouteViewportPromises = [];
+	let accumulatedViewport = layoutViewport.resolvedViewport;
+	const pageParentViewport = accumulatedViewport;
+	const pageViewportPromise = options.pageModule ? resolveModuleViewport(options.pageModule, options.params, pageSearchParams, pageParentViewport, options.searchParamsObserver) : Promise.resolve(null);
+	if (options.pageModule) {
+		accumulatedViewport = mergeResolvedViewport(pageParentViewport, pageViewportPromise);
+		accumulatedViewport.catch(() => null);
+	}
+	for (const parallelRoute of parallelRoutes) {
+		const parallelViewport = resolveParallelRouteViewport(parallelRoute, options.params, routeSegments, pageSearchParams, accumulatedViewport, options.searchParamsObserver);
+		parallelRouteViewportPromises.push(parallelViewport.viewportResults);
+		accumulatedViewport = parallelViewport.resolvedViewport;
+	}
+	const parallelRouteViewportPromise = Promise.all(parallelRouteViewportPromises);
 	const hasDynamicMetadata = primaryHasDynamicMetadata || parallelRoutes.some(parallelRouteHasDynamicMetadata);
 	const metadata = Promise.all([
 		layoutMetadataPromise,

package/dist/server/app-page-http-access-fallback-metadata.d.ts

@@ -1,6 +1,6 @@
 import { MetadataFileRoute } from "./metadata-routes.js";
 import { AppPageParams } from "./app-page-boundary.js";
-import { Metadata, Viewport } from "../shims/metadata.js";
+import { Metadata, ResolvedViewport } from "../shims/metadata.js";
 import { ActiveParallelRouteHeadInput, AppPageHeadModule, ApplyAppPageFileBasedMetadata, OrderedAppPageMetadataSource } from "./app-page-head.js";
 
 //#region src/server/app-page-http-access-fallback-metadata.d.ts
@@ -24,6 +24,6 @@ type ResolveHttpAccessFallbackMetadataOptions<TModule extends AppPageHeadModule
 };
 declare function createHttpAccessFallbackMetadataPlan<TModule extends AppPageHeadModule>(options: HttpAccessFallbackMetadataPlanOptions<TModule>): OrderedAppPageMetadataSource<TModule>[];
 declare function resolveHttpAccessFallbackMetadata<TModule extends AppPageHeadModule>(options: ResolveHttpAccessFallbackMetadataOptions<TModule>): Promise<Metadata | null>;
-declare function resolveHttpAccessFallbackViewport<TModule extends AppPageHeadModule>(options: HttpAccessFallbackMetadataPlanOptions<TModule>): Promise<Viewport>;
+declare function resolveHttpAccessFallbackViewport<TModule extends AppPageHeadModule>(options: HttpAccessFallbackMetadataPlanOptions<TModule>): Promise<ResolvedViewport>;
 //#endregion
 export { createHttpAccessFallbackMetadataPlan, resolveHttpAccessFallbackMetadata, resolveHttpAccessFallbackViewport };

package/dist/server/app-page-http-access-fallback-metadata.js

@@ -100,7 +100,15 @@ function resolveHttpAccessFallbackMetadata(options) {
 	});
 }
 async function resolveHttpAccessFallbackViewport(options) {
-	return mergeViewport((await Promise.all(createHttpAccessFallbackPlan(options, "snapshot").map((source) => resolveModuleViewport(source.module, source.params)))).filter(isPresent));
+	let accumulatedViewport = Promise.resolve(mergeViewport([]));
+	for (const source of createHttpAccessFallbackPlan(options, "snapshot")) {
+		const parentForSource = accumulatedViewport;
+		const viewportPromise = resolveModuleViewport(source.module, source.params, void 0, parentForSource);
+		viewportPromise.catch(() => null);
+		accumulatedViewport = Promise.all([parentForSource, viewportPromise]).then(([parent, viewport]) => viewport ? mergeViewport([parent, viewport]) : parent);
+		accumulatedViewport.catch(() => null);
+	}
+	return accumulatedViewport;
 }
 //#endregion
 export { createHttpAccessFallbackMetadataPlan, resolveHttpAccessFallbackMetadata, resolveHttpAccessFallbackViewport };

package/dist/server/app-page-probe.d.ts

@@ -40,12 +40,16 @@ type AppPageProbeModule = Readonly<{
 }> | null | undefined;
 type AppPageProbeSlot = Readonly<{
   page?: AppPageProbeModule;
+  loading?: AppPageProbeModule;
+  loadings?: readonly AppPageProbeModule[] | null;
+  loadingTreePositions?: readonly number[] | null;
 }> | null | undefined;
 type AppPageProbeRoute = Readonly<{
   slots?: Readonly<Record<string, AppPageProbeSlot>> | null;
 }>;
 type AppPageProbeIntercept = Readonly<{
   page?: AppPageProbeModule;
+  interceptLoadings?: readonly AppPageProbeModule[] | null;
   matchedParams?: unknown;
   /**
    * Key of the parallel-route slot this interception overrides. At render

package/dist/server/app-page-probe.js

@@ -1,6 +1,6 @@
-import { markAppPagePropsForUseCache } from "../shims/internal/app-page-props-cache-key.js";
 import { isNextRouterError } from "../shims/navigation-errors.js";
 import "../shims/navigation-server.js";
+import { markAppPagePropsForUseCache } from "../shims/internal/app-page-props-cache-key.js";
 import { isPromiseLike } from "../utils/promise.js";
 import { probeAppPageComponent, probeAppPageLayouts } from "./app-page-execution.js";
 import { collectAppPageSearchParams } from "./app-page-head.js";
@@ -218,13 +218,17 @@ function buildAppPageProbes(options) {
 	const overriddenSlotKey = intercept?.slotKey ?? null;
 	for (const [slotKey, slot] of Object.entries(route.slots ?? {})) {
 		if (overriddenSlotKey !== null && slotKey === overriddenSlotKey) continue;
+		if (slot?.loading?.default || slot?.loadings?.some((loading) => loading?.default)) continue;
 		probes.push(probeAppPage({
 			pageComponent: slot?.page?.default,
 			asyncRouteParams,
 			searchParams
 		}));
 	}
-	if (intercept) probes.push(probeAppPage({
+	const interceptedSlot = intercept?.slotKey ? route.slots?.[intercept.slotKey] : null;
+	const interceptedSlotHasRootLoading = Boolean(interceptedSlot?.loading?.default || interceptedSlot?.loadings?.some((loading, index) => loading?.default && interceptedSlot.loadingTreePositions?.[index] === 0));
+	const interceptHasLoadingBoundary = Boolean(intercept?.interceptLoadings?.some((loading) => loading?.default) || interceptedSlotHasRootLoading);
+	if (intercept && !interceptHasLoadingBoundary) probes.push(probeAppPage({
 		pageComponent: intercept.page?.default,
 		asyncRouteParams: options.makeThenableParams(intercept.matchedParams ?? matchedParams),
 		searchParams

package/dist/server/app-page-request.d.ts

@@ -62,8 +62,11 @@ type AppPageInterceptMatch<TPage = unknown> = {
   interceptLayouts?: readonly unknown[] | null;
   interceptLayoutSegments?: readonly (readonly string[])[] | null;
   interceptBranchSegments?: readonly string[] | null;
+  interceptLoadings?: readonly unknown[] | null;
+  interceptLoadingTreePositions?: readonly number[] | null;
   interceptNotFoundBranchSegments?: readonly string[] | null;
   __loadInterceptLayouts?: readonly (() => Promise<unknown>)[] | null;
+  __loadInterceptLoadings?: readonly (() => Promise<unknown>)[] | null;
   matchedParams: AppPageParams;
   sourceMatchedParams?: AppPageParams;
   page: TPage;

package/dist/server/app-page-request.js

@@ -307,7 +307,7 @@ async function resolveAppPageInterceptState(options) {
 		if (loadState) loadState.notFoundLoading = loading;
 		await loading;
 	}
-	if (intercept.__loadInterceptLayouts) await loadAppInterceptLayouts(intercept);
+	if (intercept.__loadInterceptLayouts || intercept.__loadInterceptLoadings) await loadAppInterceptLayouts(intercept);
 	const sourceRoute = await options.getSourceRoute(intercept.sourceRouteIndex);
 	if (!sourceRoute) return { kind: "none" };
 	if (sourceRoute === options.currentRoute) return {

package/dist/server/app-page-response.js

@@ -1,6 +1,6 @@
 import { VINEXT_DYNAMIC_STALE_TIME_HEADER, VINEXT_MOUNTED_SLOTS_HEADER, VINEXT_PARAMS_HEADER, VINEXT_PRERENDER_CACHE_LIFE_HEADER, VINEXT_RENDERED_PATH_AND_SEARCH_HEADER, VINEXT_TIMING_HEADER } from "./headers.js";
-import { setCacheStateHeaders } from "./cache-headers.js";
 import { NO_STORE_CACHE_CONTROL, STATIC_CACHE_CONTROL, buildRevalidateCacheControl } from "./cache-control.js";
+import { setCacheStateHeaders } from "./cache-headers.js";
 import { VINEXT_RSC_CONTENT_TYPE, VINEXT_RSC_VARY_HEADER, applyRscCompatibilityIdHeader, applyRscDeploymentIdHeader } from "./app-rsc-cache-busting.js";
 import { mergeMiddlewareResponseHeaders } from "./middleware-response-headers.js";
 //#region src/server/app-page-response.ts

package/dist/server/app-page-route-wiring.d.ts

@@ -37,6 +37,9 @@ type AppPageRouteWiringSlot<TModule extends AppPageModule = AppPageModule, TErro
   layout?: TModule | null;
   layoutIndex: number;
   loading?: TModule | null;
+  loadings?: readonly (TModule | null | undefined)[] | null;
+  loadingTreePositions?: readonly number[] | null;
+  ownerTreePosition?: number | null;
   notFound?: TModule | null;
   notFoundTreePosition?: number | null;
   page?: TModule | null;
@@ -59,6 +62,8 @@ type AppPageRouteWiringRoute<TModule extends AppPageModule = AppPageModule, TErr
   layoutTreePositions?: readonly number[] | null;
   layouts: readonly (TModule | null | undefined)[];
   loading?: TModule | null;
+  loadings?: readonly (TModule | null | undefined)[] | null;
+  loadingTreePositions?: readonly number[] | null;
   notFound?: TModule | null;
   notFounds?: readonly (TModule | null | undefined)[] | null;
   notFoundTreePosition?: number | null;
@@ -99,6 +104,8 @@ type AppPageSlotOverride<TModule extends AppPageModule = AppPageModule> = {
   branchSegments?: readonly string[] | null;
   layoutSegments?: readonly (readonly string[])[] | null;
   layoutModules?: readonly (TModule | null | undefined)[] | null;
+  loadingModules?: readonly (TModule | null | undefined)[] | null;
+  loadingTreePositions?: readonly number[] | null;
   /**
    * The page module to render for this slot. Optional — when omitted, the
    * slot's existing `page` is used (e.g. when the override only changes the