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

assets/components/tile/actor.vue

@@ -33,13 +33,21 @@
 					icon="users3"
 					class="favicon alias"
 				/>
+
+				<Icon
+					v-if="actor.dateOfDeath"
+					v-tooltip="`Died ${formatDate(actor.dateOfDeath, 'MMMM D, YYYY')}`"
+					icon="tombstone"
+					class="favicon died"
+				/>
 			</span>
 
 			<div class="avatar-container">
 				<img
 					v-if="actor.avatar"
-					:src="sfw ? `/img/${actor.avatar.sfw.thumbnail}` : `/media/${actor.avatar.thumbnail}`"
-					class="avatar"
+					:data-src="sfw ? `/img/${actor.avatar.sfw.thumbnail}` : `/media/${actor.avatar.thumbnail}`"
+					:data-loading="sfw ? `/img/${actor.avatar.sfw.lazy}` : `/media/${actor.avatar.lazy}`"
+					class="avatar lazy"
 				>
 
 				<span
@@ -57,8 +65,14 @@
 						<Gender :gender="actor.gender" />
 
 						<span
-							v-if="actor.age"
-							v-tooltip="`Born on ${formatDate(actor.birthdate, 'MMMM D, YYYY')}`"
+							v-if="actor.ageAtDeath"
+							v-tooltip="`Born ${formatDate(actor.dateOfBirth, 'MMMM D, YYYY')}<br>Died ${formatDate(actor.dateOfDeath, 'MMMM D, YYYY')}`"
+							class="age-death"
+						>{{ actor.ageAtDeath }}</span>
+
+						<span
+							v-else-if="actor.age"
+							v-tooltip="`Born on ${formatDate(actor.dateOfBirth, 'MMMM D, YYYY')}`"
 							class="age-now"
 						>{{ actor.age }}</span>
 
@@ -127,7 +141,8 @@ export default {
     position: relative;
     margin: 0 .5rem .5rem 0;
     box-shadow: 0 0 3px var(--darken-weak);
-    background: var(--profile);
+    background: var(--background);
+	overflow: hidden;
 
     &::before {
         content: '';
@@ -144,7 +159,7 @@ export default {
     position: absolute;
     top: 0;
     left: 0;
-    color: var(--text-light);
+    color: var(--text);
     text-decoration: none;
 
     &:hover {
@@ -157,6 +172,7 @@ export default {
     align-items: center;
     justify-content: center;
     font-weight: bold;
+	box-shadow: 0 0 3px var(--shadow);
 
 	.name {
 		padding: .5rem;
@@ -174,6 +190,10 @@ export default {
 	&:last-child {
 		padding: .5rem;
 	}
+
+	&.died {
+		fill: var(--lighten);
+	}
 }
 
 .favicon-icon {
@@ -193,6 +213,7 @@ export default {
     flex-grow: 1;
     position: relative;
 	overflow: hidden;
+	background: var(--profile);
 }
 
 .avatar {