Add ImageSkeleton component, improve breadcrumb skeleton scss, restructure Skeleton.vue

src/components/Episode.vue

@@ -38,19 +38,6 @@
     </div>
 </template>
 
-<style lang="scss" scoped>
-.breadcrumb-skeleton {
-    background-color: $grey-3;
-    height: 48px;
-
-    & > .card-body {
-        padding: 0 0 0 1em;
-        display: flex;
-        align-items: center;
-    }
-}
-</style>
-
 <style lang="scss">
 .card-title {
     font-family: "Montserrat", sans-serif;
@@ -127,7 +114,7 @@ export default {
         this.fetch();
     },
     methods: {
-        fetch() {
+        async fetch() {
             // Fetch the episode, then scroll - already fetched episode should scroll immediately
             this.$store.dispatch(types.FETCH_EPISODE, {season: this.params.season, episode: this.params.episode})
                 .then(() => {

src/components/ImageSkeleton.vue

@@ -0,0 +1,20 @@
+<template>
+    <div class="image-skeleton" />
+</template>
+
+<script>
+export default {
+    name: "ImageSkeleton"
+}
+</script>
+
+<style lang="scss">
+.image-skeleton {
+    width: 100%;
+    height: 100%;
+    background-color: $grey-4;
+    display: block;
+    border-radius: 3px;
+}
+
+</style>

src/components/Skeleton.vue

@@ -1,11 +1,34 @@
 <template>
     <div class="outer-skeleton">
-        <div class="skeleton" :class="[animated ? undefined : 'no-animate']" :style="[style, inner_style]" />
+        <div
+            class="skeleton"
+            :class="[animated ? undefined : 'no-animate']"
+            :style="[style, innerStyle]"
+        />
     </div>
 </template>
-<style lang="scss" scoped>
+
-.skeleton {
+<style lang="scss">
+.breadcrumb-skeleton {
+    height: 48px;
+
+    & > .card-body {
+        padding: 0 0 0 1em;
+        display: flex;
+        align-items: center;
+    }
+}
+
+.outer-skeleton {
+    padding: 0.35em 0.3em 0.35em 0.35em;
+
+    .breadcrumb-skeleton > {
+        display: inline-block;
+    }
+
+    .skeleton {
         width: 100%;
+        height: 100%;
         display: block;
         line-height: 1;
         background-size: 200px 100%;
@@ -18,10 +41,7 @@
         &.no-animate {
             animation: none;
         }
-}
+    }
-
-.outer-skeleton {
-    padding: 0.2em 0;
 }
 
 @-webkit-keyframes SkeletonLoading {
@@ -33,7 +53,7 @@
     }
 }
 
-@keyframes SkeletonLoa,ding {
+@keyframes SkeletonLoading {
     0% {
         background-position: -200px 0;
     }
@@ -41,19 +61,16 @@
         background-position: calc(200px + 100%) 0;
     }
 }
-
-span {
-    font-size: 24px;
-}
 </style>
 
 <script>
 export default {
     props: {
-        inner_style: {
+        innerStyle: {
-            type: Object
+            type: Object,
+            default: null,
         },
-        inner_class: {
+        innerClass: {
             type: String,
             default: ''
         },
@@ -61,22 +78,25 @@ export default {
             type: Boolean,
             default: true
         },
-        border_radius: {
+        borderRadius: {
             type: String,
+            default: ''
         },
-        primary_color: {
+        primaryColor: {
             type: String,
+            default: '',
         },
-        secondary_color: {
+        secondaryColor: {
             type: String,
+            default: '',
         }
     },
     computed: {
         style() {
             return {
-                '--primary-color': this.primary_color,
+                '--primary-color': this.primaryColor,
-                '--secondary-color': this.secondary_color,
+                '--secondary-color': this.secondaryColor,
-                '--border-radius': this.border_radius
+                '--border-radius': this.borderRadius
             }
         }
     }