From a8a4866554d88a7abaf59889b7941444dd8fc31e Mon Sep 17 00:00:00 2001
From: Xevion <xevioni@yandex.com>
Date: Sat, 12 Sep 2020 16:49:12 -0500
Subject: [PATCH] add Skeleton loading to breadcrumbs on Episode.vue, use
 computed on v-if's

---
 client/src/components/Episode.vue | 24 +++++++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/client/src/components/Episode.vue b/client/src/components/Episode.vue
index e22f907..7391bc2 100644
--- a/client/src/components/Episode.vue
+++ b/client/src/components/Episode.vue
@@ -1,10 +1,13 @@
 <template>
     <div>
-        <b-breadcrumb :items="breadcrumbs"></b-breadcrumb>
+        <b-breadcrumb v-if="ready" :items="breadcrumbs"></b-breadcrumb>
+        <b-card v-else class="breadcrumb-skeleton mb-3">
+            <Skeleton style="width: 40%;"></Skeleton>
+        </b-card>
         <b-card class="mb-4">
-            <template v-if="episode !== null">
+            <template v-if="ready">
                 <h3>"{{ episode.title }}"</h3>
-                <span v-if="episode">
+                <span>
                 {{ episode.description }}
             </span>
                 <CharacterList
@@ -44,6 +47,18 @@
     </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;
@@ -108,6 +123,9 @@ ${this.$route.params.season}/${this.$route.params.episode}/`;
         },
     },
     computed: {
+        ready() {
+            return this.episode !== null
+        },
         breadcrumbs() {
             return [
                 {