Add force updating

src/components/timeline/timeline.js

@@ -26,6 +26,21 @@ const Timeline = {
     showNewStatuses () {
       this.$store.commit('showNewStatuses', { timeline: this.timelineName })
     },
+
+    forceFetchStatuses () {
+      const store = this.$store
+      const credentials = store.state.users.currentUser.credentials
+
+      store.commit('setFetching', { timeline: this.timelineName, value: true })
+      timelineFetcher.fetchAndUpdate({
+        store,
+        credentials,
+        timeline: this.timelineName,
+        showImmediately: true
+      }).then(() => store.commit('setFetching', { timeline: this.timelineName, value: false }))
+      this.showNewStatuses()
+    },
+
     fetchOlderStatuses () {
       const store = this.$store
       const credentials = store.state.users.currentUser.credentials

src/components/timeline/timeline.vue

@@ -2,7 +2,8 @@
   <div class="timeline panel panel-default">
     <div class="panel-heading">
       <span>{{timelineDisplayName}}</span>
-      <i class='icon-spin3 fa' @click.prevent='showNewStatuses()'></i>
+      <i class='icon-spin3 force-update fa' v-if="!timeline.fetching" @click.prevent='forceFetchStatuses()'></i>
+      <i class="fa icon-spin4 force-update animate-spin" v-if="timeline.fetching"></i>
     </div>
     <div class="panel-body">
       <div class="timeline">
@@ -28,8 +29,10 @@
 <script src="./timeline.js"></script>
 <style lang='scss'>
   @import '../../_variables.scss';
-  .icon-spin3 {
+  .force-update {
     float: right;
+  }
+  .icon-spin3 {
     cursor: pointer;
     &:hover {
       color: $green;

src/modules/statuses.js

@@ -271,6 +271,9 @@ export const mutations = {
   setLoading (state, { timeline, value }) {
     state.timelines[timeline].loading = value
   },
+  setFetching (state, { timeline, value }) {
+    state.timelines[timeline].fetching = value
+  },
   setNsfw (state, { id, nsfw }) {
     const newStatus = find(state.allStatuses, { id })
     newStatus.nsfw = nsfw