Add loading: false option to pages (#3629)

* Add hasManualLoading

* Add hasManualLoading (2)

* Debugging

* Debugging (2)

* Change 'manual' to false

* Add custom-page-loading example

* Add custom-page-loading example (2)

* Changed approach

* Added custom-page-loading/README.md

* Change running loading time in about.vue

* Patch loadAsyncComponents

* Added final page

* Changed approach (2)

* Fixed example

* Fixed example (2)

* Fix example package name

* Linting

* Improved examples (more to the point)

* Linting (2)

* Fix typo

* Adjust indentation

* Added noloading.vue to basic fixture

* Added noloading tests

* Linting (3)

* Debugging test

* Linting (4)

* Debugging test (2)

* Debugging test (3)

examples/custom-page-loading/README.md

@@ -0,0 +1,5 @@
+# Custom page loading with Nuxt.js
+
+https://nuxtjs.org/examples/custom-page-loading
+
+Use `loading: false` in page to manually call $loading.finish() and $loading.start() methods.

examples/custom-page-loading/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "example-custom-page-loading",
+  "dependencies": {
+    "nuxt": "latest"
+  },
+  "scripts": {
+    "dev": "nuxt",
+    "build": "nuxt build",
+    "start": "nuxt start"
+  }
+}

examples/custom-page-loading/pages/about.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="container">
+    <p>About Page</p>
+    <p>It should take 5 seconds for the loader to disappear</p>
+    <p>It should take 5 seconds for the route to change after you
+    <span class="link" @click="goToFinal">click here</span></p>
+  </div>
+</template>
+
+<script>
+export default {
+  loading: false,
+  asyncData() {
+    return new Promise((resolve) => {
+      setTimeout(function () {
+        resolve({})
+      }, 1000)
+    })
+  },
+  mounted() {
+    setTimeout(() => {
+      // Extend loader for an additional 5s
+      this.$nuxt.$loading.finish()
+    }, 5000)
+  },
+  methods: {
+    goToFinal() {
+      // Start loader immediately
+      this.$nuxt.$loading.start()
+      // Actually change route 5s later
+      setTimeout(() => {
+        this.$router.push('/final')
+      }, 5000)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.link {
+  cursor: pointer;
+  text-decoration: underline;
+}
+.container {
+  font-size: 20px;
+  text-align: center;
+  padding-top: 100px;
+}
+</style>

examples/custom-page-loading/pages/final.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="container">
+    <p>Final Page</p>
+    <nuxt-link to="/">Go to /</nuxt-link>
+  </div>
+</template>
+
+<script>
+export default {
+}
+</script>
+
+<style scoped>
+.container {
+  font-size: 20px;
+  text-align: center;
+  padding-top: 100px;
+}
+</style>

examples/custom-page-loading/pages/index.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="container">
+    <p>Hello {{ name }}!</p>
+    <nuxt-link to="/about">Go to /about</nuxt-link>
+  </div>
+</template>
+
+<script>
+export default {
+  asyncData() {
+    return new Promise((resolve) => {
+      setTimeout(function () {
+        resolve({ name: 'world' })
+      }, 1000)
+    })
+  }
+}
+</script>
+
+<style scoped>
+.container {
+  font-size: 20px;
+  text-align: center;
+  padding-top: 100px;
+}
+</style>

lib/app/client.js

@@ -115,7 +115,7 @@ async function loadAsyncComponents (to, from, next) {
   this._diffQuery = (this._queryChanged ? getQueryDiff(to.query, from.query) : [])
 
   <% if (loading) { %>
-  if (this._pathChanged && this.$loading.start) {
+  if (this._pathChanged && this.$loading.start && !this.$loading.manual) {
     this.$loading.start()
   }
   <% } %>
@@ -133,7 +133,7 @@ async function loadAsyncComponents (to, from, next) {
         }
         return false
       })
-      if (startLoader && this.$loading.start) {
+      if (startLoader && this.$loading.start && !this.$loading.manual) {
         this.$loading.start()
       }
     }
@@ -316,7 +316,7 @@ async function render (to, from, next) {
 
       const hasAsyncData = Component.options.asyncData && typeof Component.options.asyncData === 'function'
       const hasFetch = !!Component.options.fetch
-      <% if(loading) { %>const loadingIncrease = (hasAsyncData && hasFetch) ? 30 : 45<% } %>
+      <% if (loading) { %>const loadingIncrease = (hasAsyncData && hasFetch) ? 30 : 45<% } %>
 
       // Call asyncData(context)
       if (hasAsyncData) {
@@ -328,6 +328,9 @@ async function render (to, from, next) {
         promises.push(promise)
       }
 
+      // Check disabled page loading
+      this.$loading.manual = Component.options.loading === false
+      
       // Call fetch(context)
       if (hasFetch) {
         let p = Component.options.fetch(app.context)
@@ -345,7 +348,10 @@ async function render (to, from, next) {
 
     // If not redirected
     if (!nextCalled) {
-      <% if (loading) { %>if(this.$loading.finish) this.$loading.finish()<% } %>
+      
+      <% if (loading) { %>
+      if (this.$loading.finish && !this.$loading.manual) this.$loading.finish()
+      <% } %>
       next()
     }
 
@@ -489,7 +495,9 @@ function addHotReload ($component, depth) {
       next: next.bind(this)
     })
     const context = app.context
-    <%= (loading ? 'this.$loading.start && this.$loading.start()' : '') %>
+    <% if (loading) { %>
+    if (this.$loading.start && !this.$loading.manual) this.$loading.start()
+    <% } %>
     callMiddleware.call(this, Components, context)
     .then(() => {
       // If layout changed

test/e2e/basic.browser.test.js

@@ -27,6 +27,20 @@ describe('basic browser', () => {
     expect(await page.$text('h1')).toBe('Index page')
   })
 
+  test('/noloading', async () => {
+    const { hook } = await page.nuxt.navigate('/noloading', true)
+    let loading = await page.nuxt.loadingData()
+
+    expect(loading.show).toBe(true)
+    await hook
+    expect(loading.show).toBe(true)
+    await new Promise((resolve) => {
+      setTimeout(() => resolve(), 1800)
+    })
+    loading = await page.nuxt.loadingData()
+    expect(loading.percent).toBe(100)
+  })
+
   test('/stateless', async () => {
     const { hook } = await page.nuxt.navigate('/stateless', false)
     const loading = await page.nuxt.loadingData()

test/fixtures/basic/pages/noloading.vue

@@ -0,0 +1,22 @@
+<template>
+  <p>{{ name }}</p>
+</template>
+
+<script>
+export default {
+  loading: false,
+  asyncData() {
+    return new Promise((resolve) => {
+      setTimeout(() => resolve({ name: 'Nuxt.js' }), 10)
+    })
+  },
+  watch: {
+    $route(to) {
+      this.$nuxt.$loading.start()
+    }
+  },
+  mounted() {
+    setTimeout(() => this.$nuxt.$loading.finish(), 1500)
+  }
+}
+</script>