update

console/A2D1-KB21/index.html

@@ -22,8 +22,10 @@
           Bronze Discipline<br /><small>A2D1-KB21</small>
         </div>
         <div class="console-right">
-          <button>Restart</button><button>Power Off</button
-          ><button class="alert">Reinstall</button>
+          <button id="loadButton">
+            <span id="restart">Restart</span>
+            <div class="loader" id="loader"></div></button
+          ><button>Power Off</button><button class="alert">Reinstall</button>
         </div>
         <div class="console-uname">
           Debian GNU/Linux 12 (bookworm)<br />
@@ -97,3 +99,24 @@
     </footer>
   </body>
 </html>
+<script>
+  const loadButton = document.getElementById("loadButton");
+  const loader = document.getElementById("loader");
+  const text = document.getElementById("restart");
+
+  loadButton.addEventListener("click", () => {
+    // Disable the button
+    // and prevent further clicks
+    loadButton.disabled = true;
+    loader.style.display = "inline-block";
+    text.style.display = "none";
+
+    setTimeout(() => {
+      // Restore the button state
+      //after the operation is done
+      loadButton.disabled = false;
+      loader.style.display = "none";
+      text.style.display = "inline-block";
+    }, 2000);
+  });
+</script>

console/index.html

@@ -53,4 +53,4 @@
       <a href="https://myco.systems/">MycoSystems LLC</a>
     </footer>
   </body>
-</html>
+</html>

styles.css

@@ -252,6 +252,9 @@ section {
   font-size: 0.9rem !important;
   font-weight: 600;
   text-wrap: nowrap;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
 }
 
 .console-right button:hover {
@@ -362,3 +365,29 @@ tr a::after {
   margin-left: 0.5rem;
   vertical-align: middle;
 }
+
+.loader {
+  display: none;
+  border: 4px solid transparent;
+  border-top: 4px solid #241917;
+  border-radius: 50%;
+  width: 1.2rem;
+  height: 1.2rem;
+  animation: spin 1s linear infinite;
+  margin-left: 1.3rem;
+  margin-right: 1.3rem;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.loading {
+  background-color: #ccc;
+  pointer-events: none;
+}