From ffe807bf3974fa061b8d48683f081a86f866be84 Mon Sep 17 00:00:00 2001
From: nikolay_koskarev <rokealvo@gmail.com>
Date: Thu, 7 Nov 2024 23:45:21 +0700
Subject: [PATCH] add experimental.spaPreloaderOutside flag

---
 packages/nuxt/src/core/runtime/nitro/renderer.ts | 12 ++++++++----
 packages/nuxt/src/core/templates.ts              |  1 +
 packages/schema/src/config/experimental.ts       |  6 ++++++
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/packages/nuxt/src/core/runtime/nitro/renderer.ts b/packages/nuxt/src/core/runtime/nitro/renderer.ts
index 6e735c8a16..88b06d8526 100644
--- a/packages/nuxt/src/core/runtime/nitro/renderer.ts
+++ b/packages/nuxt/src/core/runtime/nitro/renderer.ts
@@ -30,7 +30,7 @@ import { renderSSRHeadOptions } from '#internal/unhead.config.mjs'
 
 import type { NuxtPayload, NuxtSSRContext } from '#app'
 // @ts-expect-error virtual file
-import { appHead, appId, appRootAttrs, appRootTag, appSpaLoaderAttrs, appSpaLoaderTag, appTeleportAttrs, appTeleportTag, componentIslands, multiApp } from '#internal/nuxt.config.mjs'
+import { appHead, appId, appRootAttrs, appRootTag, appSpaLoaderAttrs, appSpaLoaderTag, appTeleportAttrs, appTeleportTag, componentIslands, multiApp, spaPreloaderOutside } from '#internal/nuxt.config.mjs'
 // @ts-expect-error virtual file
 import { buildAssetsURL, publicAssetsURL } from '#internal/nuxt/paths'
 
@@ -145,9 +145,13 @@ const getSPARenderer = lazyCachedFunction(async () => {
   // @ts-expect-error virtual file
   const spaTemplate = await import('#spa-template').then(r => r.template).catch(() => '')
     .then((r) => {
-      const appTemplate = APP_ROOT_OPEN_TAG + APP_ROOT_CLOSE_TAG
-      const loaderTemplate = r ? APP_SPA_LOADER_OPEN_TAG + r + APP_SPA_LOADER_CLOSE_TAG : ''
-      return appTemplate + loaderTemplate
+      if (spaPreloaderOutside) {
+        const appTemplate = APP_ROOT_OPEN_TAG + APP_ROOT_CLOSE_TAG
+        const loaderTemplate = r ? APP_SPA_LOADER_OPEN_TAG + r + APP_SPA_LOADER_CLOSE_TAG : ''
+        return appTemplate + loaderTemplate
+      } else {
+        return APP_ROOT_OPEN_TAG + r + APP_ROOT_CLOSE_TAG
+      }
     })
 
   const options = {
diff --git a/packages/nuxt/src/core/templates.ts b/packages/nuxt/src/core/templates.ts
index a21352deba..d657db731e 100644
--- a/packages/nuxt/src/core/templates.ts
+++ b/packages/nuxt/src/core/templates.ts
@@ -524,6 +524,7 @@ export const nuxtConfigTemplate: NuxtTemplate = {
       `export const multiApp = ${!!ctx.nuxt.options.future.multiApp}`,
       `export const chunkErrorEvent = ${ctx.nuxt.options.experimental.emitRouteChunkError ? ctx.nuxt.options.builder === '@nuxt/vite-builder' ? '"vite:preloadError"' : '"nuxt:preloadError"' : 'false'}`,
       `export const crawlLinks = ${!!((ctx.nuxt as any)._nitro as Nitro).options.prerender.crawlLinks}`,
+      `export const spaPreloaderOutside = ${ctx.nuxt.options.experimental.spaPreloaderOutside}`,
     ].join('\n\n')
   },
 }
diff --git a/packages/schema/src/config/experimental.ts b/packages/schema/src/config/experimental.ts
index 00ae9e2e0c..9396527ef4 100644
--- a/packages/schema/src/config/experimental.ts
+++ b/packages/schema/src/config/experimental.ts
@@ -407,5 +407,11 @@ export default defineUntypedSchema({
         return val ?? ((await get('future') as Record<string, unknown>).compatibilityVersion === 4)
       },
     },
+
+    /**
+     * Keep showing the spa-loading-template until suspense:resolve
+     * @see [Nuxt Issues #24770](https://github.com/nuxt/nuxt/issues/21721)
+     */
+    spaPreloaderOutside: false,
   },
 })