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

assets/js/actors/actions.js

@@ -188,7 +188,8 @@ function initActorActions(store, _router) {
 	}
 
 	async function fetchActors({ _commit }, {
-		limit = 100,
+		limit = 10,
+		pageNumber = 1,
 		letter,
 		gender,
 	}) {
@@ -196,14 +197,16 @@ function initActorActions(store, _router) {
 			? 'isNull: true'
 			: `equalTo: "${gender}"`;
 
-		const { actors } = await graphql(`
+		const { connection: { actors, totalCount } } = await graphql(`
             query Actors(
                 $limit: Int,
+                $offset: Int = 0,
                 $letter: String! = "",
             ) {
-                actors(
-                    first:$limit,
-                    orderBy: NAME_ASC,
+				connection: actorsConnection(
+                    first: $limit,
+					offset: $offset
+                    orderBy: NAME_ASC
                     filter: {
 						aliasFor: {
 							isNull: true
@@ -216,44 +219,53 @@ function initActorActions(store, _router) {
                         }
                     }
                 ) {
-                    id
-                    name
-                    slug
-                    age
-                    dateOfBirth
-                    gender
-                    network {
-                        id
-                        name
-                        slug
-                    }
-					avatar: avatarMedia {
+					totalCount
+					actors: nodes {
 						id
-						path
-						thumbnail
-						lazy
-						comment
-						copyright
-						sfw: sfwMedia {
+						name
+						slug
+						age
+						ageAtDeath
+						dateOfBirth
+						dateOfDeath
+						gender
+						network {
+							id
+							name
+							slug
+						}
+						avatar: avatarMedia {
 							id
-							thumbnail
 							path
+							thumbnail
+							lazy
 							comment
+							copyright
+							sfw: sfwMedia {
+								id
+								thumbnail
+								path
+								comment
+							}
+						}
+						birthCountry: countryByBirthCountryAlpha2 {
+						  alpha2
+						  name
+						  alias
 						}
 					}
-                    birthCountry: countryByBirthCountryAlpha2 {
-                      alpha2
-                      name
-                      alias
-                    }
                 }
             }
         `, {
+			offset: Math.max(0, (pageNumber - 1)) * limit,
 			limit,
 			letter,
 		});
 
-		return actors.map(actor => curateActor(actor));
+		return {
+			actors: actors.map(actor => curateActor(actor)),
+			totalCount,
+		};
 	}
 
 	async function fetchActorReleases({ _commit }, actorId) {