From 759d7c0916398653d35db3e00919d27fb9a73c72 Mon Sep 17 00:00:00 2001
From: kaimikacolin <colin00nelson@gmail.com>
Date: Mon, 13 Sep 2021 15:30:28 -0600
Subject: [PATCH 1/2] make loaders position associate with page/image load

---
 assets/src/js/app.js                | 7 +++++--
 assets/src/scss/global/_custom.scss | 4 ----
 templates/web/index.html            | 3 ---
 3 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/assets/src/js/app.js b/assets/src/js/app.js
index b3619d1..96dee72 100644
--- a/assets/src/js/app.js
+++ b/assets/src/js/app.js
@@ -632,11 +632,12 @@ function loadROIs(filters={}){
 let scrollPageNum = 1;
 let morePages = true;
 let imagesOutstanding = 0;
+let $loader = $(`<div id="roi-container-loader"> <i class='fa fa-spinner fa-spin fa-2x'></i></div>`);
 function showLoader(show){
     if(show){
-        $("#roi-container-loader").addClass("visible");
+        $("#roi-container").append($loader);
     }else{
-        $("#roi-container-loader").removeClass("visible");
+        $loader.remove();
     }
 }
 function imageLoaded(evt) {
@@ -677,12 +678,14 @@ function checkWindowFull(){//keep loading pages of ROIs until the screen is fill
 }
 function handleRoiAjax(r) {
     if(r.roi_count!=0){
+        showLoader(false);
         for (let i=0;i< r.rois.length; i++) {
             imagesOutstanding++;
             let $img = $('<img class="image-tile infinite-item" draggable="false" data-roi-id="' + r.rois[i].id + '" src="' + r.rois[i].path + '" style="visibility: hidden" />');
             $img.on("load", imageLoaded);
             $container_inner.append($img);
         }
+        showLoader(true);
         $container_inner.append('<div class="page_divider"><div>' + r.page_num + '</div></div>' );
     }else{
         showLoader(false);
diff --git a/assets/src/scss/global/_custom.scss b/assets/src/scss/global/_custom.scss
index 1ddffe4..4f0f761 100644
--- a/assets/src/scss/global/_custom.scss
+++ b/assets/src/scss/global/_custom.scss
@@ -23,10 +23,6 @@
 #roi-container-loader{
     text-align: center;
     margin-bottom:5px;
-    visibility: hidden;
-    &.visible{
-        visibility: visible;
-    }
     i{
         color:$primary-color;
     }
diff --git a/templates/web/index.html b/templates/web/index.html
index 92f4872..ff09f95 100644
--- a/templates/web/index.html
+++ b/templates/web/index.html
@@ -50,9 +50,6 @@ <h5>{{ roi_count }} ROI(s) found</h5>
                     <div id="roi-container">
                         <h2 style="text-align:center;margin-top:10%; position:relative;">Please choose an image collection and category to view and annotate images</h2>
                     </div>
-                    <div id="roi-container-loader">
-                        <i class='fa fa-spinner fa-spin fa-2x'></i>
-                    </div>
                 </div>
             </div>
         </div>

From a867ba70776bb8b7f6a0aa5fb29683a9b58fd851 Mon Sep 17 00:00:00 2001
From: kaimikacolin <colin00nelson@gmail.com>
Date: Mon, 13 Sep 2021 16:12:24 -0600
Subject: [PATCH 2/2] merge functions and simply

---
 assets/src/js/app.js | 25 +++++++++----------------
 1 file changed, 9 insertions(+), 16 deletions(-)

diff --git a/assets/src/js/app.js b/assets/src/js/app.js
index 96dee72..effa0db 100644
--- a/assets/src/js/app.js
+++ b/assets/src/js/app.js
@@ -148,36 +148,29 @@ function changeSkipInput(ev){
 
 function filterChange(ev){
     ev.preventDefault();
-    $container_inner.empty();
-    $("#skip-to-page").val("");
-
-    requestArray.forEach(function (req) {
-        req.abort();
-    });
-    requestArray = [];
     scrollPageNum = 1;
-    imagesOutstanding = 0;
     let filters = getFilters();
     updateQuery(filters);
-    loadPage(scrollPageNum)
+    resetPageAndLoad();
 };
 
 $("#skip-form").on('submit', function(ev){//very similar to filter change, consider merging
     ev.preventDefault();
     let targetPage = $("#skip-to-page").val();
+    scrollPageNum = targetPage;
+    resetPageAndLoad();
+});
+
+function resetPageAndLoad(){
     $container_inner.empty();
 
     requestArray.forEach(function (req) {
         req.abort();
     });
     requestArray = [];
-    scrollPageNum = targetPage;
-    let filters = getFilters();
-    updateQuery(filters);
-    loadPage(scrollPageNum)
-
-
-});
+    imagesOutstanding = 0;
+    loadPage(scrollPageNum);
+}
 
 function filterByLabel(label_name){
     $("#filter-label").val(label_name);