Add loading indicator during installation

Author: sebromero

css/style.css

@@ -76,34 +76,50 @@
     margin-bottom: 20px;
 }
 
+.hidden {
+    display: none;
+}
+
 /* Status Bar */
 .status-bar {
+    display: flex;
+    justify-content: center;
+    gap: var(--main-flexbox-gap);
     font-family: 'Roboto Mono', monospace;
     background-color: rgba(0, 0, 0, 0.75);
     color: white;
-    padding: 0 10px; /* Set initial padding to 0 for smooth slide */
+    padding: 0px 20px; /* Set initial padding to 0 for smooth slide */
     margin-top: 10px;
-    text-align: center;
-    height: 0;
+    max-height: 0;
     opacity: 0;
     transition: max-height 0.5s ease, padding 0.5s ease, opacity 0.3s ease;
 }
 
 .status-bar.visible {
-    height: auto;
-    padding: 10px;
+    display: flex;
+    max-height: 480px;
+    padding: 10px 20px;
     opacity: 1;
 }
 
 /* Loading Spinner */
 .loading-spinner {
-    border: 6px solid #f3f3f3;
-    border-top: 6px solid var(--main-control-color);
+    border: 6px solid #eee;
+    border-top-color: var(--secondary-text-color);
     border-radius: 50%;
     width: 40px;
     height: 40px;
     animation: spin 1s linear infinite;
-    margin: 40px auto; /* Centers the spinner */
+}
+
+.loading-spinner.primary {
+    border-top-color: var(--main-control-color);
+}
+
+.loading-spinner.small {
+    width:24px;
+    height: 24px;
+    border-width: 4px;
 }
 
 @keyframes spin {

index.html

@@ -53,20 +53,21 @@ <h1>📦 MicroPython Package Installer</h1>
                 </div>
                 <div>
                     <input type="checkbox" id="compile-files" checked />
-                    <label for="compile-files">Compile files before uploading</label>
+                    <label for="compile-files">Convert files to .mpy to optimize speed and size</label>
                 </div>
                 <div>
                     <input type="checkbox" id="overwrite-existing" checked />
-                    <label for="overwrite-existing">Overwrite existing packages</label>
+                    <label for="overwrite-existing">Allow overwriting existing packages</label>
                 </div>
             </div>
 
         </div>
     </div>
 
     <!-- Status Bar -->
-    <div id="status-bar" class="status-bar" style="display: none;">
+    <div id="status-bar" class="status-bar hidden">
         <span id="status-message"></span>
+        <div class="loading-spinner small hidden"></div>
     </div>
 
     <!-- Divider -->

renderer.js

@@ -8,20 +8,22 @@ let customURLplaceholders = ['github:janedoe/button-mpy',
     'https://example.com/recorder.py'
 ];
 
+const statusBar = document.getElementById('status-bar');
+const statusMessage = document.getElementById('status-message');
 const deviceSelectionList = document.querySelector(".item-selection-list");
 const reloadDeviceListLink = document.getElementById("reload-link");
 const searchField = document.getElementById('search-field');
 const compileFilesCheckbox = document.getElementById('compile-files');
 const overwriteExistingCheckbox = document.getElementById('overwrite-existing');
 const githubUrlInput = document.getElementById('github-url');
+const statusBarLoadingSpinner = document.querySelector('#status-bar .loading-spinner');
 
 async function fetchPackages(){
     const packageList = document.getElementById('package-list');
 
     // Show loading spinner
-    packageList.innerHTML = '<div class="loading-spinner"></div>';
+    packageList.innerHTML = '<div class="loading-spinner primary" style="margin: 50px auto;"></div>';
     const result = await window.api.getPackages();
-    
     if(result.success){
         cachedPackages = result.data;
         renderPackageList(cachedPackages, ''); // Render the fetched packages
@@ -255,7 +257,7 @@ async function installPackage(package) {
     const packageDesignator = package.name || package.url;
     toggleUserInteraction(false);
     showOverlay();
-    showStatus(`⌛️ Installing ${packageDesignator} on board at ${serialPort}...`);
+    showStatus(`⌛️ Installing ${packageDesignator} on board at ${serialPort}...`, true);
 
     const compileFiles = compileFilesCheckbox.checked;
     const overwriteExisting = overwriteExistingCheckbox.checked;
@@ -342,12 +344,10 @@ function animatePlaceholder(element, values, duration = 3500) {
     return interval;
 }
 
-function showStatus(message, duration = null) {
-    const statusBar = document.getElementById('status-bar');
-    const statusMessage = document.getElementById('status-message');
-
+function showStatus(message, displayLoader = false, duration = null) {
     statusMessage.textContent = message;
-    statusBar.style.display = 'block';
+    statusBar.classList.remove('hidden');
+    statusBarLoadingSpinner.classList.toggle('hidden', !displayLoader);
 
     // Add the visible class to trigger the slide down effect
     setTimeout(() => {