Added pagination to actor overview. Lazy loading actor avatars. Reduced hash digest length.

assets/components/actors/actor.vue

@@ -81,7 +81,7 @@
 						v-if="actor.dateOfDeath"
 						class="bio-item"
 					>
-						<dfn class="bio-label"><Icon icon="christian-cross" />Date of death</dfn>
+						<dfn class="bio-label"><Icon icon="tombstone" />Date of death</dfn>
 
 						<span class="birthdate">{{ formatDate(actor.dateOfDeath, 'MMMM D, YYYY') }}<span
 							v-if="actor.ageAtDeath"

assets/components/actors/actors.vue

@@ -47,28 +47,47 @@
 			</ul>
 		</nav>
 
-		<div class="tiles">
+		<Pagination
+			:items-total="totalCount"
+			:items-per-page="limit"
+		/>
+
+		<div
+			v-lazy-container="{ selector: '.lazy' }"
+			class="tiles"
+		>
 			<Actor
 				v-for="actor in actors"
 				:key="`actor-${actor.id}`"
 				:actor="actor"
 			/>
 		</div>
+
+		<Pagination
+			:items-total="totalCount"
+			:items-per-page="limit"
+			class="pagination-top"
+		/>
 	</div>
 </template>
 
 <script>
 import Actor from '../tile/actor.vue';
 import Gender from './gender.vue';
+import Pagination from '../pagination/pagination.vue';
 
 async function fetchActors() {
 	const curatedGender = this.gender.replace('trans', 'transsexual');
 
-	this.actors = await this.$store.dispatch('fetchActors', {
-		limit: 1000,
+	const { actors, totalCount } = await this.$store.dispatch('fetchActors', {
+		limit: this.limit,
+		pageNumber: Number(this.$route.params.pageNumber) || 1,
 		letter: this.letter.replace('all', ''),
 		gender: curatedGender === 'other' ? null : curatedGender,
 	});
+
+	this.actors = actors;
+	this.totalCount = totalCount;
 }
 
 function letter() {
@@ -93,11 +112,14 @@ export default {
 	components: {
 		Actor,
 		Gender,
+		Pagination,
 	},
 	data() {
 		return {
 			actors: [],
 			pageTitle: null,
+			totalCount: 0,
+			limit: 30,
 			letters: ['all'].concat(Array.from({ length: 26 }, (value, index) => String.fromCharCode(index + 97).toUpperCase())),
 		};
 	},