feat: allow disabling loading-screen (#6272)

packages/config/src/config/build.js

@@ -3,11 +3,6 @@ import env from 'std-env'
 export default () => ({
   quiet: Boolean(env.ci || env.test),
   analyze: false,
-  indicator: {
-    position: 'bottom-right',
-    backgroundColor: '#2E495E',
-    color: '#00C48D'
-  },
   profile: process.argv.includes('--profile'),
   extractCSS: false,
   crossorigin: undefined,
@@ -121,5 +116,13 @@ export default () => ({
   friendlyErrors: true,
   additionalExtensions: [],
   warningIgnoreFilters: [],
-  followSymlinks: false
+
+  followSymlinks: false,
+
+  loadingScreen: {},
+  indicator: {
+    position: 'bottom-right',
+    backgroundColor: '#2E495E',
+    color: '#00C48D'
+  }
 })

packages/config/src/options.js

@@ -404,13 +404,19 @@ export function getNuxtConfig (_options) {
     bundleRenderer.runInNewContext = options.dev
   }
 
-  // Add loading screen
+  // Loading screen
-  if (options.dev) {
+  // disable for production and programmatic users
-    options.buildModules.push('@nuxt/loading-screen')
+  if (!options.dev || !options._cli) {
-    // Disable build indicator for programmatic users
+    options.build.loadingScreen = false
-    if (!options._cli) {
+  }
-      options.build.indicator = false
+  // Add loading-screen module
-    }
+  if (options.build.loadingScreen) {
+    options.buildModules.push(['@nuxt/loading-screen', options.build.loadingScreen])
+  }
+
+  // When loadingScreen is disabled we should also disable build indicator
+  if (!options.build.loadingScreen) {
+    options.build.indicator = false
   }
 
   const { timing } = options.server

packages/config/test/__snapshots__/options.test.js.snap

@@ -57,11 +57,7 @@ Object {
         "useShortDoctype": true,
       },
     },
-    "indicator": Object {
+    "indicator": false,
-      "backgroundColor": "#2E495E",
-      "color": "#00C48D",
-      "position": "bottom-right",
-    },
     "loaders": Object {
       "css": Object {
         "sourceMap": false,
@@ -108,6 +104,7 @@ Object {
         "sourceMap": false,
       },
     },
+    "loadingScreen": false,
     "optimization": Object {
       "minimize": true,
       "minimizer": undefined,

packages/config/test/config/__snapshots__/index.test.js.snap

@@ -82,6 +82,7 @@ Object {
       },
       "vueStyle": Object {},
     },
+    "loadingScreen": Object {},
     "optimization": Object {
       "minimize": undefined,
       "minimizer": undefined,
@@ -437,6 +438,7 @@ Object {
       },
       "vueStyle": Object {},
     },
+    "loadingScreen": Object {},
     "optimization": Object {
       "minimize": undefined,
       "minimizer": undefined,

packages/vue-renderer/src/renderer.js

@@ -2,7 +2,7 @@ import path from 'path'
 import fs from 'fs-extra'
 import consola from 'consola'
 import template from 'lodash/template'
-import { isModernRequest } from '@nuxt/utils'
+import { isModernRequest, waitFor } from '@nuxt/utils'
 
 import SPARenderer from './renderers/spa'
 import SSRRenderer from './renderers/ssr'
@@ -238,30 +238,35 @@ export default class VueRenderer {
     return renderer.render(renderContext)
   }
 
-  async renderRoute (url, renderContext = {}, _retried) {
+  async renderRoute (url, renderContext = {}, _retried = 0) {
     /* istanbul ignore if */
     if (!this.isReady) {
-      // Production
+      // Fall-back to loading-screen if enabled
-      if (!this.options.dev) {
+      if (this.options.build.loadingScreen) {
-        if (!_retried && ['loading', 'created'].includes(this._state)) {
+        // Tell nuxt middleware to use `server:nuxt:renderLoading hook
-          await this.ready()
+        return false
-          return this.renderRoute(url, renderContext, true)
+      }
-        }
+
-        switch (this._state) {
+      // Retry
-          case 'created':
+      const retryLimit = this.options.dev ? 60 : 3
-            throw new Error('Renderer ready() is not called! Please ensure `nuxt.ready()` is called and awaited.')
+      if (_retried < retryLimit && this._state !== 'error') {
-          case 'loading':
+        await this.ready().then(() => waitFor(1000))
-            throw new Error('Renderer is loading.')
+        return this.renderRoute(url, renderContext, _retried + 1)
-          case 'error':
+      }
-            throw this._error
+
-          case 'ready':
+      // Throw Error
-            throw new Error(`Renderer is loaded but not all resources are available! Please check ${this.distPath} existence.`)
+      switch (this._state) {
-          default:
+        case 'created':
-            throw new Error('Renderer is in unknown state!')
+          throw new Error('Renderer ready() is not called! Please ensure `nuxt.ready()` is called and awaited.')
-        }
+        case 'loading':
+          throw new Error('Renderer is loading.')
+        case 'error':
+          throw this._error
+        case 'ready':
+          throw new Error(`Renderer resources are not loaded! Please check possible console errors and ensure dist (${this.distPath}) exists.`)
+        default:
+          throw new Error('Renderer is in unknown state!')
       }
-      // Tell nuxt middleware to render UI
-      return false
     }
 
     // Log rendered url