Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2025-01-30 23:32:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

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

* Disable some tests relying on internals
This commit is contained in:
Tatsuyuki Ishi 2018-09-19 01:16:27 +09:00 committed by Sébastien Chopin
parent 5af65527b0
commit d1f6f0dc09
4 changed files with 20 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
lib/app/components/nuxt-loading.vue
View File

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

2
test/e2e/basic.browser.test.js
View File

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

2
test/e2e/children.patch.browser.test.js
View File

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

2
test/fixtures/basic/pages/noloading.vue vendored
View File

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