fix: add loading indicators to all pages

- 'Loading…' shown in charts/fields/output areas while waiting for server response
- Console + chat: clears loading state on first output line
- Player list: table body shows loading row until refresh completes
- Player info / Server info: fields show loading until data arrives

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

js/pages/chat.js

@@ -6,7 +6,7 @@ function ChatPage(params, container) {
 
   var html =
     '<div id="ChatController">' +
-      '<div id="chat-output" style="height:600px" class="Output scrollable"></div>' +
+      '<div id="chat-output" style="height:600px" class="Output scrollable text-white-50">Loading…</div>' +
       '<form id="chat-form">' +
         '<input id="chat-input" class="form-control" style="width:100%" placeholder="Type a message...">' +
       '</form>' +
@@ -15,8 +15,10 @@ function ChatPage(params, container) {
 
   var outputEl = document.getElementById('chat-output');
   var inputEl = document.getElementById('chat-input');
+  var firstMessage = true;
 
   function addMessage(msg) {
+    if (firstMessage) { outputEl.innerHTML = ''; outputEl.classList.remove('text-white-50'); firstMessage = false; }
     var div = document.createElement('div');
     var t = new Date((msg.Time || 0) * 1000);
     var timeStr = t.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });

js/pages/console.js

@@ -4,7 +4,7 @@
 function ConsolePage(params, container) {
   var html =
     '<div id="ConsoleController">' +
-      '<div id="console-output" style="height:600px" class="Output scrollable"></div>' +
+      '<div id="console-output" style="height:600px" class="Output scrollable text-white-50">Loading…</div>' +
       '<form id="console-form">' +
         '<input type="text" id="console-input" class="form-control" autocomplete="off">' +
       '</form>' +
@@ -15,8 +15,10 @@ function ConsolePage(params, container) {
   var inputEl = document.getElementById('console-input');
   var commandHistory = [];
   var historyIndex = 0;
+  var firstOutput = true;
 
   function addOutput(msg) {
+    if (firstOutput) { outputEl.innerHTML = ''; outputEl.classList.remove('text-white-50'); firstOutput = false; }
     var div = document.createElement('div');
     div.className = msg.Type;
     div.textContent = stripHtml(msg.Message);

js/pages/playerInfo.js

@@ -22,7 +22,7 @@ function PlayerInfoPage(params, container) {
           '<h2 class="text-center">Info</h2>' +
           '<div id="pi-notfound" class="alert alert-warning" style="display:none">This Player is currently not connected to this server!</div>' +
         '</div>' +
-        '<div id="pi-fields" class="col-sm-12"></div>' +
+        '<div id="pi-fields" class="col-sm-12"><span class="text-white-50">Loading…</span></div>' +
       '</div>' +
     '</div>';
   container.innerHTML = html;

js/pages/playerlist.js

@@ -29,7 +29,7 @@ function PlayerListPage(params, container) {
                   '<th class="sortable text-end" data-field="ConnectedSeconds">Duration</th>' +
                 '</tr>' +
               '</thead>' +
-              '<tbody id="player-tbody"></tbody>' +
+              '<tbody id="player-tbody"><tr><td colspan="7" class="text-center text-white-50">Loading…</td></tr></tbody>' +
             '</table>' +
           '</div>' +
         '</div>' +

js/pages/serverInfo.js

@@ -9,7 +9,7 @@ function ServerInfoPage(params, container) {
     '<div id="ServerInfoController">' +
       '<div class="row">' +
         '<div class="col-sm-12"><h2 id="si-hostname">Server Info</h2></div>' +
-        '<div id="si-fields" class="col-sm-12"></div>' +
+        '<div id="si-fields" class="col-sm-12"><span class="text-white-50">Loading…</span></div>' +
       '</div>' +
       '<div class="row">' +
         '<div class="col-sm-12">' +