Add loading indicator for notifications, make timelines indicate bottoming out when no more statuses

src/components/notifications/notifications.js

@@ -13,6 +13,11 @@ const Notifications = {
 
     notificationsFetcher.startFetching({ store, credentials })
   },
+  data () {
+    return {
+      bottomedOut: false
+    }
+  },
   computed: {
     notifications () {
       return notificationsFromStore(this.$store)
@@ -28,6 +33,9 @@ const Notifications = {
     },
     unseenCount () {
       return this.unseenNotifications.length
+    },
+    loading () {
+      return this.$store.state.statuses.notifications.loading
     }
   },
   components: {
@@ -49,10 +57,16 @@ const Notifications = {
     fetchOlderNotifications () {
       const store = this.$store
       const credentials = store.state.users.currentUser.credentials
+      store.commit('setNotificationsLoading', { value: true })
       notificationsFetcher.fetchAndUpdate({
         store,
         credentials,
         older: true
+      }).then(notifs => {
+        store.commit('setNotificationsLoading', { value: false })
+        if (notifs.length === 0) {
+          this.bottomedOut = true
+        }
       })
     }
   }

src/components/notifications/notifications.vue

@@ -18,10 +18,15 @@
         </div>
       </div>
       <div class="panel-footer">
-        <a href="#" v-on:click.prevent='fetchOlderNotifications()' v-if="!notifications.loading">
+        <div v-if="bottomedOut" class="new-status-notification text-center panel-footer faint">
+          {{$t('notifications.no_more_notifications')}}
+        </div>
+        <a v-else-if="!loading" href="#" v-on:click.prevent="fetchOlderNotifications()">
           <div class="new-status-notification text-center panel-footer">{{$t('notifications.load_older')}}</div>
         </a>
-        <div class="new-status-notification text-center panel-footer" v-else>...</div>
+        <div v-else class="new-status-notification text-center panel-footer">
+          <i class="icon-spin3 animate-spin"/>
+        </div>
       </div>
     </div>
   </div>

src/components/timeline/timeline.js

@@ -16,7 +16,8 @@ const Timeline = {
   data () {
     return {
       paused: false,
-      unfocused: false
+      unfocused: false,
+      bottomedOut: false
     }
   },
   computed: {
@@ -95,7 +96,12 @@ const Timeline = {
         showImmediately: true,
         userId: this.userId,
         tag: this.tag
-      }).then(() => store.commit('setLoading', { timeline: this.timelineName, value: false }))
+      }).then(statuses => {
+        store.commit('setLoading', { timeline: this.timelineName, value: false })
+        if (statuses.length === 0) {
+          this.bottomedOut = true
+        }
+      })
     }, 1000, this),
     scrollLoad (e) {
       const bodyBRect = document.body.getBoundingClientRect()

src/components/timeline/timeline.vue

@@ -20,10 +20,15 @@
       </div>
     </div>
     <div :class="classes.footer">
-      <a href="#" v-on:click.prevent='fetchOlderStatuses()' v-if="!timeline.loading">
+      <div v-if="bottomedOut" class="new-status-notification text-center panel-footer faint">
+        {{$t('timeline.no_more_statuses')}}
+      </div>
+      <a v-else-if="!timeline.loading" href="#" v-on:click.prevent='fetchOlderStatuses()'>
         <div class="new-status-notification text-center panel-footer">{{$t('timeline.load_older')}}</div>
       </a>
-      <div class="new-status-notification text-center panel-footer" v-else>...</div>
+      <div v-else class="new-status-notification text-center panel-footer">
+        <i class="icon-spin3 animate-spin"/>
+      </div>
     </div>
   </div>
 </template>

src/i18n/en.json

@@ -49,7 +49,8 @@
     "load_older": "Load older notifications",
     "notifications": "Notifications",
     "read": "Read!",
-    "repeated_you": "repeated your status"
+    "repeated_you": "repeated your status",
+    "no_more_notifications": "No more notifications"
   },
   "post_status": {
     "new_status": "Post new status",
@@ -317,7 +318,8 @@
     "no_retweet_hint": "Post is marked as followers-only or direct and cannot be repeated",
     "repeated": "repeated",
     "show_new": "Show new",
-    "up_to_date": "Up-to-date"
+    "up_to_date": "Up-to-date",
+    "no_more_statuses": "No more statuses"
   },
   "user_card": {
     "approve": "Approve",

src/i18n/fi.json

@@ -26,7 +26,8 @@
     "followed_you": "seuraa sinua",
     "notifications": "Ilmoitukset",
     "read": "Lue!",
-    "repeated_you": "toisti viestisi"
+    "repeated_you": "toisti viestisi",
+    "no_more_notifications": "Ei enempää ilmoituksia"
   },
   "post_status": {
     "default": "Tulin juuri saunasta.",
@@ -77,7 +78,8 @@
     "load_older": "Lataa vanhempia viestejä",
     "repeated": "toisti",
     "show_new": "Näytä uudet",
-    "up_to_date": "Ajantasalla"
+    "up_to_date": "Ajantasalla",
+    "no_more_statuses": "Ei enempää viestejä"
   },
   "user_card": {
     "follow": "Seuraa",

src/modules/statuses.js

@@ -28,6 +28,7 @@ export const defaultState = {
     minId: Number.POSITIVE_INFINITY,
     data: [],
     idStore: {},
+    loading: false,
     error: false
   },
   favorites: new Set(),
@@ -348,6 +349,9 @@ export const mutations = {
   setError (state, { value }) {
     state.error = value
   },
+  setNotificationsLoading (state, { value }) {
+    state.notifications.loading = value
+  },
   setNotificationsError (state, { value }) {
     state.notifications.error = value
   },
@@ -376,6 +380,9 @@ const statuses = {
     setError ({ rootState, commit }, { value }) {
       commit('setError', { value })
     },
+    setNotificationsLoading ({ rootState, commit }, { value }) {
+      commit('setNotificationsLoading', { value })
+    },
     setNotificationsError ({ rootState, commit }, { value }) {
       commit('setNotificationsError', { value })
     },

src/services/notifications_fetcher/notifications_fetcher.service.js

@@ -24,6 +24,7 @@ const fetchAndUpdate = ({store, credentials, older = false}) => {
   return apiService.fetchTimeline(args)
     .then((notifications) => {
       update({store, notifications, older})
+      return notifications
     }, () => store.dispatch('setNotificationsError', { value: true }))
     .catch(() => store.dispatch('setNotificationsError', { value: true }))
 }

src/services/timeline_fetcher/timeline_fetcher.service.js

@@ -35,6 +35,7 @@ const fetchAndUpdate = ({store, credentials, timeline = 'friends', older = false
         store.dispatch('queueFlush', { timeline: timeline, id: timelineData.maxId })
       }
       update({store, statuses, timeline, showImmediately, userId})
+      return statuses
     }, () => store.dispatch('setError', { value: true }))
 }