Merge pull request #420 from h3poteto/iss-415

closes #415 Display loading on the timeline space instead of loading covering the whole
This commit is contained in:
AkiraFukushima 2018-07-02 22:11:48 +09:00 committed by GitHub
commit f04748bdda
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 241 additions and 305 deletions

View File

@ -1,5 +1,10 @@
<template>
<div id="timeline_space">
<div
id="timeline_space"
v-loading="loading"
element-loading-text="Loading..."
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)">
<side-menu></side-menu>
<div class="page">
<header class="header" style="-webkit-app-region: drag;">
@ -12,6 +17,7 @@
</template>
<script>
import { mapState } from 'vuex'
import SideMenu from './TimelineSpace/SideMenu'
import HeaderMenu from './TimelineSpace/HeaderMenu'
import Contents from './TimelineSpace/Contents'
@ -21,20 +27,16 @@ import Mousetrap from 'mousetrap'
export default {
name: 'timeline-space',
components: { SideMenu, HeaderMenu, Modals, Contents },
created () {
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
computed: {
...mapState({
loading: state => state.TimelineSpace.loading
})
},
created () {
this.$store.commit('TimelineSpace/changeLoading', true)
this.initialize()
.then(() => {
loading.close()
this.$store.commit('GlobalHeader/updateChanging', false)
})
.catch(() => {
loading.close()
.finally(() => {
this.$store.commit('TimelineSpace/changeLoading', false)
this.$store.commit('GlobalHeader/updateChanging', false)
})
},

View File

@ -27,23 +27,17 @@ export default {
})
},
created () {
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
this.$store.commit('TimelineSpace/changeLoading', true)
this.$store.dispatch('TimelineSpace/Contents/Favourites/fetchFavourites', this.account)
.then(() => {
loading.close()
})
.catch(() => {
loading.close()
this.$message({
message: 'Could not fetch favourites',
type: 'error'
})
})
.finally(() => {
this.$store.commit('TimelineSpace/changeLoading', false)
})
},
mounted () {
document.getElementById('scrollable').addEventListener('scroll', this.onScroll)
@ -84,36 +78,34 @@ export default {
}
},
async reload () {
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
const account = await this.$store.dispatch('TimelineSpace/localAccount', this.$route.params.id).catch(() => {
this.$message({
message: 'Could not find account',
type: 'error'
})
})
await this.$store.dispatch('TimelineSpace/stopUserStreaming')
await this.$store.dispatch('TimelineSpace/stopLocalStreaming')
await this.$store.dispatch('TimelineSpace/Contents/Home/fetchTimeline', account)
await this.$store.dispatch('TimelineSpace/Contents/Local/fetchLocalTimeline', account)
await this.$store.dispatch('TimelineSpace/Contents/Favourites/fetchFavourites', account)
.catch(() => {
loading.close()
this.$store.commit('TimelineSpace/changeLoading', true)
try {
const account = await this.$store.dispatch('TimelineSpace/localAccount', this.$route.params.id).catch((err) => {
this.$message({
message: 'Could not fetch favourites',
message: 'Could not find account',
type: 'error'
})
throw err
})
this.$store.dispatch('TimelineSpace/startUserStreaming', account)
this.$store.dispatch('TimelineSpace/startLocalStreaming', account)
loading.close()
await this.$store.dispatch('TimelineSpace/stopUserStreaming')
await this.$store.dispatch('TimelineSpace/stopLocalStreaming')
await this.$store.dispatch('TimelineSpace/Contents/Home/fetchTimeline', account)
await this.$store.dispatch('TimelineSpace/Contents/Local/fetchLocalTimeline', account)
await this.$store.dispatch('TimelineSpace/Contents/Favourites/fetchFavourites', account)
.catch(() => {
this.$message({
message: 'Could not fetch favourites',
type: 'error'
})
})
this.$store.dispatch('TimelineSpace/startUserStreaming', account)
this.$store.dispatch('TimelineSpace/startLocalStreaming', account)
} finally {
this.$store.commit('TimelineSpace/changeLoading', false)
}
}
}
}

View File

@ -31,36 +31,20 @@ export default {
})
},
mounted () {
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
this.$store.commit('TimelineSpace/changeLoading', true)
this.load(this.tag)
.then(() => {
loading.close()
})
.catch(() => {
loading.close()
.finally(() => {
this.$store.commit('TimelineSpace/changeLoading', false)
})
document.getElementById('scrollable').addEventListener('scroll', this.onScroll)
},
watch: {
tag: function (newTag, oldTag) {
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
this.$store.commit('TimelineSpace/changeLoading', true)
this.reset()
this.load(newTag)
.then(() => {
loading.close()
})
.catch(() => {
loading.close()
.finally(() => {
this.$store.commit('TimelineSpace/changeLoading', false)
})
},
startReload: function (newState, oldState) {
@ -130,44 +114,42 @@ export default {
},
async reload () {
const tag = this.tag
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
const account = await this.$store.dispatch('TimelineSpace/localAccount', this.$route.params.id).catch(() => {
this.$message({
message: 'Could not find account',
type: 'error'
})
})
await this.$store.dispatch('TimelineSpace/stopUserStreaming')
await this.$store.dispatch('TimelineSpace/stopLocalStreaming')
await this.$store.dispatch('TimelineSpace/Contents/Hashtag/Tag/stopStreaming')
await this.$store.dispatch('TimelineSpace/Contents/Home/fetchTimeline', account)
await this.$store.dispatch('TimelineSpace/Contents/Local/fetchLocalTimeline', account)
await this.$store.dispatch('TimelineSpace/Contents/Hashtag/Tag/fetch', tag)
.catch(() => {
this.$store.commit('TimelineSpace/changeLoading', true)
try {
const account = await this.$store.dispatch('TimelineSpace/localAccount', this.$route.params.id).catch((err) => {
this.$message({
message: 'Could not fetch timeline with tag',
message: 'Could not find account',
type: 'error'
})
throw err
})
this.$store.dispatch('TimelineSpace/startUserStreaming', account)
this.$store.dispatch('TimelineSpace/startLocalStreaming', account)
this.$store.dispatch('TimelineSpace/Contents/Hashtag/Tag/startStreaming', tag)
.catch(() => {
loading.close()
this.$message({
message: 'Failed to restart streaming',
type: 'error'
await this.$store.dispatch('TimelineSpace/stopUserStreaming')
await this.$store.dispatch('TimelineSpace/stopLocalStreaming')
await this.$store.dispatch('TimelineSpace/Contents/Hashtag/Tag/stopStreaming')
await this.$store.dispatch('TimelineSpace/Contents/Home/fetchTimeline', account)
await this.$store.dispatch('TimelineSpace/Contents/Local/fetchLocalTimeline', account)
await this.$store.dispatch('TimelineSpace/Contents/Hashtag/Tag/fetch', tag)
.catch(() => {
this.$message({
message: 'Could not fetch timeline with tag',
type: 'error'
})
})
})
loading.close()
this.$store.dispatch('TimelineSpace/startUserStreaming', account)
this.$store.dispatch('TimelineSpace/startLocalStreaming', account)
this.$store.dispatch('TimelineSpace/Contents/Hashtag/Tag/startStreaming', tag)
.catch(() => {
this.$message({
message: 'Failed to restart streaming',
type: 'error'
})
})
} finally {
this.$store.commit('TimelineSpace/changeLoading', false)
}
}
}
}

View File

@ -85,41 +85,38 @@ export default {
this.$store.commit('TimelineSpace/Contents/Home/deleteToot', message)
},
async reload () {
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
const account = await this.$store.dispatch('TimelineSpace/localAccount', this.$route.params.id).catch(() => {
this.$message({
message: 'Could not find account',
type: 'error'
})
})
await this.$store.dispatch('TimelineSpace/stopUserStreaming')
await this.$store.dispatch('TimelineSpace/stopLocalStreaming')
await this.$store.dispatch('TimelineSpace/Contents/Home/fetchTimeline', account)
.catch(() => {
loading.close()
this.$store.commit('TimelineSpace/changeLoading', true)
try {
const account = await this.$store.dispatch('TimelineSpace/localAccount', this.$route.params.id).catch((err) => {
this.$message({
message: 'Could not fetch timeline',
message: 'Could not find account',
type: 'error'
})
throw err
})
await this.$store.dispatch('TimelineSpace/Contents/Local/fetchLocalTimeline', account)
await this.$store.dispatch('TimelineSpace/stopUserStreaming')
await this.$store.dispatch('TimelineSpace/stopLocalStreaming')
this.$store.dispatch('TimelineSpace/startUserStreaming', account)
.catch(() => {
loading.close()
this.$message({
message: 'Failed to restart streaming',
type: 'error'
await this.$store.dispatch('TimelineSpace/Contents/Home/fetchTimeline', account)
.catch(() => {
this.$message({
message: 'Could not fetch timeline',
type: 'error'
})
})
})
this.$store.dispatch('TimelineSpace/startLocalStreaming', account)
loading.close()
await this.$store.dispatch('TimelineSpace/Contents/Local/fetchLocalTimeline', account)
this.$store.dispatch('TimelineSpace/startUserStreaming', account)
.catch(() => {
this.$message({
message: 'Failed to restart streaming',
type: 'error'
})
})
this.$store.dispatch('TimelineSpace/startLocalStreaming', account)
} finally {
this.$store.commit('TimelineSpace/changeLoading', false)
}
}
}
}

View File

@ -29,12 +29,7 @@ export default {
},
methods: {
async init () {
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
this.$store.commit('TimelineSpace/changeLoading', true)
try {
await this.$store.dispatch('TimelineSpace/Contents/Lists/Edit/fetchMembers', this.list_id)
} catch (err) {
@ -43,16 +38,11 @@ export default {
type: 'error'
})
} finally {
loading.close()
this.$store.commit('TimelineSpace/changeLoading', false)
}
},
async removeAccount (account) {
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
this.$store.commit('TimelineSpace/changeLoading', true)
try {
await this.$store.dispatch('TimelineSpace/Contents/Lists/Edit/removeAccount', {
account: account,
@ -65,7 +55,7 @@ export default {
type: 'error'
})
} finally {
loading.close()
this.$store.commit('TimelineSpace/changeLoading', false)
}
},
addAccount () {

View File

@ -39,15 +39,10 @@ export default {
})
},
created () {
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
this.$store.commit('TimelineSpace/changeLoading', true)
this.fetch()
.finally(() => {
loading.close()
this.$store.commit('TimelineSpace/changeLoading', false)
})
},
methods: {

View File

@ -31,29 +31,19 @@ export default {
})
},
created () {
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
this.$store.commit('TimelineSpace/changeLoading', true)
this.load()
.then(() => {
loading.close()
.finally(() => {
this.$store.commit('TimelineSpace/changeLoading', false)
})
document.getElementById('scrollable').addEventListener('scroll', this.onScroll)
},
watch: {
list_id: function () {
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
this.$store.commit('TimelineSpace/changeLoading', true)
this.load()
.then(() => {
loading.close()
.finally(() => {
this.$store.commit('TimelineSpace/changeLoading', false)
})
},
startReload: function (newState, oldState) {
@ -120,43 +110,42 @@ export default {
}
},
async reload () {
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
const account = await this.$store.dispatch('TimelineSpace/localAccount', this.$route.params.id).catch(() => {
this.$message({
message: 'Could not find account',
type: 'error'
})
})
await this.$store.dispatch('TimelineSpace/stopUserStreaming')
await this.$store.dispatch('TimelineSpace/stopLocalStreaming')
await this.$store.dispatch('TimelineSpace/Contents/Lists/Show/stopStreaming')
await this.$store.dispatch('TimelineSpace/Contents/Home/fetchTimeline', account)
await this.$store.dispatch('TimelineSpace/Contents/Local/fetchLocalTimeline', account)
await this.$store.dispatch('TimelineSpace/Contents/Lists/Show/fetchTimeline', this.list_id)
.catch(() => {
this.$store.commit('TimelineSpace/changeLoading', true)
try {
const account = await this.$store.dispatch('TimelineSpace/localAccount', this.$route.params.id).catch((err) => {
this.$message({
message: 'Could not fetch timeline',
message: 'Could not find account',
type: 'error'
})
throw err
})
this.$store.dispatch('TimelineSpace/startUserStreaming', account)
this.$store.dispatch('TimelineSpace/startLocalStreaming', account)
this.$store.dispatch('TimelineSpace/Contents/Lists/Show/startStreaming', this.list_id)
.catch(() => {
this.$message({
message: 'Failed to restart streaming',
type: 'error'
await this.$store.dispatch('TimelineSpace/stopUserStreaming')
await this.$store.dispatch('TimelineSpace/stopLocalStreaming')
await this.$store.dispatch('TimelineSpace/Contents/Lists/Show/stopStreaming')
await this.$store.dispatch('TimelineSpace/Contents/Home/fetchTimeline', account)
await this.$store.dispatch('TimelineSpace/Contents/Local/fetchLocalTimeline', account)
await this.$store.dispatch('TimelineSpace/Contents/Lists/Show/fetchTimeline', this.list_id)
.catch(() => {
this.$message({
message: 'Could not fetch timeline',
type: 'error'
})
})
})
loading.close()
this.$store.dispatch('TimelineSpace/startUserStreaming', account)
this.$store.dispatch('TimelineSpace/startLocalStreaming', account)
this.$store.dispatch('TimelineSpace/Contents/Lists/Show/startStreaming', this.list_id)
.catch(() => {
this.$message({
message: 'Failed to restart streaming',
type: 'error'
})
})
} finally {
this.$store.commit('TimelineSpace/changeLoading', false)
}
}
}
}

View File

@ -84,41 +84,38 @@ export default {
}
},
async reload () {
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
const account = await this.$store.dispatch('TimelineSpace/localAccount', this.$route.params.id).catch(() => {
this.$message({
message: 'Could not find account',
type: 'error'
})
})
await this.$store.dispatch('TimelineSpace/stopUserStreaming')
await this.$store.dispatch('TimelineSpace/stopLocalStreaming')
await this.$store.dispatch('TimelineSpace/Contents/Home/fetchTimeline', account)
await this.$store.dispatch('TimelineSpace/Contents/Local/fetchLocalTimeline', account)
.catch(() => {
loading.close()
this.$store.commit('TimelineSpace/changeLoading', true)
try {
const account = await this.$store.dispatch('TimelineSpace/localAccount', this.$route.params.id).catch((err) => {
this.$message({
message: 'Could not fetch local timeline',
message: 'Could not find account',
type: 'error'
})
throw err
})
await this.$store.dispatch('TimelineSpace/stopUserStreaming')
await this.$store.dispatch('TimelineSpace/stopLocalStreaming')
this.$store.dispatch('TimelineSpace/startUserStreaming', account)
this.$store.dispatch('TimelineSpace/startLocalStreaming', account)
.catch(() => {
loading.close()
this.$message({
message: 'Failed to restart streaming',
type: 'error'
await this.$store.dispatch('TimelineSpace/Contents/Home/fetchTimeline', account)
await this.$store.dispatch('TimelineSpace/Contents/Local/fetchLocalTimeline', account)
.catch(() => {
this.$message({
message: 'Could not fetch local timeline',
type: 'error'
})
})
})
loading.close()
this.$store.dispatch('TimelineSpace/startUserStreaming', account)
this.$store.dispatch('TimelineSpace/startLocalStreaming', account)
.catch(() => {
this.$message({
message: 'Failed to restart streaming',
type: 'error'
})
})
} finally {
this.$store.commit('TimelineSpace/changeLoading', false)
}
}
}
}

View File

@ -79,35 +79,33 @@ export default {
}
},
async reload () {
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
const account = await this.$store.dispatch('TimelineSpace/localAccount', this.$route.params.id).catch(() => {
this.$message({
message: 'Could not find account',
type: 'error'
})
})
await this.$store.dispatch('TimelineSpace/stopUserStreaming')
await this.$store.dispatch('TimelineSpace/stopLocalStreaming')
await this.$store.dispatch('TimelineSpace/Contents/Home/fetchTimeline', account)
await this.$store.dispatch('TimelineSpace/Contents/Local/fetchLocalTimeline', account)
await this.$store.dispatch('TimelineSpace/Contents/Notifications/fetchNotifications', account)
.catch(() => {
loading.close()
this.$store.commit('TimelineSpace/changeLoading', true)
try {
const account = await this.$store.dispatch('TimelineSpace/localAccount', this.$route.params.id).catch((err) => {
this.$message({
message: 'Could not fetch notifications',
message: 'Could not find account',
type: 'error'
})
throw err
})
await this.$store.dispatch('TimelineSpace/stopUserStreaming')
await this.$store.dispatch('TimelineSpace/stopLocalStreaming')
this.$store.dispatch('TimelineSpace/startUserStreaming', account)
this.$store.dispatch('TimelineSpace/startLocalStreaming', account)
loading.close()
await this.$store.dispatch('TimelineSpace/Contents/Home/fetchTimeline', account)
await this.$store.dispatch('TimelineSpace/Contents/Local/fetchLocalTimeline', account)
await this.$store.dispatch('TimelineSpace/Contents/Notifications/fetchNotifications', account)
.catch(() => {
this.$message({
message: 'Could not fetch notifications',
type: 'error'
})
})
this.$store.dispatch('TimelineSpace/startUserStreaming', account)
this.$store.dispatch('TimelineSpace/startLocalStreaming', account)
} finally {
this.$store.commit('TimelineSpace/changeLoading', false)
}
}
}
}

View File

@ -31,18 +31,10 @@ export default {
})
},
created () {
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
this.$store.commit('TimelineSpace/changeLoading', true)
this.initialize()
.then(() => {
loading.close()
})
.catch(() => {
loading.close()
.finally(() => {
this.$store.commit('TimelineSpace/changeLoading', false)
})
document.getElementById('scrollable').addEventListener('scroll', this.onScroll)
},
@ -112,44 +104,41 @@ export default {
}
},
async reload () {
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
const account = await this.$store.dispatch('TimelineSpace/localAccount', this.$route.params.id).catch(() => {
this.$message({
message: 'Could not find account',
type: 'error'
})
})
await this.$store.dispatch('TimelineSpace/stopUserStreaming')
await this.$store.dispatch('TimelineSpace/stopLocalStreaming')
await this.$store.dispatch('TimelineSpace/Contents/Public/stopPublicStreaming')
await this.$store.dispatch('TimelineSpace/Contents/Home/fetchTimeline', account)
await this.$store.dispatch('TimelineSpace/Contents/Local/fetchLocalTimeline', account)
await this.$store.dispatch('TimelineSpace/Contents/Public/fetchPublicTimeline')
.catch(() => {
loading.close()
this.$store.commit('TimelineSpace/changeLoading', true)
try {
const account = await this.$store.dispatch('TimelineSpace/localAccount', this.$route.params.id).catch((err) => {
this.$message({
message: 'Could not fetch public timeline',
message: 'Could not find account',
type: 'error'
})
throw err
})
await this.$store.dispatch('TimelineSpace/stopUserStreaming')
await this.$store.dispatch('TimelineSpace/stopLocalStreaming')
await this.$store.dispatch('TimelineSpace/Contents/Public/stopPublicStreaming')
this.$store.dispatch('TimelineSpace/startUserStreaming', account)
this.$store.dispatch('TimelineSpace/startLocalStreaming', account)
this.$store.dispatch('TimelineSpace/Contents/Public/startPublicStreaming')
.catch(() => {
loading.close()
this.$message({
message: 'Failed to restart streaming',
type: 'error'
await this.$store.dispatch('TimelineSpace/Contents/Home/fetchTimeline', account)
await this.$store.dispatch('TimelineSpace/Contents/Local/fetchLocalTimeline', account)
await this.$store.dispatch('TimelineSpace/Contents/Public/fetchPublicTimeline')
.catch(() => {
this.$message({
message: 'Could not fetch public timeline',
type: 'error'
})
})
})
loading.close()
this.$store.dispatch('TimelineSpace/startUserStreaming', account)
this.$store.dispatch('TimelineSpace/startLocalStreaming', account)
this.$store.dispatch('TimelineSpace/Contents/Public/startPublicStreaming')
.catch(() => {
this.$message({
message: 'Failed to restart streaming',
type: 'error'
})
})
} finally {
this.$store.commit('TimelineSpace/changeLoading', false)
}
}
}
}

View File

@ -76,15 +76,16 @@ export default {
this.$store.dispatch('TimelineSpace/Modals/NewToot/openModal')
},
reload () {
switch (this.title) {
case 'Home':
case 'Notification':
case 'Favourite':
case 'Local timeline':
case 'Public timeline':
case 'Hashtag':
case `#${this.$route.params.tag}`:
case 'Lists':
switch (this.$route.name) {
case 'home':
case 'notifications':
case 'favourites':
case 'local':
case 'public':
case 'hashtag-list':
case `tag`:
case 'lists':
case 'list':
this.$store.commit('TimelineSpace/HeaderMenu/changeReload', true)
break
default:

View File

@ -18,11 +18,15 @@ const TimelineSpace = {
domain: '',
_id: '',
username: ''
}
},
loading: false
},
mutations: {
updateAccount (state, account) {
state.account = account
},
changeLoading (state, value) {
state.loading = value
}
},
actions: {