Added profile flush.

assets/components/entities/children.vue

@@ -1,10 +1,15 @@
 <template>
 	<div class="children">
-		<EntityTile
+		<div
 			v-for="child in entity.children"
 			:key="`child-${child.id}`"
-			:entity="child"
-		/>
+			class="tile-container"
+		>
+			<EntityTile
+				:entity="child"
+				@load="(event) => $emit('load', event)"
+			/>
+		</div>
 	</div>
 </template>
 
@@ -15,6 +20,7 @@ export default {
 	components: {
 		EntityTile,
 	},
+	emits: ['load'],
 	props: {
 		entity: {
 			type: Object,
@@ -33,13 +39,14 @@ export default {
 	padding: 1rem;
 	margin: 0 1rem 0 0;
 	border-bottom: solid 1px var(--darken-hint);
-	overflow-x: auto;
-	scroll-behavior: smooth;
-	scrollbar-width: none;
+
+	.tile-container {
+		display: inline-block;
+		padding: 0 1rem 0 0;
+	}
 
 	.tile {
 		width: 15rem;
-		margin: 0 1rem 0 0;
 	}
 
 	&.expanded {
@@ -52,10 +59,6 @@ export default {
 			width: 100%;
 		}
 	}
-
-	&::-webkit-scrollbar {
-		display: none;
-	}
 }
 
 @media(max-width: $breakpoint0) {

assets/components/entities/entity.vue

@@ -81,6 +81,7 @@
 		>
 			<Scroll
 				v-if="entity.children.length > 0"
+				v-slot="scroll"
 				:expanded="expanded"
 				class="scroll-dark"
 				@expand="(state) => expanded = state"
@@ -88,6 +89,7 @@
 				<Children
 					:entity="entity"
 					:class="{ expanded }"
+					@load="scroll.loaded"
 				/>
 			</Scroll>
 
@@ -234,6 +236,10 @@ export default {
 	flex-direction: column;
 }
 
+.scroll {
+	background: var(--profile);
+}
+
 .releases {
 	flex-grow: 1;
 }

assets/components/entities/tile.vue

@@ -9,21 +9,27 @@
 				v-if="entity.type === 'network' || entity.independent"
 				:src="`/img/logos/${entity.slug}/thumbs/network.png`"
 				:alt="entity.name"
+				loading="lazy"
 				class="logo"
+				@load="$emit('load', $event)"
 			>
 
 			<img
 				v-else-if="entity.parent"
 				:src="`/img/logos/${entity.parent.slug}/thumbs/${entity.slug}.png`"
 				:alt="entity.name"
+				loading="lazy"
 				class="logo"
+				@load="$emit('load', $event)"
 			>
 
 			<img
 				v-else
 				:src="`/img/logos/${entity.slug}/thumbs/${entity.slug}.png`"
 				:alt="entity.name"
+				loading="lazy"
 				class="logo"
+				@load="$emit('load', $event)"
 			>
 		</template>
 
@@ -42,6 +48,7 @@ export default {
 			default: null,
 		},
 	},
+	emits: ['load'],
 };
 </script>
 

assets/js/curate.js

@@ -29,7 +29,7 @@ function curateActor(actor, release) {
 		updatedAt: new Date(actor.updatedAt),
 	};
 
-	if (actor.profiles && actor.profiles.length > 0) {
+	if (actor.profiles) {
 		const photos = actor.profiles
 			.map(profile => ({ entity: profile.entity, ...profile.avatar }))
 			.filter(avatar => avatar.id && (!curatedActor.avatar || avatar.hash !== curatedActor.avatar.hash));