Not parsing HTML with jsdom when using http module directly to save memory. Added loading ellipsis to release grid pages.

assets/components/actors/actor.vue

@@ -361,7 +361,10 @@
 					:available-actors="actor.actors"
 				/>
 
-				<Releases :releases="releases" />
+				<Releases
+					:releases="releases"
+					:done="done"
+				/>
 
 				<Pagination
 					:items-total="totalCount"
@@ -389,6 +392,8 @@ import Social from './social.vue';
 import StashButton from '../stashes/button.vue';
 
 async function fetchActor(scroll = true) {
+	this.done = false;
+
 	const { actor, releases, totalCount } = await this.$store.dispatch('fetchActorById', {
 		actorId: Number(this.$route.params.actorId),
 		limit: this.limit,
@@ -400,6 +405,7 @@ async function fetchActor(scroll = true) {
 	this.releases = releases;
 	this.totalCount = totalCount;
 	this.stashedBy = actor.stashes;
+	this.done = true;
 
 	if (this.$refs.filter && scroll) {
 		this.$refs.filter.$el.scrollIntoView();
@@ -463,6 +469,7 @@ export default {
 		return {
 			actor: null,
 			releases: null,
+			done: false,
 			totalCount: 0,
 			limit: 20,
 			pageTitle: null,

assets/components/auth/login.vue

@@ -35,11 +35,11 @@
 				class="button button-primary"
 			>Log in</button>
 
-			<router-link
+			<RouterLink
 				v-if="$store.state.auth.signup"
 				:to="{ name: 'signup', query: { ref: $route.query.ref } }"
 				class="link link-external signup"
-			>Sign up</router-link>
+			>Sign up</RouterLink>
 		</template>
 	</form>
 </template>

assets/components/auth/signup.vue

@@ -43,11 +43,11 @@
 				class="button button-primary"
 			>Sign up</button>
 
-			<router-link
+			<RouterLink
 				v-if="$store.state.auth.login"
 				:to="{ name: 'login', query: { ref: $route.query.ref } }"
 				class="link link-external login"
-			>Log in</router-link>
+			>Log in</RouterLink>
 		</template>
 	</form>
 </template>

assets/components/entities/entity.vue

@@ -111,7 +111,10 @@
 			/>
 
 			<div class="releases">
-				<Releases :releases="entity.releases" />
+				<Releases
+					:releases="entity.releases"
+					:done="done"
+				/>
 
 				<Pagination
 					:items-total="totalCount"
@@ -134,6 +137,7 @@ import Scroll from '../scroll/scroll.vue';
 import Campaign from '../campaigns/campaign.vue';
 
 async function fetchEntity(scroll = true) {
+	this.done = false;
 	this.entityUrl = null;
 
 	const { entity, totalCount } = await this.$store.dispatch('fetchEntityBySlugAndType', {
@@ -158,6 +162,7 @@ async function fetchEntity(scroll = true) {
 	}).toString();
 
 	this.entityUrl = campaign?.url || campaign?.affiliate?.url || `${entity.url}${campaign?.affiliate?.parameters ? `?${affiliateParams}` : ''}`;
+	this.done = true;
 
 	if (scroll && this.$refs.filter?.$el) {
 		this.$refs.filter.$el.scrollIntoView();
@@ -189,6 +194,7 @@ export default {
 			entity: null,
 			pageTitle: null,
 			totalCount: null,
+			done: false,
 			limit: Number(this.$route.query.limit) || 20,
 			expanded: false,
 			entityUrl: null,

assets/components/loading/ellipsis.vue

@@ -0,0 +1,90 @@
+<template>
+	<div class="load-container">
+		<div class="load-ellipsis">
+			<div />
+			<div />
+			<div />
+			<div />
+		</div>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+.load-container {
+	display: inline-flex;
+	position: relative;
+	padding: 1rem;
+}
+
+.load-ellipsis {
+    display: inline-block;
+    position: relative;
+    width: 5rem;
+    height: .75rem;
+}
+
+.load-ellipsis div {
+    position: absolute;
+    top: 0;
+    width: .75rem;
+    height: .75rem;
+    border-radius: 50%;
+    background: var(--primary);
+}
+
+.load-ellipsis div:nth-child(1) {
+    left: .5rem;
+    animation: load-ellipsis1 0.5s infinite linear;
+}
+
+.load-ellipsis div:nth-child(2) {
+    left: .5rem;
+    animation: load-ellipsis2 0.5s infinite linear;
+}
+
+.load-ellipsis div:nth-child(3) {
+    left: 2rem;
+    animation: load-ellipsis3 0.5s infinite linear;
+}
+
+.load-ellipsis div:nth-child(4) {
+    left: 3.5rem;
+    animation: load-ellipsis4 0.5s infinite linear;
+}
+
+@keyframes load-ellipsis1 {
+	0% {
+		transform: scale(0);
+	}
+	100% {
+		transform: scale(0.5);
+	}
+}
+
+@keyframes load-ellipsis2 {
+	0% {
+		transform: translate(0, 0) scale(0.5);
+	}
+	100% {
+		transform: translate(1.5rem, 0) scale(1);
+	}
+}
+
+@keyframes load-ellipsis3 {
+	0% {
+		transform: translate(0, 0) scale(1);
+	}
+	100% {
+		transform: translate(1.5rem, 0) scale(0.5);
+	}
+}
+
+@keyframes load-ellipsis4 {
+    0% {
+		transform: scale(0.5);
+    }
+    100% {
+		transform: scale(0);
+    }
+}
+</style>

assets/components/releases/releases.vue

@@ -5,8 +5,10 @@
 			class="heading"
 		><span class="range">{{ range }}</span> releases for '{{ context }}'</h3>
 
+		<Ellipsis v-if="!done" />
+
 		<ul
-			v-if="releases.length > 0"
+			v-else-if="releases.length > 0"
 			:key="sfw"
 			class="nolist tiles"
 		>
@@ -25,7 +27,7 @@
 		</ul>
 
 		<span
-			v-if="releases.length === 0 && range !== 'all'"
+			v-else-if="releases.length === 0 && range !== 'all'"
 			class="empty"
 		>No {{ range }} releases</span>
 
@@ -37,6 +39,7 @@
 </template>
 
 <script>
+import Ellipsis from '../loading/ellipsis.vue';
 import SceneTile from './scene-tile.vue';
 
 function range() {
@@ -49,6 +52,7 @@ function sfw() {
 
 export default {
 	components: {
+		Ellipsis,
 		SceneTile,
 	},
 	props: {
@@ -60,6 +64,10 @@ export default {
 			type: String,
 			default: null,
 		},
+		done: {
+			type: Boolean,
+			default: true,
+		},
 		referer: {
 			type: String,
 			default: null,

assets/components/tags/tag.vue

@@ -64,7 +64,10 @@
 				:fetch-releases="fetchReleases"
 			/>
 
-			<Releases :releases="releases" />
+			<Releases
+				:releases="releases"
+				:done="done"
+			/>
 
 			<Pagination
 				:items-total="totalCount"
@@ -93,6 +96,8 @@ import Campaign from '../campaigns/campaign.vue';
 const converter = new Converter();
 
 async function fetchReleases(scroll = true) {
+	this.done = false;
+
 	const { tag, releases, totalCount } = await this.$store.dispatch('fetchTagBySlug', {
 		tagSlug: this.$route.params.tagSlug,
 		pageNumber: Number(this.$route.params.pageNumber),
@@ -107,6 +112,8 @@ async function fetchReleases(scroll = true) {
 	this.hasMedia = this.tag.poster || this.tag.photos.length > 0;
 	this.description = this.tag.description && converter.makeHtml(escapeHtml(this.tag.description));
 
+	this.done = true;
+
 	if (this.hasMedia) {
 		this.showBannerCampaign = true;
 	}
@@ -146,6 +153,7 @@ export default {
 			tag: null,
 			description: null,
 			releases: null,
+			done: false,
 			totalCount: 0,
 			limit: 20,
 			pageTitle: null,