Change SeasonListItem to handle null episode data with Skeleton, change key to use index-based key

src/components/SeasonList.vue

@@ -16,7 +16,7 @@
                         <template v-for="(episode, index) in seasons[season.season_id - 1].episodes">
                             <template v-if="isPreloaded">
                                 <SeasonListItem
-                                    :key="`rl-${episode.episodeNumber}`"
+                                    :key="`rl-${index}`"
                                     :episode-number="episode.episodeNumber"
                                     :season-number="episode.seasonNumber"
                                     :title="episode.title"

src/components/SeasonListItem.vue

@@ -1,29 +1,44 @@
 <template>
     <b-list-group-item
+        v-if="dataAvailable"
         :id="`s-${seasonNumber}-ep-${episodeNumber}`"
         :to="{name: 'Episode', params: { season: seasonNumber, episode: episodeNumber }, }"
-        class="no-link episode-item"
-        @mouseover="hoverOn" @mouseleave="hoverOff"
+        class="no-link episode-item" @mouseover="hoverOn"
+        @mouseleave="hoverOff"
     >
         Episode {{ episodeNumber }} - "{{ title }}"
     </b-list-group-item>
+    <b-list-group-item v-else>
+        <Skeleton style="width: 90%" />
+    </b-list-group-item>
 </template>
 
 <script>
 import {types} from "@/mutation_types";
+import Skeleton from "@/components/Skeleton";
 
 export default {
     name: "SeasonListItem",
+    components: {
+        Skeleton
+    },
     props: {
-        episodeNumber: {type: Number, default: null, required: true},
-        seasonNumber: {type: Number, default: null, required: true},
-        title: {type: String, default: null, required: true}
+        episodeNumber: {type: Number, default: null, required: false},
+        seasonNumber: {type: Number, default: null, required: false},
+        title: {type: String, default: null, required: false}
     },
     data() {
         return {
             timeoutID: null
         }
     },
+    computed: {
+        dataAvailable() {
+            return this.episodeNumber !== null &&
+                this.seasonNumber !== null &&
+                this.title !== null;
+        }
+    },
     methods: {
         hoverFetch() {
             this.$store.dispatch(types.FETCH_EPISODE, {season: this.seasonNumber, episode: this.episodeNumber})