From e5fbb8ffa521f7b1283dc3671de9c82bf496f25b Mon Sep 17 00:00:00 2001
From: Timon Engelke <timon.engelke@online.de>
Date: Tue, 30 Mar 2021 12:06:15 +0200
Subject: [PATCH] make loadImageList async

---
 .../static/annotations/js/annotations.js      | 37 ++++++++++---------
 1 file changed, 19 insertions(+), 18 deletions(-)

diff --git a/imagetagger/imagetagger/annotations/static/annotations/js/annotations.js b/imagetagger/imagetagger/annotations/static/annotations/js/annotations.js
index 11d2476d..f877b70d 100644
--- a/imagetagger/imagetagger/annotations/static/annotations/js/annotations.js
+++ b/imagetagger/imagetagger/annotations/static/annotations/js/annotations.js
@@ -888,7 +888,7 @@ function calculateImageScale() {
   /**
    * Load the image list from tye server applying a new filter.
    */
-  function loadImageList() {
+  async function loadImageList() {
     let filterElem = $('#filter_annotation_type');
     let filter = filterElem.val();
     let params = {
@@ -902,24 +902,25 @@ function calculateImageScale() {
       handleAnnotationTypeChange();
     }
 
-    $.ajax(API_IMAGES_BASE_URL + 'imageset/load/?' + $.param(params), {
-      type: 'GET',
-      headers: gHeaders,
-      dataType: 'json',
-      success: function(data, textStatus, jqXHR) {
-        if (data.image_set.images.length === 0) {
-          // redirect to image set view.
-          displayFeedback($('#feedback_image_set_empty'));
-          filterElem.val('').change();
-          return;
-        }
+    $('.annotate_button').prop('disabled', true);
+    try {
+      let response = await fetch(API_IMAGES_BASE_URL + 'imageset/load/?' + $.param(params), {
+        method: 'GET',
+        headers: gHeaders,
+      });
+      let data = await response.json();
+      if (data.image_set.images.length === 0) {
+        // set is empty, reset filter
+        displayFeedback($('#feedback_image_set_empty'));
+        filterElem.val('').change();
+      } else {
         displayImageList(data.image_set.images);
-      },
-      error: function() {
-        $('.annotate_button').prop('disabled', false);
-        displayFeedback($('#feedback_connection_error'));
       }
-    });
+    } catch {
+      displayFeedback($('#feedback_connection_error'));
+    } finally {
+      $('.annotate_button').prop('disabled', false);
+    }
   }
 
   /**
@@ -1172,7 +1173,7 @@ function calculateImageScale() {
       if (tool instanceof BoundingBoxes) {
         tool.cancelSelection();
       }
-      loadImageList();
+      await loadImageList();
       await loadAdjacentImage(-1);
     });
     $('#back_button').click(async function(event) {