Add spinner

public/js/app.js

@@ -1,5 +1,5 @@
-  // Initialize tsParticles
-  tsParticles.load("particles-js", {
+// Initialize tsParticles
+tsParticles.load("particles-js", {
     particles: {
         number: { value: 50, density: { enable: true, value_area: 800 } },
         color: { value: ["#60a5fa", "#a855f7", "#ec4899"] },
@@ -31,14 +31,19 @@ document.getElementById('serverForm').addEventListener('submit', async (e) => {
     const edition = document.getElementById('edition').value;
     const connection = document.getElementById('connection').value;
     const [host, port] = connection.split(':');
+    const loadingSpinner = document.getElementById('loadingSpinner');
+    const statusResult = document.getElementById('statusResult');
+    const statusContent = document.getElementById('statusContent');
+    const submitButton = e.target.querySelector('button[type="submit"]');
 
     if (!host || !port) {
         alert('Please enter a valid connection string (host:port)');
         return;
     }
 
-    const statusResult = document.getElementById('statusResult');
-    const statusContent = document.getElementById('statusContent');
+    // Show loading spinner and disable button
+    loadingSpinner.style.display = 'block';
+    submitButton.disabled = true;
     statusResult.classList.add('hidden');
     statusContent.innerHTML = '<p class="animate-pulse">Checking...</p>';
 
@@ -90,6 +95,10 @@ document.getElementById('serverForm').addEventListener('submit', async (e) => {
             <p><strong class="text-blue-400">Status:</strong> <span class="text-red-400">Error</span></p>
             <p><strong class="text-blue-400">Error:</strong> An error occurred while checking the server status</p>
         `;
+    } finally {
+        // Hide loading spinner and re-enable button
+        loadingSpinner.style.display = 'none';
+        submitButton.disabled = false;
     }
 });