feat: add spinner (#38)

buarki · Feb 19, 2024 · c3abebd · c3abebd
1 parent d46ddfc
commit c3abebd
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 2 deletions.
diff --git 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,16 +114,22 @@ 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');
  const { feedbackMessage, textColor } = getCompressionFeedback(originalSize, compressedContentSize);
  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
@@ -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>