feat: add a spinner to module action buttons

src/Classes/ViewModels/ButtonViewModel.php

@@ -79,7 +79,9 @@ public function render(): string
 
             $html = sprintf(
                 '<div class="btn-group">
-                    <a class="btn %s" href="%s" %s role="button" aria-expanded="false">%s</a>
+                    <a class="btn %s" href="%s" %s role="button" aria-expanded="false">
+                        %s
+                    </a>
                     <button type="button" class="btn %s dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"
                         aria-expanded="false" data-reference="parent">
                         <span class="sr-only">Toggle Dropdown</span>
@@ -95,7 +97,9 @@ public function render(): string
             );
         } else {
             $html = sprintf(
-                '<a class="btn %s" href="%s" %s role="button">%s</a>',
+                '<div class="btn-group">
+                    <a class="btn %s" href="%s" %s role="button">%s</a>
+                </div>',
                 htmlspecialchars($class),
                 htmlspecialchars($url),
                 $js,

src/Templates/Footer.tmpl.php

@@ -8,6 +8,7 @@
 
 <script src="src/Templates/Scripts/bootstrap.bundle.min.js"></script>
 <script src="src/Templates/Scripts/lightbox.js"></script>
+<script src="src/Templates/Scripts/ModuleActionButtons.js"></script>
 
 <script>
     function filterModule(searchString)

src/Templates/ModuleInfoButtons.tmpl.php

@@ -69,7 +69,7 @@
 ";
 ?>
 
-<div class="moduleinfo-buttons">
+<div class="moduleinfo-buttons module-action-button">
     <?php
     if ($moduleView->isUpdatable() && !$moduleView->isRepairable()) {
         echo $buttonUpdate;

src/Templates/Scripts/ModuleActionButtons.js

@@ -0,0 +1,48 @@
+const moduleActionButtons = document.querySelectorAll('.module-action-button .btn-group');
+
+moduleActionButtons.forEach(function(moduleActionButton) {
+    const actions = moduleActionButton.querySelectorAll('a');
+    actions.forEach(function(action) {
+        action.addEventListener('click', function(event) {
+            event.preventDefault();
+            //disableModuleActionButton(buttonGroup);
+            disableAllModuleActionButtons();
+            showSpinner(moduleActionButton, action);
+            setTimeout(function() {
+                window.location.href = action.getAttribute('href');
+            }, 500);
+        });
+    });
+});
+
+function disableAllModuleActionButtons()
+{
+    moduleActionButtons.forEach(function(moduleActionButton) {
+        disableModuleActionButton(moduleActionButton);
+    });
+}
+
+function disableModuleActionButton(moduleActionButton) {
+    const mainButton = moduleActionButton.querySelector('.btn');
+
+    if (mainButton) {
+        mainButton.classList.add('disabled');
+    }
+
+    const dropdownButton = moduleActionButton.querySelector('.dropdown-toggle');
+    if (dropdownButton) {
+        dropdownButton.classList.add('disabled');
+    }
+}
+
+function showSpinner(moduleActionButton, action)
+{
+    const mainButton = moduleActionButton.querySelector('.btn');
+
+    if (mainButton) {
+        const html =
+            '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> '
+            + mainButton.innerHTML;
+        mainButton.innerHTML = html;
+    }
+}