change mouseover event to use short timeouts in order to reduce unused pre-fetching traffic, minor reformatting, remove preload axios console.log

client/src/components/SearchResult.vue

@@ -1,12 +1,7 @@
 <template>
-    <b-card
+    <b-card class="mb-1" body-class="p-0 expandable-result" footer-class="my-1"
-        class="mb-1"
+            @mouseover="hoverOn" @mouseleave="hoverOff" v-on:click="toggleExpansion"
-        body-class="p-0 expandable-result"
+            :class="[expanded ? 'expanded' : '']">
-        footer-class="my-1"
-        v-on:mouseover="hover"
-        v-on:click="toggleExpansion"
-        :class="[expanded ? 'expanded' : '']"
-    >
         <b-card-text class="mu-2 py-1 mb-1">
             <table v-if="expanded" class="quote-list px-3 py-1 w-100">
                 <tr
@@ -56,15 +51,9 @@
                     ></td>
                 </tr>
             </table>
-            <router-link
+            <router-link v-if="expanded" class="no-link search-result-link w-100 text-muted mb-2 ml-2"
-                v-if="expanded"
+                         :to="{name: 'Episode', params: { season: item.season, episode: item.episode_rel },
-                class="no-link search-result-link w-100 text-muted mb-2 ml-2"
+                            hash: `#${item.section_rel - 1}-${item.quote_rel - 1}`, }">
-                :to="{
-          name: 'Episode',
-          params: { season: item.season, episode: item.episode_rel },
-          hash: `#${item.section_rel - 1}-${item.quote_rel - 1}`,
-        }"
-            >
                 Season {{ item.season }} Episode {{ item.episode_rel }} Scene
                 {{ item.section_rel }}
             </router-link>
@@ -119,6 +108,7 @@ export default {
             fetching: false,
             above: null,
             below: null,
+            timeoutID: null
         };
     },
     computed: {
@@ -135,13 +125,21 @@ export default {
                 this.fetchQuotes();
             }
         },
-        hover() {
+        hoverFetch() {
             if (!this.fetched && !this.fetching) {
                 this.fetching = true;
                 this.fetchQuotes();
                 this.fetching = false;
             }
         },
+        hoverOn() {
+            // Schedule a fetching event
+            this.timeoutID = setTimeout(this.hoverFetch, 300);
+        },
+        hoverOff() {
+            // Hover is off. Unschedule event if it has not already fetched.
+            clearTimeout(this.timeoutID);
+        },
         fetchQuotes() {
             const path = `${process.env.VUE_APP_API_URL}/api/quote_surround?season=\
 ${this.item.season}&episode=${this.item.episode_rel}&scene=${this.item.section_rel}&quote=${this.item.quote_rel}`;

client/src/components/SearchResults.vue

@@ -2,11 +2,7 @@
     <div>
         <ais-hits>
             <div slot-scope="{ items }">
-                <SearchResult
+                <SearchResult v-for="item in items" :item="item" :key="item.objectID"></SearchResult>
-                    v-for="item in items"
-                    :item="item"
-                    :key="item.objectID"
-                ></SearchResult>
             </div>
         </ais-hits>
     </div>

client/src/store.js

@@ -84,7 +84,7 @@ export default new Vuex.Store({
         },
         [types.PRELOAD]({commit}) {
             const path = `${process.env.VUE_APP_API_URL}/api/episodes/`;
-            console.log('preload axios')
+
             axios.get(path)
                 .then((res) => {
                     for (const season of res.data)