Grote push

index.js

@@ -8,6 +8,10 @@ const einde = document.getElementById('einde');
 const toevoegKnop = document.getElementById('toevoegKnop');
 const visualisatie = document.getElementById('visualisatie');
 
+let timer;
+let rotatie;
+const logo = document.getElementById('logo');
+
 let huidigeTaal;
 let huidigeDoel;
 
@@ -23,7 +27,7 @@ function zoek() {
 
     // Schakel de knop 'toevoegen' uit zolang het zoekproces bezig is, zodat er geen meerdere
     // paden tegelijk toegevoegd kunnen worden.
-    toevoegKnop.disabled = true;
+    toggleZoeken(false);
 
     refreshTree();
 
@@ -37,7 +41,7 @@ function zoek() {
         .then(antwoord => antwoord.json())
         .then(data => voegToe(data))
         .catch(reason => alert('‼ ' + reason))
-        .finally(() => toevoegKnop.disabled = false); // Herstel de knop. Ook als er ondertussen iets mis ging.
+        .finally(() => toggleZoeken()); // Herstel de knop. Ook als er ondertussen iets mis ging.
 
 }
 
@@ -113,3 +117,20 @@ function inputWaarschuwing() {
 function getOrDefault(element) {
     return element.value === '' ? element.getAttribute('placeholder') : element.value;
 }
+
+function toggleZoeken(stop = true) {
+    toevoegKnop.disabled = !stop;
+
+    rotatie = 0;
+    if (stop) {
+        clearInterval(timer);
+        logo.style.transform = 'rotate(0)';
+    } else {
+        timer = setInterval(draai, 24);
+    }
+}
+
+function draai() {
+    rotatie += 5;
+    logo.style.transform = `rotate(${rotatie % 360}deg`;
+}