change episode title format, add skeleton loaders & breadcrumbs component

client/src/components/Episode.vue

@@ -1,19 +1,23 @@
 <template>
     <div>
-        <b-card
+        <b-breadcrumb :items="breadcrumbs"></b-breadcrumb>
-            :title="`Season ${this.$route.params.season} Episode ${
+        <b-card class="mb-4">
-        this.$route.params.episode
+            <template v-if="episode !== null">
-      } \
+                <h3>"{{ episode.title }}"</h3>
-        - ${episode != null ? episode.title : ''}`"
+                <span v-if="episode">
-            class="mb-4"
+                {{ episode.description }}
-        >
+            </span>
-      <span v-if="episode">
+                <CharacterList
-        {{ episode.description }}
+                    v-if="episode && episode.characters"
-      </span>
+                    :characters="episode.characters"
-            <CharacterList
+                ></CharacterList>
-                v-if="episode && episode.characters"
+            </template>
-                :characters="episode.characters"
+            <template v-else>
-            ></CharacterList>
+                <Skeleton style="width: 30%;"></Skeleton>
+                <Skeleton style="width: 70%; height: 60%;"></Skeleton>
+                <Skeleton style="width: 45%; height: 60%;"></Skeleton>
+                <Skeleton style="width: 69%; height: 40%;"></Skeleton>
+            </template>
         </b-card>
         <div v-if="episode != null">
             <b-card
@@ -56,12 +60,14 @@
 import axios from "axios";
 import QuoteList from "./QuoteList.vue";
 import CharacterList from "./CharacterList.vue";
+import Skeleton from './Skeleton.vue';
 
 export default {
     name: "Episode",
     components: {
         QuoteList,
         CharacterList,
+        Skeleton,
     },
     data() {
         return {
@@ -95,8 +101,39 @@ ${this.$route.params.season}/${this.$route.params.episode}/`;
     },
     watch: {
         $route() {
-            this.getEpisode();
+            this.episode = null;
+            this.$nextTick(() => {
+                this.getEpisode();
+            })
         },
     },
+    computed: {
+        breadcrumbs() {
+            return [
+                {
+                    text: 'Home',
+                    to: {
+                        name: 'Home'
+                    }
+                },
+                {
+                    text: `Season ${this.$route.params.season}`,
+                    to: {
+                        name: 'Season',
+                        season: this.$route.params.season
+                    }
+                },
+                {
+                    text: `Episode ${this.$route.params.episode}`,
+                    to: {
+                        name: 'Episode',
+                        season: this.$route.params.season,
+                        episode: this.$route.params.episode
+                    },
+                    active: true
+                }
+            ]
+        }
+    }
 };
 </script>