addition of loading spinner

Author: istefanis

index.html

@@ -129,7 +129,7 @@ <h2>Optimize</h2>
           id="optimize-topology-button-container"
         >
           <button class="navbar-button" id="optimize-topology-button">
-            <i class="bi-bounding-box-circles"></i>
+            <i class="bi-bounding-box-circles" id="optimize-topology-icon"></i>
             <p>Topology</p>
           </button>
         </div>

view/navbarView.js

@@ -37,6 +37,7 @@ import {
 import { isLocalStorageEnabled } from "../util/ioService.js";
 import { getSimplifiedBlockValue } from "../model/elements/block.js";
 import { displayTf } from "../util/prettyPrintingService.js";
+import { sleep } from "../util/commons.js";
 
 const navbar = document.getElementById("navbar");
 
@@ -193,10 +194,16 @@ nextButton.addEventListener("click", function () {
 const optimizeTopologyButton = document.getElementById(
   "optimize-topology-button"
 );
+const optimizeTopologyIcon = document.getElementById("optimize-topology-icon");
 
 optimizeTopologyButton.addEventListener("click", async function (e) {
   e.stopPropagation();
+  optimizeTopologyIcon.classList.remove("bi-bounding-box-circles");
+  optimizeTopologyIcon.classList.add("loading-spinner");
+  await sleep(0); //needed for rendering the updated CSS before the computation below
   await optimizeTopology();
+  optimizeTopologyIcon.classList.remove("loading-spinner");
+  optimizeTopologyIcon.classList.add("bi-bounding-box-circles");
 });
 
 //

view/style/main.css

@@ -156,3 +156,23 @@ body,
   justify-content: center;
   align-items: center;
 }
+
+/* Loading spinner */
+
+.loading-spinner {
+  width: 14px;
+  height: 14px;
+  border: 1px solid var(--color-grey-200);
+  border-top-color: #000;
+  border-radius: 50%;
+  animation: rotate-loading-spinner 1s linear infinite;
+}
+
+@keyframes rotate-loading-spinner {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}