added vue-infinite-loading loading to base search results

web/themes/custom/materiotheme/assets/dist/main.css

@@ -1154,3 +1154,50 @@ article.node--type-frontpage .node__content .field--name-computed-articles-refer
   vertical-align: top;
   max-width: 250px; }
 
+.cards-list > ul {
+  margin: 0;
+  padding: 0; }
+  .cards-list > ul > li {
+    list-style: none;
+    margin: 0 1em 1em 0;
+    padding: 0;
+    display: inline-block;
+    vertical-align: top; }
+
+.card {
+  position: relative;
+  width: 210px;
+  height: 295px; }
+  .card header {
+    position: absolute;
+    bottom: 0;
+    z-index: 10;
+    color: #fff;
+    background-color: rgba(0, 0, 0, 0.5);
+    width: 100%; }
+    .card header h1, .card header h4 {
+      margin: 0;
+      padding: 0; }
+    .card header h1 {
+      font-size: 1.5em; }
+    .card header h4 {
+      font-size: 1em;
+      font-weight: normal; }
+  .card section.images {
+    position: relative; }
+    .card section.images, .card section.images * {
+      width: 100%;
+      height: 100%; }
+    .card section.images figure {
+      margin: 0;
+      position: absolute;
+      top: 0;
+      left: 0; }
+      .card section.images figure:first-of-type {
+        z-index: 5; }
+      .card section.images figure img.blank {
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 20; }
+

web/themes/custom/materiotheme/assets/scripts/main.js

@@ -1,5 +1,17 @@
 import Vue from 'vue'
 
+import InfiniteLoading from 'vue-infinite-loading';
+Vue.use(InfiniteLoading, {
+  props: {
+    spinner: 'spiral',
+    // slots.noMore: ''
+  },
+  // system: {
+  //   throttleLimit: 50,
+  //   /* other settings need to configure */
+  // }
+});
+
 import store from 'vuejs/store'
 import router from 'vuejs/route'
 

web/themes/custom/materiotheme/assets/styles/main.scss

@@ -217,6 +217,15 @@ article.node--type-frontpage{
  // | (__/ _` | '_/ _` (_-<
  //  \___\__,_|_| \__,_/__/
 
+.infinite-loading-container{
+  .infinite-status-prompt{
+    i[class^="loading-"]{
+      width:15px; height:15px;
+    }
+  }
+}
+
+
 .cards-list{
   &>ul{
     margin:0; padding:0;