Update public/script.js

public/script.js

@@ -70,6 +70,16 @@ function loadMusicList() {
         params.append('search', searchQuery); // Add search query to the request if it exists
     }
 
+    // Disabling buttons and showing loading indicator before the request
+    document.getElementById('prev-page').disabled = true;
+    document.getElementById('next-page').disabled = true;
+    
+    const loaderContainer = document.getElementById('loader-container');
+    loaderContainer.innerHTML = ''; // Clears any existing loader elements if they are present
+    const loaderElement = document.createElement('div');
+    loaderElement.classList.add('loader');
+    loaderContainer.appendChild(loaderElement);
+     
     fetch(`/tracks?${params}`)
     .then(response => response.json())
     .then(data => {
@@ -79,6 +89,10 @@ function loadMusicList() {
         trackList = [];
         const totalPages = Math.ceil(total / 5);
         
+         // Hide loading indicator
+        loaderContainer.innerHTML = '';
+
+        // Re-enable buttons based on page state
         document.getElementById('prev-page').disabled = currentPage === 1;
         document.getElementById('next-page').disabled = currentPage === totalPages || searchQuery;