Replaced container key with route watchers to reduce flashing.

assets/components/actors/actor.vue

@@ -259,6 +259,10 @@ async function fetchActor() {
     });
 }
 
+async function route() {
+    await this.fetchActor();
+}
+
 function scrollPhotos(event) {
     event.currentTarget.scrollLeft += event.deltaY; // eslint-disable-line no-param-reassign
 }
@@ -287,6 +291,9 @@ export default {
             expanded: false,
         };
     },
+    watch: {
+        $route: route,
+    },
     mounted,
     methods: {
         fetchActor,

assets/components/actors/actors.vue

@@ -42,7 +42,6 @@
                         :to="{ name: 'actors', params: { gender, letter: letterX } }"
                         :class="{ selected: letterX === letter }"
                         class="letter-link"
-                        @click="setLetter(letterX)"
                     >{{ letterX || 'All' }}</router-link>
                 </li>
             </ul>
@@ -63,18 +62,24 @@ import Actor from '../tile/actor.vue';
 import Gender from './gender.vue';
 
 async function fetchActors() {
-    const gender = this.gender.replace('trans', 'transsexual');
+    const curatedGender = this.gender.replace('trans', 'transsexual');
 
     this.actors = await this.$store.dispatch('fetchActors', {
         limit: 1000,
         letter: this.letter.replace('all', ''),
-        genders: [gender === 'other' ? null : gender],
+        genders: [curatedGender === 'other' ? null : curatedGender],
     });
 }
 
-async function setLetter(letter) {
-    this.letter = letter;
+function letter() {
+    return this.$route.params.letter || 'all';
+}
 
+function gender() {
+    return this.$route.params.gender || 'female';
+}
+
+async function route() {
     await this.fetchActors();
 }
 
@@ -94,14 +99,18 @@ export default {
             actors: [],
             pageTitle: null,
             letters: ['all'].concat(Array.from({ length: 26 }, (value, index) => String.fromCharCode(index + 97).toUpperCase())),
-            letter: this.$route.params.letter || 'all',
-            gender: this.$route.params.gender || 'female',
         };
     },
+    computed: {
+        letter,
+        gender,
+    },
+    watch: {
+        $route: route,
+    },
     mounted,
     methods: {
         fetchActors,
-        setLetter,
     },
 };
 </script>
@@ -189,7 +198,7 @@ export default {
     }
 
     &:hover {
-        color: var(--text-light);
+        color: var(--text);
         cursor: pointer;
 
         .icon {

assets/components/container/container.vue

@@ -12,7 +12,7 @@
 
         <div class="content">
             <!-- key forces rerender when new and old path use same component -->
-            <router-view :key="$route.fullPath" />
+            <router-view />
         </div>
     </div>
 </template>

assets/components/home/home.vue

@@ -22,6 +22,10 @@ async function fetchReleases() {
     });
 }
 
+async function route() {
+    await this.fetchReleases();
+}
+
 async function mounted() {
     this.pageTitle = '';
 
@@ -44,6 +48,9 @@ export default {
     beforeRouteEnter(to, from, next) {
         next(vm => vm.$set(vm, 'from', from));
     },
+    watch: {
+        $route: route,
+    },
     mounted,
     methods: {
         fetchReleases,

assets/components/networks/network.vue

@@ -147,6 +147,10 @@ async function fetchNetwork() {
     this.releases = this.network.releases;
 }
 
+async function route() {
+    await this.fetchNetwork();
+}
+
 async function mounted() {
     await this.fetchNetwork();
     this.pageTitle = this.network.name;
@@ -170,6 +174,9 @@ export default {
             expanded: false,
         };
     },
+    watch: {
+        $route: route,
+    },
     mounted,
     methods: {
         fetchNetwork,

assets/components/networks/networks.vue

@@ -52,8 +52,6 @@ async function searchSites() {
         query: this.query,
         limit: 20,
     });
-
-    console.log(this.searchResults);
 }
 
 async function mounted() {

assets/components/releases/releases.vue

@@ -38,7 +38,7 @@
 import ReleaseTile from '../tile/release.vue';
 
 function range() {
-    return this.$store.state.ui.range;
+    return this.$route.params.range;
 }
 
 function sfw() {

assets/components/sites/site.vue

@@ -62,6 +62,10 @@ async function fetchSite() {
     this.releases = this.site.releases;
 }
 
+async function route() {
+    await this.fetchSite();
+}
+
 async function mounted() {
     await this.fetchSite();
 
@@ -80,6 +84,9 @@ export default {
             pageTitle: null,
         };
     },
+    watch: {
+        $route: route,
+    },
     mounted,
     methods: {
         fetchSite,

assets/components/tags/tag.vue

@@ -71,6 +71,10 @@ async function fetchReleases() {
     this.description = this.tag.description && converter.makeHtml(escapeHtml(this.tag.description));
 }
 
+async function route() {
+    await this.fetchReleases();
+}
+
 async function mounted() {
     await this.fetchReleases();
     this.pageTitle = this.tag.name;
@@ -91,6 +95,9 @@ export default {
             hasMedia: false,
         };
     },
+    watch: {
+        $route: route,
+    },
     mounted,
     methods: {
         fetchReleases,