From 91ec6369de15047abbba7421e4db3956db38cfbb Mon Sep 17 00:00:00 2001
From: Carlin MacKenzie <carlin.mackenzie@gmail.com>
Date: Mon, 25 Sep 2023 12:50:30 +0100
Subject: [PATCH] Add loading animation

---
 scholia/app/templates/q_curation.html | 21 +++++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/scholia/app/templates/q_curation.html b/scholia/app/templates/q_curation.html
index 70b70a93c..eafb09f75 100644
--- a/scholia/app/templates/q_curation.html
+++ b/scholia/app/templates/q_curation.html
@@ -26,6 +26,11 @@ <h1 id="h1">Improve...</h1>
   function get_dois_from_crossref(query_string) {
       const button = document.getElementById("check-crossref-button");
       button.innerHTML = "Loading...";
+      button.classList.remove("d-block");
+      button.classList.add("d-none");
+      button.insertAdjacentHTML('beforebegin',
+        "<div id='check-crossref-loader' class='loader'><div></div><div></div><div></div></div>"
+      )
       const params = {
         'query': query_string,
         'select': 'DOI',
@@ -46,36 +51,40 @@ <h1 id="h1">Improve...</h1>
       const url = `https://api.crossref.org/works/?${searchParams.toString()}`;
       const error_message = "The API failed which could be due to a problem with your connection or with the upstream server. If the issue persists <a href='https://github.com/WDscholia/scholia/issues/new?assignees=&labels=bug&projects=&template=bug_report.md&title=''>submit a bug report on GitHub</a>"
 
-      console.log(url)
       fetch(url)
         .then(response => response.json())
         .then(data => {
-          console.log(data)
           if (data['status'] == 'ok') {
-            console.count()
             if (data["message"]["total-results"] > 0){
-              console.count()
               items = data.message?.items
               if (items) {
-                console.count()
                 dois = items.map(x => x.DOI).join(" ");
                 window.location.href = "/id-to-quickstatements?query=" + dois;
               }
-            } else {              
+            } else {
+              $('#check-crossref-loader').remove();
               button.insertAdjacentHTML('afterend', `<div class="alert alert-secondary" role="alert">No results returned for ${data.message.query['status-terms']}</div>`);
               button.innerHTML = "Check Crossref";
+              button.classList.remove("d-none");
+              button.classList.add("d-block");
             }
           } else {
             console.error(`API status was ${data.status}`)
             console.error(data)
+            $('#check-crossref-loader').remove();
             button.insertAdjacentHTML('afterend', `<div class="alert alert-warning" role="alert">${error_message}</div>`);
             button.innerHTML = "Check Crossref";
+            button.classList.remove("d-none");
+            button.classList.add("d-block");
           }
         })
         .catch(error => {
           console.error(error);
+          $('#check-crossref-loader').remove();
           button.insertAdjacentHTML('afterend', `<div class="alert alert-warning" role="alert">${error_message}</div>`);
           button.innerHTML = "Check Crossref";
+          button.classList.remove("d-none");
+          button.classList.add("d-block");
         });
   }
 </script>