Load route destination suggestions sooner to avoid delays because of rate limit

frontend/src/lib/components/route-form/route-form.ts

@@ -29,6 +29,7 @@ type Suggestion = SearchSuggestion | MapSuggestion;
 interface Destination {
 	query: string;
 	loadingQuery?: string;
+	loadingPromise?: Promise<void>;
 	loadedQuery?: string;
 	searchSuggestions?: SearchSuggestion[];
 	mapSuggestions?: MapSuggestion[];
@@ -263,7 +264,10 @@ export default class RouteForm extends Vue {
 	}
 
 	async loadSuggestions(dest: Destination): Promise<void> {
-		if (dest.loadingQuery == dest.query.trim() || dest.loadedQuery == dest.query.trim())
+		if (dest.loadingQuery == dest.query.trim()) {
+			await dest.loadingPromise;
+			return;
+		} else if (dest.loadedQuery == dest.query.trim())
 			return;
 
 		const idx = this.destinations.indexOf(dest);
@@ -272,12 +276,15 @@ export default class RouteForm extends Vue {
 		Vue.set(dest, "mapSuggestions", undefined);
 		Vue.set(dest, "selectedSuggestion", undefined);
 		Vue.set(dest, "loadingQuery", undefined);
+		Vue.set(dest, "loadingPromise", undefined);
 		Vue.set(dest, "loadedQuery", undefined);
 
 		const query = dest.query.trim();
 
 		if(query != "") {
 			dest.loadingQuery = query;
+			let resolveLoadingPromise = (): void => undefined;
+			dest.loadingPromise = new Promise((resolve) => { resolveLoadingPromise = resolve; });
 
 			try {
 				const [searchResults, mapResults] = await Promise.all([
@@ -327,6 +334,8 @@ export default class RouteForm extends Vue {
 
 				console.warn(err.stack || err);
 				showErrorToast(this, `fm${this.context.id}-route-form-suggestion-error-${idx}`, `Error finding destination “${query}”`, err);
+			} finally {
+				resolveLoadingPromise();
 			}
 		}
 	}

frontend/src/lib/components/route-form/route-form.vue

@@ -7,7 +7,7 @@
 					<b-input-group-prepend>
 						<b-input-group-text class="px-2"><a href="javascript:" class="fm-drag-handle" @contextmenu.prevent><Icon icon="resize-vertical" alt="Reorder"></Icon></a></b-input-group-text>
 					</b-input-group-prepend>
-					<b-form-input v-model="destination.query" :placeholder="idx == 0 ? 'From' : idx == destinations.length-1 ? 'To' : 'Via'" :tabindex="idx+1" :state="getValidationState(destination)"></b-form-input>
+					<b-form-input v-model="destination.query" :placeholder="idx == 0 ? 'From' : idx == destinations.length-1 ? 'To' : 'Via'" :tabindex="idx+1" :state="getValidationState(destination)" @blur="loadSuggestions(destination)"></b-form-input>
 					<b-input-group-append>
 						<b-dropdown v-if="destination.query.trim() != ''" @show="loadSuggestions(destination)" :menu-class="['fm-route-suggestions', { isPending: !destination.searchSuggestions, isNarrow: context.isNarrow }]">
 							<template v-if="destination.searchSuggestions">