baseline font infinite loading implementation

src/components/FontSelector.vue

@@ -7,18 +7,25 @@
                         <md-field>
                             <label>Font Family</label>
                             <md-input v-model="search"></md-input>
-                            <span class="md-suffix">{{ results.length }}</span>
+                            <span class="md-suffix">{{ results.length }} ({{ shown.length }})</span>
                         </md-field>
                     </div>
                     <md-list>
-                        <vue-custom-scrollbar :settings="{suppressScrollX: true,  suppressScrollY: false}" class="scroll-area">
-                            <md-list-item v-for="font in results" @click="selectFont(font.index)" :key="font.family">
+                        <vue-custom-scrollbar :distance="20"
+                                              :settings="{suppressScrollX: true,  suppressScrollY: false}"
+                                              class="scroll-area">
+                            <md-list-item v-for="font in shown" @click="selectFont(font.index)" :key="font.index">
                                 {{ font.family }}
                             </md-list-item>
+                            <infinite-loading :identifier="search" force-use-infinite-wrapper=".scroll-area"
+                                              @infinite="infiniteHandler">
+                                <div slot="spinner"></div>
+                                <div slot="no-more"></div>
+                                <div slot="no-results"></div>
+                            </infinite-loading>
                         </vue-custom-scrollbar>
                     </md-list>
                 </md-content>
-
                 <md-dialog-actions>
                     <md-button class="md-primary" @click="toggle">Close</md-button>
                     <md-button class="md-primary" @click="toggle">Save</md-button>
@@ -55,7 +62,6 @@
 
     .md-list {
         max-height: 15em;
-        //overflow: auto;
     }
 
     .scroll-area {
@@ -70,6 +76,7 @@
 
 <script>
 import axios from 'axios';
+import InfiniteLoading from 'vue-infinite-loading';
 import vueCustomScrollbar from 'vue-custom-scrollbar'
 
 axios.baseURL = '';
@@ -77,11 +84,13 @@ axios.baseURL = '';
 export default {
     name: "FontSelector",
     components: {
-        vueCustomScrollbar
+        vueCustomScrollbar,
+        InfiniteLoading,
     },
     data: () => ({
         fonts: null,
         visible: false,
+        shown: [],
         search: "",
         selectedFont: null
     }),
@@ -92,6 +101,21 @@ export default {
             if (this.visible && this.fonts === null)
                 this.getFonts();
         },
+        infiniteHandler($state) {
+            // Calculate the number of items left to load
+            let left = this.results.length - this.shown.length;
+
+            if (left > 0) {
+                // Add up to 5 new fonts to the 'shown' list
+                let slice = this.results.slice(this.shown.length, this.shown.length + Math.min(left, 5) + 1)
+                this.shown = this.shown.concat(slice)
+                // Mark as completed if the final n items were loaded.
+                left <= 5 ? $state.complete() : $state.loaded()
+            } else {
+                // No items left, mark as completed.
+                $state.complete()
+            }
+        },
         getFonts() {
             axios.get(
                 `https://www.googleapis.com/webfonts/v1/webfonts?key=${process.env.VUE_APP_FONT_API_KEY}`
@@ -102,11 +126,30 @@ export default {
         },
         selectFont(fontIndex) {
             this.selectedFont = this.fonts.items[fontIndex];
-        }
+        },
     },
     computed: {
         results() {
-            return this.fonts !== null ? this.fonts.items.filter(font => font.family.includes(this.search)) : [];
+            if (this.fonts !== null)
+                if (this.search.length > 0)
+                    return this.fonts.items.filter(font => font.family.includes(this.search));
+                else
+                    return this.fonts.items
+            else
+                return []
+        }
+    },
+    watch: {
+        search: function (newSearch, oldSearch) {
+            if (newSearch.length !== oldSearch.length)
+                if (newSearch.length > oldSearch.length)
+                    // More precise results needed. Simply re-apply filter.
+                    this.shown = this.shown.filter(font => font.family.includes(this.search));
+                else if (newSearch.length < oldSearch.length) {
+                    // Broader results are possible, rebuild results instead.
+                    let min = this.shown.length;
+                    this.shown = this.results.slice(0, Math.min(min, 5) + 1);
+                }
         }
     }
 }

src/main.js

@@ -8,10 +8,17 @@ import json from 'highlight.js/lib/languages/css';
 import 'vue-material/dist/vue-material.min.css'
 import 'vue-material/dist/theme/default.css'
 import 'highlight.js/styles/default.css';
+import InfiniteLoading from "vue-infinite-loading";
 
 Vue.use(VueHighlightJS, {languages: {json}})
 Vue.use(VueMaterial)
 Vue.use(VueAxios, axios)
+Vue.use(InfiniteLoading, {
+  system: {
+    // throttleLimit: 500,
+    /* other settings need to configure */
+  },
+});
 
 Vue.config.productionTip = false