added vue-infinite-loading loading to base search results

web/themes/custom/materiotheme/vuejs/components/Content/Base.vue

@@ -13,6 +13,12 @@
           <Card :item="item"/>
         </li>
       </ul>
+      <infinite-loading
+        v-if="count > limit"
+        @infinite="nextPage"
+      >
+        <div slot="no-more">No more results</div>
+      </infinite-loading>
     </div>
   </div>
 </template>
@@ -35,13 +41,20 @@ export default {
   computed: {
     ...mapState({
       items: state => state.Search.items,
-      searchinfos: state =>  state.Search.infos
+      searchinfos: state =>  state.Search.infos,
+      count: state => state.Search.count,
+      limit: state => state.Search.limit
     })
   },
   methods: {
     ...mapActions({
-      newSearch: 'Search/newSearch'
-    })
+      newSearch: 'Search/newSearch',
+      nextPage: 'Search/nextPage'
+    }),
+    // infiniteHandler($state){
+    //   console.log('inifiniteHandler', $state);
+    //   this.nextPage()
+    // }
   },
   created() {
     // at first page load or first route entering launch a search if params exists in url query
@@ -72,4 +85,5 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+
 </style>

web/themes/custom/materiotheme/vuejs/components/Content/Card.vue

@@ -70,7 +70,7 @@ export default {
     // lazy load images on mouseover
     this.$el.addEventListener('mouseover', function(event) {
       let imgs = this.querySelectorAll('.images figure img.lazy')
-      console.log('mouseover', this, imgs);
+      // console.log('mouseover', this, imgs);
       imgs.forEach((img) => {
         // console.log('forEach img',img);
         img.setAttribute('src', img.getAttribute('data-src'))