implement lazy loading when scrolling

src/components/DictionaryView.vue

@@ -33,9 +33,6 @@
       <Autocomplete v-on:submit="select_result" :api="get_search_endpoint">
       </Autocomplete>
     </div>
-    <div id="spinner" v-if="waiting">
-      <v-progress-circular indeterminate color="secondary" size="120"></v-progress-circular>
-    </div>
     <SearchResults  :results_bm="search_results.bm"
                     :results_nn="search_results.nn"
                     :lang="lang"
@@ -43,7 +40,10 @@
                     :meta="this.article_info.meta"
                     @article-click="article_link_click"
                     @details-click="details_click"
-                    v-if="total_results() && ! waiting && ! article" />
+                    v-if="total_results() && ! article" />
+    <div id="spinner" v-if="waiting">
+      <v-progress-circular indeterminate color="secondary" size="120"></v-progress-circular>
+    </div>
     <div id="single_article_container" v-if="article">
         <div class="return_to_results" v-if="total_results">
           <router-link :to="article.source" @click.native="return_to_results()">
@@ -165,9 +165,12 @@ function load_articles(self, query, offset, n, dict) {
   else if (offset + n > article_IDs.length) {
     n = n + (article_IDs.length - n)
   }
+  console.log("n, offset", n, offset)
 
-  if (n > 0) {
-    article_IDs = article_IDs.slice(offset, n)
+  if (n > 0 && (self.lang == dict || self.lang == "bm,nn")) {
+    article_IDs = article_IDs.slice(offset, offset + n)
+    console.log("ARTICLES",dict, article_IDs)
+    console.log("OFFSET offset+N", offset, offset+n)
     return Promise.all(article_IDs.map((article_id) => {
       return axios.get(`${ARTICLE_ENDPOINT}${dict}/article/${article_id}.json`)
 
@@ -179,7 +182,7 @@ function load_articles(self, query, offset, n, dict) {
         })
       })
       self.article = null
-      if (! results.length) {
+      if (!results.length && offset == 0) {
         if (query.match) {
           self.error = []
           if (self.lang !== 'bm') {
@@ -200,10 +203,13 @@ function load_articles(self, query, offset, n, dict) {
         self.error = null
       }
       if (offset == 0) {
+        console.log("REPLACING")
         self.search_results[dict] = results
       }
       else {
-      self.search_results[dict] = self.search_results[dict].concat(results)
+        console.log("APPENDING")
+        self.search_results[dict] = self.search_results[dict].concat(results)
+        console.log(self.search_results)
       }
     })
     .catch(error => {
@@ -211,21 +217,27 @@ function load_articles(self, query, offset, n, dict) {
       self.connection_error(error)
     })
   }
+  else {
+    return Promise.resolve()
+  }
+  
+  
 }
 
 
 function navigate_to_query(self, word) {
   self.waiting_for_articles = true
-  let  query = self.event ? self.event : {q: word} 
+  let  query = self.event ? self.event : {q: word}
+  self.query = query
   
   // Get article IDs
   api.get('articles?', {params: {w: query.match || query.q, dict: self.lang, scope: "w"}}).then((response) => {
             self.article_info = response.data
             self.search_results = {}
-            let article_queries = []
-            if (self.lang == "bm" || self.lang == "bm,nn") article_queries.push(load_articles(self, query, 0, 10, "bm"))
-            if (self.lang == "nn" || self.lang == "bm,nn") article_queries.push(load_articles(self, query, 0, 10, "nn"))
-            Promise.all(article_queries)
+            Promise.all([
+              load_articles(self, query, 0, 10, "bm"),
+              load_articles(self, query, 0, 10, "nn")
+            ])
             .then(() => {
               self.waiting_for_articles = false
               history.replaceState({
@@ -259,7 +271,9 @@ export default {
       monthly_nn: null,
       event: null,
       previous: this.$route.fullPath,
-      article_info: null
+      article_info: null,
+      page: 1,
+      max_scroll: 0
     }
   },
   computed: {
@@ -414,6 +428,29 @@ export default {
       }
     }
 
+    window.onscroll = () => {
+      console.log(document.body.scrollHeight - window.window.innerHeight)
+      console.log("yof, max",window.pageYOffset, this.max_scroll)
+    if (window.pageYOffset > this.max_scroll && window.pageYOffset > (document.body.scrollHeight - window.window.innerHeight * 2)) {
+      this.max_scroll = document.body.scrollHeight - window.window.innerHeight-1
+      console.log("MAX", this.max_scroll)
+      let offset = 10 * this.page
+      this.page += 1
+      if (!this.waiting_for_articles) {
+        self.waiting_for_articles = true
+        console.log("PARAMS", this.query.q, offset, 10)     
+        Promise.all([
+          load_articles(this, this.query, offset, 10, "bm"),
+          load_articles(this, this.query, offset, 10, "nn")
+        ]).then(() => {
+          console.log("SUCCESS")
+          self.waiting_for_articles = false
+          
+        })
+      }
+    }
+ }
+
   }
 }
 </script>