Parhelia internet

static/js/main.js

@@ -108,15 +108,19 @@ function getTimeRemaining(expirationDate) {
 // Progreso de subida
 let uploadStartTime = 0;
 let uploadedBytes = 0;
-function updateProgress(loaded, total, isDone = false) {
+function updateProgress(loaded, total, isDone = false, processing = false) {
     const percent = isDone ? 100 : Math.round((loaded / total) * 100);
     const progressBar = document.getElementById('progressBar');
     const progressPercent = document.getElementById('progressPercent');
     const uploadSpeed = document.getElementById('uploadSpeed');
     const timeRemaining = document.getElementById('timeRemaining');
     progressBar.style.width = percent + '%';
-    progressPercent.textContent = percent + '%';
-    if (isDone) {
+    if (processing) {
+        progressPercent.innerHTML = '<span class="flex items-center gap-1"><svg class="animate-spin h-4 w-4 inline mr-1" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8z"></path></svg>Processing...</span>';
+    } else {
+        progressPercent.textContent = percent + '%';
+    }
+    if (isDone || processing) {
         uploadSpeed.textContent = '';
         timeRemaining.textContent = '';
         return;
@@ -318,10 +322,34 @@ function setupEventListeners() {
                     updateProgress(e.loaded, e.total);
                 }
             });
+            xhr.upload.addEventListener('load', function() {
+                // Barra llegó a 100%, pero aún esperando respuesta
+                updateProgress(file.size, file.size, false, true);
+                let waiting = document.getElementById('waitingServer');
+                if (!waiting) {
+                    waiting = document.createElement('div');
+                    waiting.id = 'waitingServer';
+                    waiting.className = 'text-xs text-blue-600 dark:text-blue-400 mt-2 flex items-center gap-2';
+                    waiting.innerHTML = '<svg class="animate-spin h-4 w-4 mr-1 inline" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8z"></path></svg>Waiting for server confirmation...';
+                    uploadProgress.appendChild(waiting);
+                }
+                // Si pasan 60s tras barra 100%, mostrar advertencia
+                waitingTimeout = setTimeout(() => {
+                    waiting.textContent = 'The upload is taking longer than expected. Please check your connection.';
+                }, 60000);
+                // Si pasan 2 minutos, mostrar error y permitir reintentar
+                errorTimeout = setTimeout(() => {
+                    waiting.remove();
+                    showToast('Upload failed: server did not respond. Please try again.', 'error');
+                    uploadBtn.disabled = false;
+                    uploadBtnText.textContent = 'Upload File';
+                    uploadProgress.classList.add('hidden');
+                }, 120000);
+            });
             xhr.addEventListener('load', function() {
                 clearTimeout(waitingTimeout);
                 clearTimeout(errorTimeout);
-                updateProgress(file.size, file.size, true);
+                updateProgress(file.size, file.size, true, false);
                 document.getElementById('uploadSpeed').textContent = '';
                 document.getElementById('timeRemaining').textContent = '';
                 document.getElementById('waitingServer')?.remove();
@@ -344,30 +372,6 @@ function setupEventListeners() {
                 document.getElementById('waitingServer')?.remove();
                 showToast('Network error while uploading', 'error');
             });
-            xhr.upload.addEventListener('load', function() {
-                // Barra llegó a 100%, pero aún esperando respuesta
-                updateProgress(file.size, file.size, true);
-                let waiting = document.getElementById('waitingServer');
-                if (!waiting) {
-                    waiting = document.createElement('div');
-                    waiting.id = 'waitingServer';
-                    waiting.className = 'text-xs text-blue-600 dark:text-blue-400 mt-2 flex items-center gap-2';
-                    waiting.innerHTML = '<svg class="animate-spin h-4 w-4 mr-1 inline" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8z"></path></svg>Waiting for server confirmation...';
-                    uploadProgress.appendChild(waiting);
-                }
-                // Si pasan 60s tras barra 100%, mostrar advertencia
-                waitingTimeout = setTimeout(() => {
-                    waiting.textContent = 'The upload is taking longer than expected. Please check your connection.';
-                }, 60000);
-                // Si pasan 2 minutos, mostrar error y permitir reintentar
-                errorTimeout = setTimeout(() => {
-                    waiting.remove();
-                    showToast('Upload failed: server did not respond. Please try again.', 'error');
-                    uploadBtn.disabled = false;
-                    uploadBtnText.textContent = 'Upload File';
-                    uploadProgress.classList.add('hidden');
-                }, 120000);
-            });
             xhr.open('POST', '/upload');
             xhr.send(formData);
         } catch (error) {