From c3abebdf15ac3057b3096bcce95203215611e822 Mon Sep 17 00:00:00 2001
From: buarki <oreasekadd@gmail.com>
Date: Mon, 19 Feb 2024 01:20:09 -0300
Subject: [PATCH] feat: add spinner (#38)

---
 public/app.js     | 15 +++++++++++++++
 public/index.html |  4 ++--
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/public/app.js b/public/app.js
index 16180ce..190c2bd 100644
--- a/public/app.js
+++ b/public/app.js
@@ -7,6 +7,9 @@ const ZIPPER_COMPRESSED_FILE_EXTENSION = '.zipp';
 const COMPRESSED_FILE_NAME = `compressed_file${ZIPPER_COMPRESSED_FILE_EXTENSION}`;
 const DECOMPRESSED_FILE_NAME = `your_decompressed_file`;
 
+const LOADING = (color = 'border-blue-500') =>
+        `<div class="animate-spin h-5 w-5 border-t-4 ${color} border-solid rounded-full"></div>`;
+
 function validateFileSize(inputId) {
   const input = document.getElementById(inputId);
   if (input.files && input.files[0]) {
@@ -111,9 +114,12 @@ function downloadFile(data, filename, type) {
 async function uploadFileToCompress() {
   const feedbackCard = document.getElementById('notificationCard');
   const fileInput = document.getElementById('fileInput');
+  const compressButton = document.getElementById('compressButton');
   const file = fileInput.files[0];
 
   if (file) {
+    compressButton.disabled = true;
+    compressButton.innerHTML = LOADING('bg-blue-500');
     try {
       const { compressedContent, compressedContentSize, originalSize } = await compress(file);
       downloadFile(compressedContent, COMPRESSED_FILE_NAME, 'application/octet-stream');
@@ -121,6 +127,9 @@ async function uploadFileToCompress() {
       showNotificationCard(feedbackMessage, textColor, feedbackCard);
     } catch (error) {
       console.error('Error getting file content:', error);
+    } finally {
+      compressButton.innerHTML = 'Compress';
+      compressButton.disabled = false;
     }
   } else {
     alert('Please select a file.');
@@ -129,13 +138,19 @@ async function uploadFileToCompress() {
 
 async function uploadFileToDecompress() {
   const compressedFileInput = document.getElementById('decompressFileInput');
+  const decompressButton = document.getElementById('decompressButton');
   const compressedFile = compressedFileInput.files[0];
   if (compressedFile) {
+    decompressButton.disabled = true;
+    decompressButton.innerHTML = LOADING('bg-green-500');
     try {
       const { decompressedContent } = await decompress(compressedFile);
       downloadFile(decompressedContent, DECOMPRESSED_FILE_NAME, 'application/octet-stream');
     } catch (error) {
       console.error('failed to decompress:', error);
+    } finally {
+      decompressButton.disabled = false;
+      decompressButton.innerHTML = `Decompress`;
     }
   } else {
     alert('Please select a file to decompress.');
diff --git a/public/index.html b/public/index.html
index 4b5a334..dd5a507 100644
--- a/public/index.html
+++ b/public/index.html
@@ -35,7 +35,7 @@ <h2 class="text-2xl mb-4">Compression</h2>
         <form id="uploadForm" enctype="multipart/form-data" class="mb-4">
           <label for="fileInput" class="form-label">Select file to compress (Max 150MB):</label>
           <input type="file" id="fileInput" accept=".txt, .pdf, .jpg, .png, .zip" class="mb-2" onchange="validateFileSize('fileInput')" />
-          <button type="button" onclick="uploadFileToCompress()" class="bg-blue-500 hover:bg-blue-300 text-white px-4 py-2 rounded">Compress</button>
+          <button id="compressButton" type="button" onclick="uploadFileToCompress()" class="bg-blue-500 hover:bg-blue-300 text-white px-4 py-2 rounded">Compress</button>
         </form>
       </div>
 
@@ -44,7 +44,7 @@ <h2 class="text-2xl mb-4">Decompression</h2>
         <form id="decompressForm" class="mb-4">
           <label for="fileInput" class="form-label">Select file to decompress:</label>
           <input type="file" id="decompressFileInput" accept=".zipp" class="mb-2" />
-          <button type="button" onclick="uploadFileToDecompress()" class="bg-green-500 hover:bg-green-300 text-white px-4 py-2 rounded">Decompress</button>
+          <button id="decompressButton" type="button" onclick="uploadFileToDecompress()" class="bg-green-500 hover:bg-green-300 text-white px-4 py-2 rounded">Decompress</button>
         </form>
       </div>
     </div>