more responsive gallery search with AbortController

components/fullscreen-preview.vue

@@ -7,7 +7,11 @@
 				alt="fullscreen preview"
 				:aspect-ratio="aspectRatio"
 				contain
-				@click="() => { modalOpened = false }"
+				@click="
+					() => {
+						modalOpened = false;
+					}
+				"
 			/>
 		</v-card>
 	</v-dialog>

package.json

@@ -25,7 +25,7 @@
 		"@vitejs/plugin-vue2": "^2.3.3",
 		"axios": "^1.7.9",
 		"d3": "7.9.0",
-		"dompurify": "^3.2.2",
+		"dompurify": "^3.2.3",
 		"dotenv": "^16.4.7",
 		"marked": "~15.0.3",
 		"moment": "^2.30.1",

pages/gallery/gallery-tooltip.vue

@@ -31,9 +31,7 @@
 				</div>
 			</div>
 			<div class="texture-tags-container">
-				<span class="encased" v-for="tag in texture.tags" :key="tag">
-					{{ `${tag}` }}
-				</span>
+				<span class="encased" v-for="tag in texture.tags" :key="tag">{{ tag }}</span>
 			</div>
 		</div>
 	</div>

pages/gallery/main.vue

@@ -157,6 +157,7 @@ export default {
 			ignoredTextures: {},
 			// go to the top arrow
 			scrollY: 0,
+			abortController: new AbortController(),
 		};
 	},
 	methods: {
@@ -219,9 +220,11 @@ export default {
 			if (this.$route.path === route) return; // new search is the same as before
 			this.$router.push(route);
 		},
-		updateSearch() {
+		searchGallery() {
 			// prevent concurrency issues
-			if (this.loading) return;
+			if (this.loading) this.abortController.abort();
+			// cancel request and set loading true no matter what
+			this.abortController = new AbortController();
 			this.loading = true;
 			this.timer.start = Date.now();
 			this.textures = [];
@@ -232,17 +235,17 @@ export default {
 
 			// /gallery/{pack}/{edition}/{mc_version}/{tag}
 			axios
-				.get(url)
+				.get(url, { signal: this.abortController.signal })
 				.then((res) => {
 					this.textures = res.data;
 					this.timer.end = Date.now();
+					this.loading = false;
 				})
-				.catch((e) => {
-					console.error(e);
-					this.error = `${e.statusCode}: ${e.response.value}`;
-				})
-				.finally(() => {
-					// no matter what it's not loading anymore
+				.catch((err) => {
+					// new search started before old one finished, cancel
+					if (err.code === "ERR_CANCELED") return;
+					console.error(err);
+					this.error = `${err.statusCode}: ${err.response.value}`;
 					this.loading = false;
 				});
 		},
@@ -311,7 +314,7 @@ export default {
 				} else this.current.pack = params.pack;
 
 				// wait until version/edition watcher sync has been done
-				this.$nextTick(() => this.updateSearch());
+				this.$nextTick(() => this.searchGallery());
 			},
 			deep: true,
 			immediate: true,