mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-11 08:33:53 +00:00
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)
This commit is contained in:
parent
dbba872be2
commit
0e42e98751
5
examples/custom-page-loading/README.md
Normal file
5
examples/custom-page-loading/README.md
Normal file
@ -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.
|
11
examples/custom-page-loading/package.json
Normal file
11
examples/custom-page-loading/package.json
Normal file
@ -0,0 +1,11 @@
|
||||
{
|
||||
"name": "example-custom-page-loading",
|
||||
"dependencies": {
|
||||
"nuxt": "latest"
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "nuxt",
|
||||
"build": "nuxt build",
|
||||
"start": "nuxt start"
|
||||
}
|
||||
}
|
49
examples/custom-page-loading/pages/about.vue
Normal file
49
examples/custom-page-loading/pages/about.vue
Normal file
@ -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>
|
19
examples/custom-page-loading/pages/final.vue
Normal file
19
examples/custom-page-loading/pages/final.vue
Normal file
@ -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>
|
26
examples/custom-page-loading/pages/index.vue
Normal file
26
examples/custom-page-loading/pages/index.vue
Normal file
@ -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>
|
@ -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
|
||||
|
@ -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()
|
||||
|
22
test/fixtures/basic/pages/noloading.vue
vendored
Normal file
22
test/fixtures/basic/pages/noloading.vue
vendored
Normal file
@ -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>
|
Loading…
Reference in New Issue
Block a user