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 {