Refactor parts of SeasonList into SeasonListItem, add on-hover episode preloading

src/components/SeasonList.vue

@@ -15,13 +15,12 @@
                     <b-list-group>
                         <template v-for="(episode, index) in seasons[season.season_id - 1].episodes">
                             <template v-if="isPreloaded">
-                                <b-list-group-item
+                                <SeasonListItem
-                                    :id="`s-${season.season_id}-ep-${episode.episode_id}`" :key="`rl-${episode.episode_id}`"
+                                    :key="`rl-${episode.episodeNumber}`"
-                                    class="no-link episode-item"
+                                    :episode-number="episode.episodeNumber"
-                                    :to="{name: 'Episode', params: { season: season.season_id, episode: episode.episode_id }, }"
+                                    :season-number="episode.seasonNumber"
-                                >
+                                    :title="episode.title"
-                                    Episode {{ episode.episode_id }} - "{{ episode.title }}"
+                                />
-                                </b-list-group-item>
                                 <b-popover
                                     :key="`bpop-${episode.episode_id}`" triggers="hover"
                                     placement="right" delay="25"
@@ -45,13 +44,15 @@
 </template>
 
 <script>
-import Skeleton from './Skeleton.vue';
+import Skeleton from '@/components/Skeleton';
+import SeasonListItem from "@/components/SeasonListItem";
 import {types} from "@/mutation_types";
 
 export default {
     name: "SeasonList",
     components: {
-        Skeleton
+        Skeleton,
+        SeasonListItem
     },
     computed: {
         seasons() {

src/components/SeasonListItem.vue

@@ -0,0 +1,46 @@
+<template>
+    <b-list-group-item
+        :id="`s-${seasonNumber}-ep-${episodeNumber}`"
+        :to="{name: 'Episode', params: { season: seasonNumber, episode: episodeNumber }, }"
+        class="no-link episode-item"
+        @mouseover="hoverOn" @mouseleave="hoverOff"
+    >
+        Episode {{ episodeNumber }} - "{{ title }}"
+    </b-list-group-item>
+</template>
+
+<script>
+import {types} from "@/mutation_types";
+
+export default {
+    name: "SeasonListItem",
+    props: {
+        episodeNumber: {type: Number, default: null, required: true},
+        seasonNumber: {type: Number, default: null, required: true},
+        title: {type: String, default: null, required: true}
+    },
+    data() {
+        return {
+            timeoutID: null
+        }
+    },
+    methods: {
+        hoverFetch() {
+            this.$store.dispatch(types.FETCH_EPISODE, {season: this.seasonNumber, episode: this.episodeNumber})
+        },
+        hoverOn() {
+            this.timeoutID = setTimeout(this.hoverFetch, 800);
+        },
+        hoverOff() {
+            if (this.timeoutID !== null) {
+                clearTimeout(this.timeoutID)
+                this.timeoutID = null;
+            }
+        }
+    }
+}
+</script>
+
+<style scoped>
+
+</style>