UI Updated

index.html

@@ -30,8 +30,8 @@
             --status-error-bg: #f8d7da;
             --status-error-text: #842029;
             --status-error-border: #f5c2c7;
-            --loader-border: #f3f3f3;
-            --loader-spinner: #007bff; /* Use primary blue for spinner */
+            /* --loader-border: #f3f3f3; */ /* No longer needed */
+            /* --loader-spinner: #007bff; */ /* No longer needed */
             --input-border: #ced4da;
             --input-bg: #fff;
             --link-color: #007bff;
@@ -39,21 +39,21 @@
 
         @media (prefers-color-scheme: dark) {
             :root {
-                --bg-color: #1a1a1a; /* Darker background */
-                --text-color: #e8e8e8; /* Lighter text */
-                --header-bg: #2a622d; /* Darker header */
+                --bg-color: #1a1a1a;
+                --text-color: #e8e8e8;
+                --header-bg: #2a622d;
                 --header-text: #e8e8e8;
-                --sidebar-bg: #2c2c2c; /* Dark sidebar */
+                --sidebar-bg: #2c2c2c;
                 --sidebar-text: #adb5bd;
                 --sidebar-hover-bg: #444;
-                --sidebar-active-bg: #0056b3; /* Darker blue */
+                --sidebar-active-bg: #0056b3;
                 --sidebar-active-text: white;
-                --content-bg: #212121; /* Dark content area */
+                --content-bg: #212121;
                 --border-color: #444;
                 --border-color-light: #333;
                 --table-header-bg: #2c2c2c;
                 --table-row-even-bg: #252525;
-                --button-primary-bg: #218838; /* Keep green accessible */
+                --button-primary-bg: #218838;
                 --button-primary-hover-bg: #1e7e34;
                 --button-primary-text: white;
                 --status-success-bg: #143620;
@@ -62,285 +62,84 @@
                 --status-error-bg: #58151c;
                 --status-error-text: #f5c6cb;
                 --status-error-border: #842029;
-                --loader-border: #444;
-                --loader-spinner: #4dabf7; /* Lighter blue for dark */
+                /* --loader-border: #444; */ /* No longer needed */
+                /* --loader-spinner: #4dabf7; */ /* No longer needed */
                 --input-border: #555;
                 --input-bg: #333;
                 --link-color: #4dabf7;
             }
-            /* Ensure inputs inherit text color */
             input[type="text"], textarea {
                 color: var(--text-color);
                 background-color: var(--input-bg);
             }
-             /* Ensure table cells inherit text color */
              th, td {
                 color: var(--text-color);
              }
-             /* Placeholder text color for dark mode */
-            ::placeholder {
-                color: #888;
-                opacity: 1; /* Firefox */
-            }
-            :-ms-input-placeholder { /* Internet Explorer 10-11 */
-                color: #888;
-            }
-            ::-ms-input-placeholder { /* Microsoft Edge */
-                color: #888;
-            }
+            ::placeholder { color: #888; opacity: 1; }
+            :-ms-input-placeholder { color: #888; }
+            ::-ms-input-placeholder { color: #888; }
         }
 
         /* --- General Styles --- */
         body {
             font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-            margin: 0;
-            padding: 0;
-            display: flex;
-            flex-direction: column;
-            height: 100vh;
-            background-color: var(--bg-color);
-            color: var(--text-color);
-            transition: background-color 0.3s, color 0.3s; /* Smooth theme transition */
-        }
-        a {
-             color: var(--link-color);
+            margin: 0; padding: 0; display: flex; flex-direction: column; height: 100vh;
+            background-color: var(--bg-color); color: var(--text-color);
+            transition: background-color 0.3s, color 0.3s;
         }
+        a { color: var(--link-color); }
 
         /* --- Header --- */
         header {
-            background-color: var(--header-bg);
-            color: var(--header-text);
-            padding: 15px 20px;
-            display: flex;
-            align-items: center;
-            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-            font-size: 1.2em;
-            font-weight: bold;
-            transition: background-color 0.3s, color 0.3s;
-        }
-         header .loader {
-             border: 3px solid var(--loader-border);
-             border-top: 3px solid var(--header-text); /* Match header text */
-             border-radius: 50%;
-             width: 18px;
-             height: 18px;
-             animation: spin 1s linear infinite;
-             display: none;
-             margin-left: 15px;
-         }
-
-        /* --- Container --- */
-        .container {
-            display: flex;
-            flex: 1;
-            overflow: hidden;
-        }
-
-        /* --- Sidebar --- */
-        #sidebar {
-            width: 220px;
-            background-color: var(--sidebar-bg);
-            padding: 15px;
-            overflow-y: auto;
-            border-right: 1px solid var(--border-color);
-            transition: background-color 0.3s;
-        }
-        #sidebar h3 {
-            margin-top: 0;
-            margin-bottom: 15px;
-            color: var(--sidebar-text);
-            border-bottom: 1px solid var(--border-color);
-            padding-bottom: 10px;
-        }
-        #tableList {
-            list-style: none;
-            padding: 0;
-            margin: 0;
-        }
-        #tableList li {
-            padding: 8px 10px;
-            cursor: pointer;
-            border-radius: 4px;
-            margin-bottom: 5px;
-            transition: background-color 0.2s, color 0.2s;
-            font-size: 0.95em;
-            color: var(--sidebar-text); /* Use variable */
-        }
-        #tableList li:hover {
-            background-color: var(--sidebar-hover-bg);
-        }
-        #tableList li.active {
-             background-color: var(--sidebar-active-bg);
-             color: var(--sidebar-active-text);
-             font-weight: bold;
-        }
-
-        /* --- Main Content --- */
-        #mainContent {
-            flex: 1;
-            display: flex;
-            flex-direction: column;
-            padding: 20px;
-            overflow: hidden;
-        }
-        .content-area {
-            flex: 1;
-            display: flex;
-            flex-direction: column;
-            overflow: hidden;
-            gap: 15px;
-        }
-         #schemaDisplay, #dataDisplayContainer, #queryResultContainer {
-             background-color: var(--content-bg);
-             border: 1px solid var(--border-color);
-             border-radius: 5px;
-             padding: 15px;
-             margin-bottom: 0;
-             overflow: auto;
-             box-shadow: 0 1px 3px rgba(0,0,0,0.05);
-             transition: background-color 0.3s, border-color 0.3s;
-         }
-        #schemaDisplay h4, #dataDisplayContainer h4, #queryResultContainer h4 {
-             margin-top: 0;
-             color: var(--sidebar-text); /* Match sidebar heading color */
-             border-bottom: 1px solid var(--border-color-light);
-             padding-bottom: 10px;
-             margin-bottom: 15px;
-        }
-         #dataDisplayContainer {
-             flex: 1;
-             display: flex;
-             flex-direction: column;
-         }
-         #dataDisplay {
-             flex: 1;
-             overflow: auto;
-             min-height: 100px;
-         }
-          #schemaDisplay p, #dataDisplayContainer p {
-              color: #888; /* Placeholder text color */
-          }
-
-
-        /* --- Query Area --- */
-        #queryArea {
-            padding-top: 20px;
-            border-top: 1px solid var(--border-color);
-            background-color: var(--content-bg); /* Match content bg */
-            padding: 15px;
-            border-radius: 5px;
-            box-shadow: 0 -1px 3px rgba(0,0,0,0.05);
-            margin-top: 15px; /* Add margin instead of relying on flex */
-            transition: background-color 0.3s, border-color 0.3s;
-        }
-         #queryArea h4 {
-             margin-top: 0;
-             margin-bottom: 10px;
-             color: var(--sidebar-text);
-         }
-        #queryArea textarea {
-            width: 100%;
-            min-height: 80px;
-            padding: 10px;
-            border: 1px solid var(--input-border);
-            border-radius: 4px;
-            box-sizing: border-box;
-            font-family: monospace;
-            margin-bottom: 10px;
-            resize: vertical;
-            background-color: var(--input-bg); /* Input background */
-            color: var(--text-color); /* Input text color */
-            transition: background-color 0.3s, border-color 0.3s, color 0.3s;
-        }
-        #queryArea button {
-            padding: 10px 20px;
-            background-color: var(--button-primary-bg);
-            color: var(--button-primary-text);
-            border: none;
-            border-radius: 4px;
-            cursor: pointer;
-            transition: background-color 0.2s;
-            font-weight: bold;
-        }
-        #queryArea button:hover {
-            background-color: var(--button-primary-hover-bg);
-        }
-
-        /* --- Tables --- */
-        table {
-            width: 100%;
-            border-collapse: collapse;
-            margin-top: 0;
-            font-size: 0.9em;
-        }
-        th, td {
-            border: 1px solid var(--border-color-light);
-            padding: 10px 12px;
-            text-align: left;
-            white-space: nowrap;
-            max-width: 250px;
-            overflow: hidden;
-            text-overflow: ellipsis;
-             color: var(--text-color); /* Inherit text color */
-             transition: border-color 0.3s;
-        }
-        th {
-            background-color: var(--table-header-bg);
-            font-weight: 600;
-            position: sticky;
-            top: 0;
-            z-index: 1;
-            transition: background-color 0.3s;
-        }
-        tr:nth-child(even) {
-            background-color: var(--table-row-even-bg);
-             transition: background-color 0.3s;
-        }
-         tr:nth-child(odd) {
-             background-color: var(--content-bg); /* Match content background */
-             transition: background-color 0.3s;
-         }
-
-         /* --- Status Message --- */
-         #statusMessage {
-             padding: 10px 15px;
-             margin-top: 15px;
-             border-radius: 4px;
-             display: none;
-             font-size: 0.9em;
-             transition: background-color 0.3s, color 0.3s, border-color 0.3s;
-         }
-        #statusMessage.success {
-            background-color: var(--status-success-bg);
-            color: var(--status-success-text);
-            border: 1px solid var(--status-success-border);
-        }
-        #statusMessage.error {
-            background-color: var(--status-error-bg);
-            color: var(--status-error-text);
-            border: 1px solid var(--status-error-border);
-        }
-         /* --- Loader --- */
-         .loader {
-             border: 4px solid var(--loader-border);
-             border-top: 4px solid var(--loader-spinner);
-             border-radius: 50%;
-             width: 20px;
-             height: 20px;
-             animation: spin 1s linear infinite;
-             display: none;
-         }
-         @keyframes spin {
-             0% { transform: rotate(0deg); }
-             100% { transform: rotate(360deg); }
-         }
+            background-color: var(--header-bg); color: var(--header-text); padding: 15px 20px;
+            display: flex; align-items: center; box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+            font-size: 1.2em; font-weight: bold; transition: background-color 0.3s, color 0.3s;
+        }
+         /* Removed header .loader styling */
+
+        /* --- Container, Sidebar, Main Content (Keep as before) --- */
+         .container { display: flex; flex: 1; overflow: hidden; }
+         #sidebar { width: 220px; background-color: var(--sidebar-bg); padding: 15px; overflow-y: auto; border-right: 1px solid var(--border-color); transition: background-color 0.3s; }
+         #sidebar h3 { margin-top: 0; margin-bottom: 15px; color: var(--sidebar-text); border-bottom: 1px solid var(--border-color); padding-bottom: 10px; }
+         #tableList { list-style: none; padding: 0; margin: 0; }
+         #tableList li { padding: 8px 10px; cursor: pointer; border-radius: 4px; margin-bottom: 5px; transition: background-color 0.2s, color 0.2s; font-size: 0.95em; color: var(--sidebar-text); }
+         #tableList li:hover { background-color: var(--sidebar-hover-bg); }
+         #tableList li.active { background-color: var(--sidebar-active-bg); color: var(--sidebar-active-text); font-weight: bold; }
+         #mainContent { flex: 1; display: flex; flex-direction: column; padding: 20px; overflow: hidden; }
+         .content-area { flex: 1; display: flex; flex-direction: column; overflow: hidden; gap: 15px; }
+         #schemaDisplay, #dataDisplayContainer, #queryResultContainer { background-color: var(--content-bg); border: 1px solid var(--border-color); border-radius: 5px; padding: 15px; margin-bottom: 0; overflow: auto; box-shadow: 0 1px 3px rgba(0,0,0,0.05); transition: background-color 0.3s, border-color 0.3s; }
+         #schemaDisplay h4, #dataDisplayContainer h4, #queryResultContainer h4 { margin-top: 0; color: var(--sidebar-text); border-bottom: 1px solid var(--border-color-light); padding-bottom: 10px; margin-bottom: 15px; }
+         #dataDisplayContainer { flex: 1; display: flex; flex-direction: column; }
+         #dataDisplay { flex: 1; overflow: auto; min-height: 100px; }
+         #schemaDisplay p, #dataDisplayContainer p { color: #888; }
+
+        /* --- Query Area (Keep as before) --- */
+        #queryArea { padding-top: 20px; border-top: 1px solid var(--border-color); background-color: var(--content-bg); padding: 15px; border-radius: 5px; box-shadow: 0 -1px 3px rgba(0,0,0,0.05); margin-top: 15px; transition: background-color 0.3s, border-color 0.3s; }
+         #queryArea h4 { margin-top: 0; margin-bottom: 10px; color: var(--sidebar-text); }
+        #queryArea textarea { width: 100%; min-height: 80px; padding: 10px; border: 1px solid var(--input-border); border-radius: 4px; box-sizing: border-box; font-family: monospace; margin-bottom: 10px; resize: vertical; background-color: var(--input-bg); color: var(--text-color); transition: background-color 0.3s, border-color 0.3s, color 0.3s; }
+        #queryArea button { padding: 10px 20px; background-color: var(--button-primary-bg); color: var(--button-primary-text); border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.2s; font-weight: bold; }
+        #queryArea button:hover { background-color: var(--button-primary-hover-bg); }
+
+        /* --- Tables (Keep as before) --- */
+        table { width: 100%; border-collapse: collapse; margin-top: 0; font-size: 0.9em; }
+        th, td { border: 1px solid var(--border-color-light); padding: 10px 12px; text-align: left; white-space: nowrap; max-width: 250px; overflow: hidden; text-overflow: ellipsis; color: var(--text-color); transition: border-color 0.3s; }
+        th { background-color: var(--table-header-bg); font-weight: 600; position: sticky; top: 0; z-index: 1; transition: background-color 0.3s; }
+        tr:nth-child(even) { background-color: var(--table-row-even-bg); transition: background-color 0.3s; }
+         tr:nth-child(odd) { background-color: var(--content-bg); transition: background-color 0.3s; }
+
+         /* --- Status Message (Keep as before) --- */
+         #statusMessage { padding: 10px 15px; margin-top: 15px; border-radius: 4px; display: none; font-size: 0.9em; transition: background-color 0.3s, color 0.3s, border-color 0.3s; }
+        #statusMessage.success { background-color: var(--status-success-bg); color: var(--status-success-text); border: 1px solid var(--status-success-border); }
+        #statusMessage.error { background-color: var(--status-error-bg); color: var(--status-error-text); border: 1px solid var(--status-error-border); }
+
+         /* Removed .loader and @keyframes spin styling */
     </style>
 </head>
 <body>
 
     <header>
         <span>🦆 DuckDB Explorer</span>
-         <div class="loader" id="loadingIndicator"></div>
+         <!-- Removed loader div -->
     </header>
 
     <div class="container">
@@ -384,15 +183,15 @@
     </div>
 
     <script>
-        // --- Keep the existing element variables ---
+        // --- Keep the existing element variables EXCEPT loadingIndicator ---
         const tableList = document.getElementById('tableList');
         const schemaDisplay = document.getElementById('schemaDisplay');
         const schemaTable = document.getElementById('schemaTable');
-        const schemaPlaceholder = document.getElementById('schemaPlaceholder'); // Added
+        const schemaPlaceholder = document.getElementById('schemaPlaceholder');
         const dataDisplayContainer = document.getElementById('dataDisplayContainer');
         const dataDisplay = document.getElementById('dataDisplay');
         const dataTable = document.getElementById('dataTable');
-        const dataPlaceholder = document.getElementById('dataPlaceholder'); // Added
+        const dataPlaceholder = document.getElementById('dataPlaceholder');
         const tableDataHeader = document.getElementById('tableDataHeader');
         const sqlInput = document.getElementById('sqlInput');
         const runSqlButton = document.getElementById('runSqlButton');
@@ -400,34 +199,35 @@
         const queryResultDisplay = document.getElementById('queryResultDisplay');
         const queryResultTable = document.getElementById('queryResultTable');
         const statusMessage = document.getElementById('statusMessage');
-        const loadingIndicator = document.getElementById('loadingIndicator');
+        // const loadingIndicator = document.getElementById('loadingIndicator'); // Removed
 
-        // --- API URL is relative ---
+        // --- API URL, currentTables, selectedTable, polling (Keep as before) ---
         const API_BASE_URL = '';
         let currentTables = [];
         let selectedTable = null;
         let pollingIntervalId = null;
-        const POLLING_INTERVAL_MS = 1000; // Refresh table list every 10 seconds
-
-        // --- Utility Functions (keep existing) ---
-        function showLoader(show) {
-            loadingIndicator.style.display = show ? 'inline-block' : 'none';
-        }
-
-        function showStatus(message, isError = false) {
-            statusMessage.textContent = message;
-            statusMessage.className = isError ? 'error' : 'success';
-            statusMessage.style.display = 'block';
-            setTimeout(() => { statusMessage.style.display = 'none'; }, 5000);
-        }
-
-        function clearStatus() {
-            statusMessage.textContent = '';
-            statusMessage.style.display = 'none';
-        }
+        const POLLING_INTERVAL_MS = 10000;
+
+        // --- Utility Functions ---
+        // --- REMOVE showLoader function ---
+        // function showLoader(show) {
+        //     loadingIndicator.style.display = show ? 'inline-block' : 'none';
+        // }
+
+        // --- Keep showStatus, clearStatus ---
+         function showStatus(message, isError = false) {
+             statusMessage.textContent = message;
+             statusMessage.className = isError ? 'error' : 'success';
+             statusMessage.style.display = 'block';
+             setTimeout(() => { statusMessage.style.display = 'none'; }, 5000);
+         }
+         function clearStatus() {
+             statusMessage.textContent = '';
+             statusMessage.style.display = 'none';
+         }
 
         async function fetchAPI(endpoint, options = {}) {
-            showLoader(true);
+            // REMOVE showLoader(true);
             clearStatus();
             const url = `${API_BASE_URL}${endpoint}`;
             try {
@@ -440,25 +240,24 @@
                     } catch (e) { /* Ignore */ }
                     throw new Error(errorDetail);
                 }
-                 // Check if the response is likely JSON before trying to parse
                  const contentType = response.headers.get("content-type");
                  if (contentType && contentType.includes("application/json")) {
                      return await response.json();
                  }
-                 // Assume text for non-JSON or if content-type is missing
                  return await response.text();
             } catch (error) {
                 console.error('API Fetch Error:', error);
                 showStatus(`Error: ${error.message}`, true);
                 throw error;
             } finally {
-                showLoader(false);
+                // REMOVE showLoader(false);
             }
         }
 
+        // --- Keep renderTable, renderSchema ---
         function renderTable(data, tableElement) {
             tableElement.innerHTML = '';
-             if (!data || !Array.isArray(data)) { // Check if data is an array
+             if (!data || !Array.isArray(data)) {
                  tableElement.innerHTML = '<tbody><tr><td>Invalid data format received.</td></tr></tbody>';
                  console.error("Invalid data format for renderTable:", data);
                  return;
@@ -485,12 +284,9 @@
                  });
             });
         }
-
-        // --- renderSchema FIX ---
-        function renderSchema(schemaData) {
-             // Target the table directly
-             schemaTable.innerHTML = ''; // Clear previous table content
-             schemaPlaceholder.style.display = 'none'; // Hide placeholder
+         function renderSchema(schemaData) {
+             schemaTable.innerHTML = '';
+             schemaPlaceholder.style.display = 'none';
 
             if (!schemaData || !schemaData.columns || schemaData.columns.length === 0) {
                 schemaTable.innerHTML = '<tbody><tr><td colspan="2">No schema information available.</td></tr></tbody>';
@@ -514,21 +310,21 @@
          }
 
 
-        // --- Event Handlers (Modified) ---
+        // --- Event Handlers (Keep and ensure showLoader calls are removed) ---
 
         async function loadTables(isPolling = false) {
+            // ... (keep existing logic, just remove showLoader calls) ...
             if (!isPolling) {
                 tableList.innerHTML = '<li>Loading tables...</li>';
                 schemaTable.innerHTML = '';
                 dataTable.innerHTML = '';
                 tableDataHeader.textContent = '';
                 queryResultContainer.style.display = 'none';
-                schemaPlaceholder.style.display = 'block'; // Show placeholders initially
+                schemaPlaceholder.style.display = 'block';
                 dataPlaceholder.style.display = 'block';
             }
             try {
                 const newTables = await fetchAPI('/tables');
-                // Check if the list actually changed before re-rendering
                 if (!isPolling || JSON.stringify(newTables) !== JSON.stringify(currentTables)) {
                     console.log("Table list changed, updating UI.");
                     currentTables = newTables;
@@ -536,27 +332,19 @@
                     if (!isPolling) {
                          showStatus("Tables loaded.", false);
                     }
-                     // If the currently selected table disappeared, clear the displays
                     if (selectedTable && !currentTables.includes(selectedTable)) {
                          console.log(`Selected table "${selectedTable}" removed.`);
                          selectedTable = null;
                          tableDataHeader.textContent = '';
                          schemaDisplay.innerHTML = '<h4>Schema</h4><p id="schemaPlaceholder">Select a table from the list.</p><table id="schemaTable"></table>';
                          dataDisplayContainer.innerHTML = '<h4>Data <span id="tableDataHeader"></span></h4><p id="dataPlaceholder">Select a table from the list.</p><div id="dataDisplay"><table id="dataTable"></table></div>';
-                         // Re-assign potentially overwritten elements
                          schemaTable = document.getElementById('schemaTable');
                          dataTable = document.getElementById('dataTable');
                          schemaPlaceholder = document.getElementById('schemaPlaceholder');
                          dataPlaceholder = document.getElementById('dataPlaceholder');
                          tableDataHeader = document.getElementById('tableDataHeader');
-                     } else if (selectedTable && !isPolling) {
-                         // Optionally refresh current table view if needed,
-                         // but might be disruptive. Let's skip for now.
-                         // handleTableSelection(tableList.querySelector(`li[data-table-name="${selectedTable}"]`));
                      }
                  }
-
-                 // Clear placeholders if tables loaded successfully
                  if (currentTables.length > 0 && !isPolling) {
                      schemaPlaceholder.style.display = 'none';
                      dataPlaceholder.style.display = 'none';
@@ -565,20 +353,20 @@
                      schemaPlaceholder.textContent = 'No tables found in the database.';
                      dataPlaceholder.textContent = 'No tables found in the database.';
                  }
-
             } catch (error) {
-                if (!isPolling) { // Only show initial load error prominently
+                if (!isPolling) {
                     tableList.innerHTML = '<li>Error loading tables.</li>';
                     schemaPlaceholder.textContent = 'Error loading tables.';
                     dataPlaceholder.textContent = 'Error loading tables.';
                 } else {
-                    console.error("Polling error:", error); // Log polling errors quietly
+                    console.error("Polling error:", error);
                 }
             }
         }
 
         function displayTables(tables) {
-            tableList.innerHTML = '';
+            // ... (keep existing logic) ...
+             tableList.innerHTML = '';
             if (tables.length === 0) {
                 tableList.innerHTML = '<li>No tables found.</li>';
                 return;
@@ -588,7 +376,6 @@
                 li.textContent = tableName;
                 li.dataset.tableName = tableName;
                 li.onclick = () => handleTableSelection(li);
-                // Re-apply active class if this table was selected
                 if (tableName === selectedTable) {
                     li.classList.add('active');
                 }
@@ -597,6 +384,7 @@
         }
 
         async function handleTableSelection(listItem) {
+             // ... (keep existing logic, just remove showLoader calls) ...
             const currentActive = tableList.querySelector('.active');
             if (currentActive) {
                 currentActive.classList.remove('active');
@@ -608,10 +396,10 @@
 
             queryResultContainer.style.display = 'none';
             dataDisplayContainer.style.display = 'flex';
-            dataPlaceholder.style.display = 'none'; // Hide placeholder
+            dataPlaceholder.style.display = 'none';
 
             tableDataHeader.textContent = `for table "${selectedTable}"`;
-            schemaPlaceholder.style.display = 'none'; // Hide placeholder
+            schemaPlaceholder.style.display = 'none';
             schemaTable.innerHTML = '<tbody><tr><td colspan="2">Loading schema...</td></tr></tbody>';
             dataTable.innerHTML = '<tbody><tr><td>Loading data...</td></tr></tbody>';
 
@@ -630,35 +418,31 @@
 
 
          async function runCustomQuery() {
+              // ... (keep existing logic, just remove showLoader calls) ...
              const sql = sqlInput.value.trim();
              if (!sql) {
                  showStatus("SQL query cannot be empty.", true);
                  return;
              }
-
-             // Clear active selection in sidebar if a custom query is run
              const currentActive = tableList.querySelector('.active');
              if (currentActive) {
                  currentActive.classList.remove('active');
              }
-             selectedTable = null; // Deselect table
+             selectedTable = null;
 
             dataDisplayContainer.style.display = 'none';
             dataPlaceholder.style.display = 'none';
-             schemaPlaceholder.style.display = 'block'; // Show placeholders again
+             schemaPlaceholder.style.display = 'block';
              schemaTable.innerHTML = '';
              tableDataHeader.textContent = '';
 
             queryResultContainer.style.display = 'block';
             queryResultTable.innerHTML = '<tbody><tr><td>Running query...</td></tr></tbody>';
 
-
              try {
                  const resultData = await fetchAPI('/query', {
                      method: 'POST',
-                     headers: {
-                         'Content-Type': 'application/json',
-                     },
+                     headers: { 'Content-Type': 'application/json', },
                      body: JSON.stringify({ sql: sql }),
                  });
                  renderTable(resultData, queryResultTable);
@@ -668,13 +452,12 @@
              }
          }
 
-         // --- Polling Function ---
+         // --- Keep Polling Functions ---
          function startPolling() {
-             stopPolling(); // Clear existing interval if any
+             stopPolling();
              console.log(`Starting polling every ${POLLING_INTERVAL_MS / 1000} seconds.`);
              pollingIntervalId = setInterval(() => loadTables(true), POLLING_INTERVAL_MS);
          }
-
          function stopPolling() {
              if (pollingIntervalId) {
                  console.log("Stopping polling.");
@@ -685,28 +468,14 @@
 
         // --- Initial Setup ---
         runSqlButton.onclick = runCustomQuery;
-
-        // Load tables automatically when the page loads and start polling
         document.addEventListener('DOMContentLoaded', () => {
             loadTables().then(() => {
-                // Start polling only after the initial load succeeds
                 if (currentTables.length >= 0) { // Start even if no tables initially
                     startPolling();
                 }
             });
         });
 
-        // Optional: Stop polling when the page is hidden (e.g., tab switched)
-        // document.addEventListener("visibilitychange", () => {
-        //     if (document.visibilityState === 'hidden') {
-        //         stopPolling();
-        //     } else {
-        //         // Optionally restart polling immediately or wait for next interval
-        //         loadTables(); // Refresh immediately when tab becomes visible
-        //         startPolling();
-        //     }
-        // });
-
     </script>
 
 </body>