From 6e27d13a1188b5adab644cbf15662bf8328dc67a Mon Sep 17 00:00:00 2001
From: Xevion <xevioni@yandex.com>
Date: Fri, 20 May 2022 12:53:57 -0500
Subject: [PATCH] Change SeasonListItem to handle null episode data with
 Skeleton, change key to use index-based key

---
 src/components/SeasonList.vue     |  2 +-
 src/components/SeasonListItem.vue | 25 ++++++++++++++++++++-----
 2 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/components/SeasonList.vue b/src/components/SeasonList.vue
index e2f1e05..720633f 100644
--- a/src/components/SeasonList.vue
+++ b/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"
diff --git a/src/components/SeasonListItem.vue b/src/components/SeasonListItem.vue
index 2cb40c3..ee3149c 100644
--- a/src/components/SeasonListItem.vue
+++ b/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})