autoload older notifications when scrolled to the bottom

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: {

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>

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 })