🚸 Show an error message if the query was cancelled due to a timeout

app/js/main.js

@@ -41,10 +41,15 @@ const api = new API();
   * @private
   * @returns {void}
   */
-async function search() {
+function search() {
   document.getElementById('preloader').classList.remove('d-hide');
-  const notes = await query.search();
-  ui.show(Array.from(notes), query).then(details).finally(() => {
+  query.search().then(notes => {
+    ui.show(Array.from(notes), query).then(details);
+  }).catch(error => {
+    if (error.name === 'TimeoutError') {
+      new Toast(Localizer.message('error.queryTimeout'), 'toast-error').show(Toast.DURATION_LONG);
+    }
+  }).finally(() => {
     document.getElementById('preloader').classList.add('d-hide');
   });
 }

app/js/query.js

@@ -68,6 +68,19 @@ const NOT_MODIFIABLE_BY_USER = [
   'bbox', 'countries', 'polygon', 'sort_by', 'order'
 ];
 
+export class TimeoutError extends Error {
+  /**
+   * Error class for timeout errors
+   *
+   * @constructor
+   * @param {...*} params
+   */
+  constructor(...params) {
+    super(...params);
+    this.name = 'TimeoutError';
+  }
+}
+
 export default class Query {
   /**
     * Constructor for a new query
@@ -542,6 +555,16 @@ export default class Query {
     const result = await Request.post(url, Request.MEDIA_TYPE.JSON, this.controller, data);
     this.controller = null;
 
+    // Return as early as possible if there were no results
+    if (!result || !result.length || result.length === 0) {
+      // Throw a more specific error if there were no results due to a timeout
+      if (result && result.status === 503 && result.message === 'Response Timeout') {
+        throw new TimeoutError();
+      }
+
+      return notes;
+    }
+
     this.history.push({
       time: new Date(),
       data: this.data,
@@ -551,11 +574,6 @@ export default class Query {
     // Set the information that the query changed to false, because the request was just done moments ago
     document.body.dataset.queryChanged = false;
 
-    // Return as early as possible if there was no result
-    if (!result || !result.length || result.length === 0) {
-      return notes;
-    }
-
     result.forEach(feature => {
       try {
         const note = new Note(feature);

app/js/toast.js

@@ -1,6 +1,10 @@
 import { wait } from './util.js';
 
 export default class Toast {
+  static DURATION_SHORT = 2000;
+  static DURATION_DEFAULT = 4000;
+  static DURATION_LONG = 8000;
+
   /**
     * Initialize a small toast notification with the given message
     *
@@ -34,7 +38,7 @@ export default class Toast {
     */
   async show(duration) {
     this.container.appendChild(this.toast);
-    await wait(duration || 4000);
+    await wait(duration || Toast.DURATION_DEFAULT);
     if (this.container.contains(this.toast)) {
       this.container.removeChild(this.toast);
     }

app/locales/en.json

@@ -173,6 +173,7 @@
     },
     "error": {
         "login": "Login failed, please try again later",
-        "comment": "Commenting failed, please try again later"
+        "comment": "Commenting failed, please try again later",
+        "queryTimeout": "Timeout, query is too complex"
     }
 }