From 25aa6cd2c9fdfec49bfb3b894204af5917442233 Mon Sep 17 00:00:00 2001
From: Xevion <xevioni@yandex.com>
Date: Sat, 21 May 2022 17:16:14 -0500
Subject: [PATCH] Add ImageSkeleton component, improve breadcrumb skeleton
 scss, restructure Skeleton.vue

---
 src/components/Episode.vue       | 15 +-----
 src/components/ImageSkeleton.vue | 20 ++++++++
 src/components/Skeleton.vue      | 78 ++++++++++++++++++++------------
 3 files changed, 70 insertions(+), 43 deletions(-)
 create mode 100644 src/components/ImageSkeleton.vue

diff --git a/src/components/Episode.vue b/src/components/Episode.vue
index 86e49c1..bac21b5 100644
--- a/src/components/Episode.vue
+++ b/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(() => {
diff --git a/src/components/ImageSkeleton.vue b/src/components/ImageSkeleton.vue
new file mode 100644
index 0000000..be005b3
--- /dev/null
+++ b/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>
diff --git a/src/components/Skeleton.vue b/src/components/Skeleton.vue
index 7882c4a..ecd2b3e 100644
--- a/src/components/Skeleton.vue
+++ b/src/components/Skeleton.vue
@@ -1,27 +1,47 @@
 <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 {
-    width: 100%;
-    display: block;
-    line-height: 1;
-    background-size: 200px 100%;
-    background-repeat: no-repeat;
-    background-image: linear-gradient(90deg, var(--secondary-color, $grey-4), var(--primary-color, $grey-6), var(--secondary-color, $grey-4));
-    background-color: var(--secondary-color, $grey-4);
-    animation: 1.25s ease-in-out 0s infinite normal none running SkeletonLoading;
-    border-radius: var(--border-radius, 3px);
 
-    &.no-animate {
-        animation: none;
+<style lang="scss">
+.breadcrumb-skeleton {
+    height: 48px;
+
+    & > .card-body {
+        padding: 0 0 0 1em;
+        display: flex;
+        align-items: center;
     }
 }
 
 .outer-skeleton {
-    padding: 0.2em 0;
+    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%;
+        background-repeat: no-repeat;
+        background-image: linear-gradient(90deg, var(--secondary-color, $grey-4), var(--primary-color, $grey-6), var(--secondary-color, $grey-4));
+        background-color: var(--secondary-color, $grey-4);
+        animation: 1.25s ease-in-out 0s infinite normal none running SkeletonLoading;
+        border-radius: var(--border-radius, 3px);
+
+        &.no-animate {
+            animation: none;
+        }
+    }
 }
 
 @-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: {
-            type: Object
+        innerStyle: {
+            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,
-                '--secondary-color': this.secondary_color,
-                '--border-radius': this.border_radius
+                '--primary-color': this.primaryColor,
+                '--secondary-color': this.secondaryColor,
+                '--border-radius': this.borderRadius
             }
         }
     }