loading: add throttle option to skip progress for fast loads (#3886)

* loading: add throttle option to skip progress for fast loads

* Disable some tests relying on internals

lib/app/components/nuxt-loading.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="nuxt-progress" :style="{
-    'width': percent+'%',
+    'width': percent + '%',
     'height': height,
-    'background-color': canSuccess? color : failedColor,
+    'background-color': canSuccess ? color : failedColor,
     'opacity': show ? 1 : 0
   }"></div>
 </template>
@@ -17,6 +17,7 @@ export default {
       percent: 0,
       show: false,
       canSuccess: true,
+      throttle: 200,
       duration: <%= loading.duration %>,
       height: '<%= loading.height %>',
       color: '<%= loading.color %>',
@@ -25,12 +26,17 @@ export default {
   },
   methods: {
     start () {
-      this.show = true
       this.canSuccess = true
+      if (this._throttle) {
+        clearTimeout(this._throttle)
+      }
       if (this._timer) {
         clearInterval(this._timer)
+        this._timer = null
         this.percent = 0
       }
+      this._throttle = setTimeout(() => {
+        this.show = true
         this._cut = 10000 / Math.floor(this.duration)
         this._timer = setInterval(() => {
           this.increase(this._cut * Math.random())
@@ -38,6 +44,7 @@ export default {
             this.finish()
           }
         }, 100)
+      }, this.throttle)
       return this
     },
     set (num) {
@@ -69,6 +76,8 @@ export default {
     hide () {
       clearInterval(this._timer)
       this._timer = null
+      clearTimeout(this._throttle)
+      this._throttle = null
       setTimeout(() => {
         this.show = false
         Vue.nextTick(() => {

test/e2e/basic.browser.test.js

@@ -43,9 +43,7 @@ describe('basic browser', () => {
 
   test('/stateless', async () => {
     const { hook } = await page.nuxt.navigate('/stateless', false)
-    const loading = await page.nuxt.loadingData()
 
-    expect(loading.show).toBe(true)
     await hook
     expect(await page.$text('h1')).toBe('My component!')
   })

test/e2e/children.patch.browser.test.js

@@ -37,8 +37,6 @@ describe('children patch (browser)', () => {
 
   test('Navigate to /patch/1', async () => {
     const { hook } = await page.nuxt.navigate('/patch/1', false)
-    const loading = await page.nuxt.loadingData()
-    expect(loading.show).toBe(true)
     await hook
 
     const h2 = await page.$text('h2')

test/fixtures/basic/pages/noloading.vue

@@ -13,7 +13,7 @@ export default {
       setTimeout(() => resolve({
         loaded: false,
         name: 'Nuxt.js'
-      }), 10)
+      }), 300)
     })
   },
   mounted() {