add basic skeleton loading to FontSelector (excessive features)

package-lock.json

@@ -11886,6 +11886,21 @@
         }
       }
     },
+    "vue-loading-skeleton": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/vue-loading-skeleton/-/vue-loading-skeleton-1.1.9.tgz",
+      "integrity": "sha512-5gMrI9equv0PMVLD5EMa4NTUvqDM3Bq/wiO4NftbEaVNeoGomG/XslB4Ev8Ued+WiE2Y/9HsIx5YXhDXimyqZw==",
+      "requires": {
+        "core-js": "2"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "2.6.11",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.11.tgz",
+          "integrity": "sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg=="
+        }
+      }
+    },
     "vue-material": {
       "version": "1.0.0-beta-15",
       "resolved": "https://registry.npmjs.org/vue-material/-/vue-material-1.0.0-beta-15.tgz",

package.json

@@ -17,6 +17,7 @@
     "vue-custom-scrollbar": "^1.3.0",
     "vue-highlightjs": "^1.3.3",
     "vue-infinite-loading": "^2.4.5",
+    "vue-loading-skeleton": "^1.1.9",
     "vue-material-design-icons": "^4.9.0",
     "webfontloader": "^1.6.28"
   },

src/components/FontItem.vue

@@ -1,18 +1,31 @@
 <template>
     <md-list-item @click="selectFont(font.index)" :style="fontStyle">
-        {{ font.family }}
+        <template v-if="fontReady">{{ font.family }}</template>
+        <Skeleton v-else></Skeleton>
     </md-list-item>
 </template>
-<style lang="css">
+<style lang="scss">
 #font-dialog .md-list-item-content {
     font-size: 22px !important;
+    span {
+        width: 100%;
+    }
 }
 </style>
 <script>
 import WebFontLoader from 'webfontloader';
+import { Skeleton } from 'vue-loading-skeleton';
 
 export default {
     name: 'FontItem',
+    components: {
+        Skeleton
+    },
+    data() {
+        return {
+            fontReady: false
+        }
+    },
     props: {
         font: {
             type: Object,
@@ -22,7 +35,7 @@ export default {
     computed: {
         fontStyle() {
             return {
-                'font-family': this.font.family
+                'font-family': `${this.font.family}, ${this.font.category}`
             }
         }
     },
@@ -30,7 +43,10 @@ export default {
         WebFontLoader.load({
             google: {
                 families: [this.font.family]
-            }
+            },
+            fontactive: function() {
+                this.fontReady = true;
+            }.bind(this)
         })
     }
 }

src/components/FontSelector.vue

@@ -77,7 +77,7 @@
     }
 
     .md-field {
-        margin-top: 0.25em;
+        margin-top: 0.6em;
     }
 }