Panel search: abort previous requests

panel/src/components/Dialogs/SearchDialog.vue

@@ -40,7 +40,7 @@
 			/>
 		</div>
 
-		<div v-if="query?.length > 1" class="k-search-dialog-results">
+		<div v-if="query?.length > 1 && !isLoading" class="k-search-dialog-results">
 			<!-- Results -->
 			<k-collection
 				v-if="items.length"

panel/src/panel/panel.js

@@ -9,6 +9,7 @@ import Notification from "./notification.js";
 import Language from "./language.js";
 import Plugins from "./plugins.js";
 import Menu from "./menu.js";
+import Search from "./search.js";
 import System from "./system.js";
 import Translation from "./translation.js";
 import { buildUrl, isUrl } from "@/helpers/url.js";
@@ -72,6 +73,7 @@ export default {
 		this.activation = Activation(this);
 		this.drag = Drag(this);
 		this.events = Events(this);
+		this.searcher = Search(this);
 		this.upload = Upload(this);
 
 		// state objects
@@ -284,34 +286,8 @@ export default {
 		});
 	},
 
-	/**
-	 * Use one of the installed search types
-	 * to search for content in the panel
-	 *
-	 * @param {String} type
-	 * @param {Object} query
-	 * @param {Object} options { limit, page }
-	 * @returns {Object} { code, path, referrer, results, timestamp }
-	 */
 	async search(type, query, options) {
-		// open the search dialog
-		if (!query) {
-			// close menu on mobile
-			this.menu.escape();
-
-			return this.dialog.open({
-				component: "k-search-dialog",
-				props: {
-					type: type
-				}
-			});
-		}
-
-		const { $search } = await this.get(`/search/${type}`, {
-			query: { query, ...options }
-		});
-
-		return $search;
+		return this.searcher.search(type, query, options);
 	},
 
 	/**

panel/src/panel/search.js

@@ -0,0 +1,48 @@
+export default (panel) => {
+	return {
+		controller: null,
+
+		/**
+		 * Open the search dialog
+		 * @param {String} type to preselect
+		 */
+		open(type) {
+			// close menu on mobile
+			panel.menu.escape();
+
+			panel.dialog.open({
+				component: "k-search-dialog",
+				props: {
+					type
+				}
+			});
+		},
+
+		/**
+		 * Use one of the installed search types
+		 * to search for content in the panel
+		 *
+		 * @param {String} type
+		 * @param {Object} query
+		 * @param {Object} options { limit, page }
+		 * @returns {Object} { code, path, referrer, results, timestamp }
+		 */
+		async search(type, query, options) {
+			// open the search dialog
+			if (!query) {
+				return this.open(type);
+			}
+
+			// abort previous search requests
+			this.controller?.abort();
+			this.controller = new AbortController();
+
+			const { $search } = await panel.get(`/search/${type}`, {
+				query: { query, ...options },
+				signal: this.controller.signal
+			});
+
+			return $search;
+		}
+	};
+};