add a skeleton to the demo component

docs/src/components/Demo/index.vue

@@ -34,9 +34,12 @@
         </a>
       </div>
     </template>
-    <div v-else class="demo__error">
+    <template v-else>
-      Could not find a demo called “{{ name }}”.
+      <div v-if="mainFile === false" class="demo__error">
-    </div>
+        Could not find a demo called “{{ name }}”.
+      </div>
+      <div v-else class="demo__skeleton" />
+    </template>
   </div>
 </template>
 
@@ -79,6 +82,7 @@ export default {
 
   data() {
     return {
+      loading: true,
       files: [],
       content: null,
       currentIndex: 0,
@@ -94,7 +98,7 @@ export default {
         .find(item => item.path.endsWith('index.vue') || item.path.endsWith('index.jsx'))
 
       if (!file) {
-        return
+        return false
       }
 
       return require(`~/demos/${file.path}`).default

docs/src/components/Demo/style.scss

@@ -90,4 +90,12 @@
     color: $colorRed;
     background-color: rgba($colorRed, 0.1);
   }
+
+  &__skeleton {
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+    background-color: $colorWhite;
+    min-height: 20rem;
+    opacity: 0.1;
+  }
 }