Mastodon
/
Whalebird-desktop-client-mac-linux-windows
mirror of https://github.com/h3poteto/whalebird-desktop
1
0
Fork 0
Code Issues Releases Wiki Activity

refs #415 Display loading on the timeline space instead of loading covering the whole

This commit is contained in:
AkiraFukushima 2018-07-02 21:53:09 +09:00
parent 201c8c2553
commit 9ee40bd968
12 changed files with 241 additions and 305 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/renderer/components/TimelineSpace.vue
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 },
computed: {
...mapState({
loading: state => state.TimelineSpace.loading
})
},
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()
this.$store.commit('GlobalHeader/updateChanging', false)
})
.catch(() => {
loading.close()
.finally(() => {
this.$store.commit('TimelineSpace/changeLoading', false)
this.$store.commit('GlobalHeader/updateChanging', false)
})
},

30
src/renderer/components/TimelineSpace/Contents/Favourites.vue
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,17 +78,14 @@ 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.$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 find account',
type: 'error'
})
throw err
})
await this.$store.dispatch('TimelineSpace/stopUserStreaming')
@ -104,7 +95,6 @@ export default {
await this.$store.dispatch('TimelineSpace/Contents/Local/fetchLocalTimeline', account)
await this.$store.dispatch('TimelineSpace/Contents/Favourites/fetchFavourites', account)
.catch(() => {
loading.close()
this.$message({
message: 'Could not fetch favourites',
type: 'error'
@ -113,7 +103,9 @@ export default {
this.$store.dispatch('TimelineSpace/startUserStreaming', account)
this.$store.dispatch('TimelineSpace/startLocalStreaming', account)
loading.close()
} finally {
this.$store.commit('TimelineSpace/changeLoading', false)
}
}
}
}

44
src/renderer/components/TimelineSpace/Contents/Hashtag/Tag.vue
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,17 +114,14 @@ 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.$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 find account',
type: 'error'
})
throw err
})
await this.$store.dispatch('TimelineSpace/stopUserStreaming')
@ -161,13 +142,14 @@ export default {
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'
})
})
loading.close()
} finally {
this.$store.commit('TimelineSpace/changeLoading', false)
}
}
}
}

17
src/renderer/components/TimelineSpace/Contents/Home.vue
View File

@ -85,24 +85,20 @@ 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.$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 find account',
type: 'error'
})
throw err
})
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.$message({
message: 'Could not fetch timeline',
type: 'error'
@ -112,14 +108,15 @@ export default {
this.$store.dispatch('TimelineSpace/startUserStreaming', account)
.catch(() => {
loading.close()
this.$message({
message: 'Failed to restart streaming',
type: 'error'
})
})
this.$store.dispatch('TimelineSpace/startLocalStreaming', account)
loading.close()
} finally {
this.$store.commit('TimelineSpace/changeLoading', false)
}
}
}
}

18
src/renderer/components/TimelineSpace/Contents/Lists/Edit.vue
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 () {

9
src/renderer/components/TimelineSpace/Contents/Lists/Index.vue
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: {

37
src/renderer/components/TimelineSpace/Contents/Lists/Show.vue
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,17 +110,14 @@ 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.$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 find account',
type: 'error'
})
throw err
})
await this.$store.dispatch('TimelineSpace/stopUserStreaming')
@ -156,7 +143,9 @@ export default {
type: 'error'
})
})
loading.close()
} finally {
this.$store.commit('TimelineSpace/changeLoading', false)
}
}
}
}

17
src/renderer/components/TimelineSpace/Contents/Local.vue
View File

@ -84,17 +84,14 @@ 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.$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 find account',
type: 'error'
})
throw err
})
await this.$store.dispatch('TimelineSpace/stopUserStreaming')
await this.$store.dispatch('TimelineSpace/stopLocalStreaming')
@ -102,7 +99,6 @@ export default {
await this.$store.dispatch('TimelineSpace/Contents/Home/fetchTimeline', account)
await this.$store.dispatch('TimelineSpace/Contents/Local/fetchLocalTimeline', account)
.catch(() => {
loading.close()
this.$message({
message: 'Could not fetch local timeline',
type: 'error'
@ -112,13 +108,14 @@ export default {
this.$store.dispatch('TimelineSpace/startUserStreaming', account)
this.$store.dispatch('TimelineSpace/startLocalStreaming', account)
.catch(() => {
loading.close()
this.$message({
message: 'Failed to restart streaming',
type: 'error'
})
})
loading.close()
} finally {
this.$store.commit('TimelineSpace/changeLoading', false)
}
}
}
}

16
src/renderer/components/TimelineSpace/Contents/Notifications.vue
View File

@ -79,17 +79,14 @@ 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.$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 find account',
type: 'error'
})
throw err
})
await this.$store.dispatch('TimelineSpace/stopUserStreaming')
await this.$store.dispatch('TimelineSpace/stopLocalStreaming')
@ -98,7 +95,6 @@ export default {
await this.$store.dispatch('TimelineSpace/Contents/Local/fetchLocalTimeline', account)
await this.$store.dispatch('TimelineSpace/Contents/Notifications/fetchNotifications', account)
.catch(() => {
loading.close()
this.$message({
message: 'Could not fetch notifications',
type: 'error'
@ -107,7 +103,9 @@ export default {
this.$store.dispatch('TimelineSpace/startUserStreaming', account)
this.$store.dispatch('TimelineSpace/startLocalStreaming', account)
loading.close()
} finally {
this.$store.commit('TimelineSpace/changeLoading', false)
}
}
}
}

31
src/renderer/components/TimelineSpace/Contents/Public.vue
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,17 +104,14 @@ 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.$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 find account',
type: 'error'
})
throw err
})
await this.$store.dispatch('TimelineSpace/stopUserStreaming')
await this.$store.dispatch('TimelineSpace/stopLocalStreaming')
@ -132,7 +121,6 @@ export default {
await this.$store.dispatch('TimelineSpace/Contents/Local/fetchLocalTimeline', account)
await this.$store.dispatch('TimelineSpace/Contents/Public/fetchPublicTimeline')
.catch(() => {
loading.close()
this.$message({
message: 'Could not fetch public timeline',
type: 'error'
@ -143,13 +131,14 @@ export default {
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'
})
})
loading.close()
} finally {
this.$store.commit('TimelineSpace/changeLoading', false)
}
}
}
}

19
src/renderer/components/TimelineSpace/HeaderMenu.vue
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:

6
src/renderer/store/TimelineSpace.js
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: {