From 9ee40bd96874a67e14332ccc2c3b6741b31be67c Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Mon, 2 Jul 2018 21:53:09 +0900
Subject: [PATCH] refs #415 Display loading on the timeline space instead of
 loading covering the whole

---
 src/renderer/components/TimelineSpace.vue     | 28 +++---
 .../TimelineSpace/Contents/Favourites.vue     | 62 ++++++-------
 .../TimelineSpace/Contents/Hashtag/Tag.vue    | 90 ++++++++-----------
 .../TimelineSpace/Contents/Home.vue           | 55 ++++++------
 .../TimelineSpace/Contents/Lists/Edit.vue     | 18 +---
 .../TimelineSpace/Contents/Lists/Index.vue    |  9 +-
 .../TimelineSpace/Contents/Lists/Show.vue     | 83 ++++++++---------
 .../TimelineSpace/Contents/Local.vue          | 55 ++++++------
 .../TimelineSpace/Contents/Notifications.vue  | 46 +++++-----
 .../TimelineSpace/Contents/Public.vue         | 75 +++++++---------
 .../components/TimelineSpace/HeaderMenu.vue   | 19 ++--
 src/renderer/store/TimelineSpace.js           |  6 +-
 12 files changed, 241 insertions(+), 305 deletions(-)

diff --git a/src/renderer/components/TimelineSpace.vue b/src/renderer/components/TimelineSpace.vue
index 557ab0b6..d2b9143d 100644
--- a/src/renderer/components/TimelineSpace.vue
+++ b/src/renderer/components/TimelineSpace.vue
@@ -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)
       })
   },
diff --git a/src/renderer/components/TimelineSpace/Contents/Favourites.vue b/src/renderer/components/TimelineSpace/Contents/Favourites.vue
index 4b3bd010..c0a7df70 100644
--- a/src/renderer/components/TimelineSpace/Contents/Favourites.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Favourites.vue
@@ -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)
+      }
     }
   }
 }
diff --git a/src/renderer/components/TimelineSpace/Contents/Hashtag/Tag.vue b/src/renderer/components/TimelineSpace/Contents/Hashtag/Tag.vue
index c7fcad5c..d1667753 100644
--- a/src/renderer/components/TimelineSpace/Contents/Hashtag/Tag.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Hashtag/Tag.vue
@@ -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)
+      }
     }
   }
 }
diff --git a/src/renderer/components/TimelineSpace/Contents/Home.vue b/src/renderer/components/TimelineSpace/Contents/Home.vue
index c7d8e2fc..67536994 100644
--- a/src/renderer/components/TimelineSpace/Contents/Home.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Home.vue
@@ -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)
+      }
     }
   }
 }
diff --git a/src/renderer/components/TimelineSpace/Contents/Lists/Edit.vue b/src/renderer/components/TimelineSpace/Contents/Lists/Edit.vue
index 509a2b12..d5fd3262 100644
--- a/src/renderer/components/TimelineSpace/Contents/Lists/Edit.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Lists/Edit.vue
@@ -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 () {
diff --git a/src/renderer/components/TimelineSpace/Contents/Lists/Index.vue b/src/renderer/components/TimelineSpace/Contents/Lists/Index.vue
index 332e86b1..7d09d69a 100644
--- a/src/renderer/components/TimelineSpace/Contents/Lists/Index.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Lists/Index.vue
@@ -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: {
diff --git a/src/renderer/components/TimelineSpace/Contents/Lists/Show.vue b/src/renderer/components/TimelineSpace/Contents/Lists/Show.vue
index 0edc630b..c15c3995 100644
--- a/src/renderer/components/TimelineSpace/Contents/Lists/Show.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Lists/Show.vue
@@ -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)
+      }
     }
   }
 }
diff --git a/src/renderer/components/TimelineSpace/Contents/Local.vue b/src/renderer/components/TimelineSpace/Contents/Local.vue
index e9e4fcf6..bbcd380e 100644
--- a/src/renderer/components/TimelineSpace/Contents/Local.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Local.vue
@@ -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)
+      }
     }
   }
 }
diff --git a/src/renderer/components/TimelineSpace/Contents/Notifications.vue b/src/renderer/components/TimelineSpace/Contents/Notifications.vue
index 1c632615..903a6abd 100644
--- a/src/renderer/components/TimelineSpace/Contents/Notifications.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Notifications.vue
@@ -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)
+      }
     }
   }
 }
diff --git a/src/renderer/components/TimelineSpace/Contents/Public.vue b/src/renderer/components/TimelineSpace/Contents/Public.vue
index 52a0f82e..9946951f 100644
--- a/src/renderer/components/TimelineSpace/Contents/Public.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Public.vue
@@ -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)
+      }
     }
   }
 }
diff --git a/src/renderer/components/TimelineSpace/HeaderMenu.vue b/src/renderer/components/TimelineSpace/HeaderMenu.vue
index c0996e1b..b1969142 100644
--- a/src/renderer/components/TimelineSpace/HeaderMenu.vue
+++ b/src/renderer/components/TimelineSpace/HeaderMenu.vue
@@ -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:
diff --git a/src/renderer/store/TimelineSpace.js b/src/renderer/store/TimelineSpace.js
index 1a07d091..aa8510d3 100644
--- a/src/renderer/store/TimelineSpace.js
+++ b/src/renderer/store/TimelineSpace.js
@@ -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: {