From 9f2b09dd709b0b3614eee1a0d731f6203e64ddf0 Mon Sep 17 00:00:00 2001
From: Hans Pagel <hans.pagel@ueber.io>
Date: Wed, 20 Jan 2021 23:00:26 +0100
Subject: [PATCH] add a skeleton to the demo component

---
 docs/src/components/Demo/index.vue  | 12 ++++++++----
 docs/src/components/Demo/style.scss |  8 ++++++++
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/docs/src/components/Demo/index.vue b/docs/src/components/Demo/index.vue
index 72221eb2..bd917569 100644
--- a/docs/src/components/Demo/index.vue
+++ b/docs/src/components/Demo/index.vue
@@ -34,9 +34,12 @@
         </a>
       </div>
     </template>
-    <div v-else class="demo__error">
-      Could not find a demo called “{{ name }}”.
-    </div>
+    <template v-else>
+      <div v-if="mainFile === false" class="demo__error">
+        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
diff --git a/docs/src/components/Demo/style.scss b/docs/src/components/Demo/style.scss
index 6ef8cee8..69530caf 100644
--- a/docs/src/components/Demo/style.scss
+++ b/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;
+  }
 }