Add loading spinner.

AhmedBasem20 · AhmedBasem20 · commit ac6e6c65c70f · 2024-07-03T17:53:35.000+03:00
diff --git a/website/index.css b/website/index.css
@@ -103,3 +103,30 @@ main {
     color: #333;
 }
 
+.spinner {
+  border: 8px solid rgba(0, 0, 0, 0.1);
+  width: 76px;
+  height: 76px;
+  border-radius: 50%;
+  border-top-color: #3498db;
+  animation: spin 1s ease-in-out infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.loading-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.hidden {
+  display: none;
+}
diff --git a/website/index.html b/website/index.html
@@ -13,6 +13,9 @@
 </head>
 <body>
   <div id="root">
+    <div class="loading-overlay hidden" id="loadingOverlay">
+      <div class="spinner"></div>
+    </div>
     <header>
       <h1 class="bar-title">IVIM MRI Algorithm Fitting Dashboard</h1>
       <hr class="divider" />
diff --git a/website/index.js b/website/index.js
@@ -8,6 +8,19 @@ document.addEventListener('DOMContentLoaded', function() {
     let selectedSNRRegion = '10';
     let selectedTypeRegion = 'D_fitted';
     let selectedRangeRegion = 2;
+
+    const loadingOverlay = document.getElementById('loadingOverlay');
+    const mainContent = document.getElementsByTagName('main')[0];
+    function showLoading() {
+        mainContent.classList.add('hidden');
+        loadingOverlay.classList.remove('hidden');
+    }
+
+    function hideLoading() {
+        loadingOverlay.classList.add('hidden');
+        mainContent.classList.remove('hidden')
+    }
+
     // Add event listener to algorithm select
     const algorithmSelect = document.getElementById('algorithm-select');
     algorithmSelect.addEventListener('change', function(event) {
@@ -114,12 +127,14 @@ document.addEventListener('DOMContentLoaded', function() {
             updateRangeRegion(newValue);
         }
     });
+    showLoading();
 
     Papa.parse('test_output.csv', {
         download: true,
         header: true,
         complete: results => {
             data = results;
+            hideLoading();
             populateOptions(data);
             drawBoxPlot(data, selectedAlgorithm, selectedSNR, selectedType, selectedRange);
             drawRegionBoxPlot(data, selectedRegion, selectedSNRRegion, selectedTypeRegion, selectedRangeRegion);
