autoload older notifications when scrolled to the bottom

3 files changed, 10 insertions, 1 deletions

diff --git a/src/components/mobile_nav/mobile_nav.js b/src/components/mobile_nav/mobile_nav.js
index bc63d2ba..9b341a3b 100644
--- a/src/components/mobile_nav/mobile_nav.js
+++ b/src/components/mobile_nav/mobile_nav.js
@@ -63,6 +63,11 @@ const MobileNav = {
     },
     markNotificationsAsSeen () {
       this.$refs.notifications.markAsSeen()
+    },
+    onScroll ({ target: { scrollTop, clientHeight, scrollHeight } }) {
+      if (this.$store.state.config.autoLoad && scrollTop + clientHeight >= scrollHeight) {
+        this.$refs.notifications.fetchOlderNotifications()
+      }
     }
   },
   watch: {
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index 30b1715f..90707ce7 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -28,7 +28,7 @@
           <i class="button-icon icon-cancel"/>
         </a>
       </div>
-      <div v-if="currentUser" class="mobile-notifications">
+      <div class="mobile-notifications" @scroll="onScroll">
         <Notifications ref="notifications" noHeading="true"/>
       </div>
     </div>
diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js
index e341212e..5b13b98e 100644
--- a/src/components/notifications/notifications.js
+++ b/src/components/notifications/notifications.js
@@ -52,6 +52,10 @@ const Notifications = {
       this.$store.dispatch('markNotificationsAsSeen')
     },
     fetchOlderNotifications () {
+      if (this.loading) {
+        return
+      }
+
       const store = this.$store
       const credentials = store.state.users.currentUser.credentials
       store.commit('setNotificationsLoading', { value: true })