From 62e9525724cfff0c3e26b8325b019e926baed1ca Mon Sep 17 00:00:00 2001
From: shpuld <shp@cock.li>
Date: Tue, 29 Jan 2019 21:04:52 +0200
Subject: Add loading indicator for notifications, make timelines indicate
 bottoming out when no more statuses

---
 src/components/timeline/timeline.js  | 10 ++++++++--
 src/components/timeline/timeline.vue |  9 +++++++--
 2 files changed, 15 insertions(+), 4 deletions(-)

(limited to 'src/components/timeline')

diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index 98da8660..85e0a055 100644
--- a/src/components/timeline/timeline.js
+++ b/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()
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 6ba598c5..e3eea3bd 100644
--- a/src/components/timeline/timeline.vue
+++ b/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>
-- 
cgit v1.2.3-70-g09d2