server optimizations

Overlord-Server/public/assets/data.js

@@ -71,6 +71,8 @@ export async function loadWithOptions(options = {}) {
     }
     state.lastDigest = digest;
     render(data, { reorder });
+    const pag = document.getElementById("pagination");
+    if (pag) pag.style.visibility = "";
     
     if (!state.thumbnailsRequested) {
       state.thumbnailsRequested = true;

Overlord-Server/public/assets/main.js

@@ -11,7 +11,6 @@ import {
   requestThumbnail,
   markManualDisconnect,
 } from "./data.js";
-import { initCountryPicker } from "./country-picker.js";
 
 const grid = document.getElementById("grid");
 const totalPill = document.getElementById("total-pill");
@@ -620,13 +619,15 @@ filterGroupSelect?.addEventListener("change", (e) => {
   loadWithOptions({ force: true, reorder: true });
 });
 
-initCountryPicker((code) => {
-  state.filterCountry = code;
-  localStorage.setItem(PREF_FILTER_COUNTRY_KEY, code);
-  state.page = 1;
-  state.lastDigest = "";
-  loadWithOptions({ force: true, reorder: true });
-}, localStorage.getItem(PREF_FILTER_COUNTRY_KEY) || "all");
+import("./country-picker.js").then(({ initCountryPicker }) => {
+  initCountryPicker((code) => {
+    state.filterCountry = code;
+    localStorage.setItem(PREF_FILTER_COUNTRY_KEY, code);
+    state.page = 1;
+    state.lastDigest = "";
+    loadWithOptions({ force: true, reorder: true });
+  }, localStorage.getItem(PREF_FILTER_COUNTRY_KEY) || "all");
+});
 
 (function restoreFilterStatus() {
   const savedStatus = localStorage.getItem(PREF_FILTER_STATUS_KEY);

Overlord-Server/public/assets/nav.js

@@ -9,13 +9,13 @@ import {
 import { mountNav } from "./nav/template.js";
 import { createAdaptiveNavController } from "./nav/layout.js";
 import { applyUserRoleUI } from "./nav/role-ui.js";
-import { showCertBannerIfNeeded } from "./cert-banner.js";
-import * as chatWidget from "./chat-widget.js";
 
 const host = document.getElementById("top-nav");
 if (host) {
   const refs = mountNav(host);
-  showCertBannerIfNeeded(document.getElementById("sb-mobile-bar") || host);
+  import("./cert-banner.js").then(({ showCertBannerIfNeeded }) => {
+    showCertBannerIfNeeded(document.getElementById("sb-mobile-bar") || host);
+  });
   const { applyAdaptiveNavLayout, navHide } = createAdaptiveNavController(host, refs);
 
   if (refs.navHideBtn && navHide) {
@@ -156,18 +156,20 @@ if (host) {
     loadCurrentUser();
   }
 
-  chatWidget.init();
+  import("./chat-widget.js").then((chatWidget) => {
+    chatWidget.init();
 
-  if (chatWidget.isHidden() && refs.navUtility) {
-    const restoreBtn = document.createElement("button");
-    restoreBtn.id = "chat-restore-btn";
-    restoreBtn.className = "inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-slate-900/70 border border-slate-800 text-slate-500 hover:text-slate-300 hover:bg-slate-800 text-xs transition-colors";
-    restoreBtn.title = "Show team chat";
-    restoreBtn.innerHTML = '<i class="fa-solid fa-comments"></i><span class="sb-text">Chat</span>';
-    restoreBtn.addEventListener("click", () => {
-      chatWidget.show();
-      restoreBtn.remove();
-    });
-    refs.navUtility.insertBefore(restoreBtn, refs.navUtility.firstChild);
-  }
+    if (chatWidget.isHidden() && refs.navUtility) {
+      const restoreBtn = document.createElement("button");
+      restoreBtn.id = "chat-restore-btn";
+      restoreBtn.className = "inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-slate-900/70 border border-slate-800 text-slate-500 hover:text-slate-300 hover:bg-slate-800 text-xs transition-colors";
+      restoreBtn.title = "Show team chat";
+      restoreBtn.innerHTML = '<i class="fa-solid fa-comments"></i><span class="sb-text">Chat</span>';
+      restoreBtn.addEventListener("click", () => {
+        chatWidget.show();
+        restoreBtn.remove();
+      });
+      refs.navUtility.insertBefore(restoreBtn, refs.navUtility.firstChild);
+    }
+  });
 }

Overlord-Server/public/index.html

@@ -13,7 +13,10 @@
     <link rel="icon" type="image/x-icon" href="/assets/favicon.ico" />
     <link rel="stylesheet" href="/assets/main.css" />
     <link rel="stylesheet" href="/assets/custom.css" />
-    <script src="/vendor/animejs/anime.min.js"></script>
+    <script defer src="/vendor/animejs/anime.min.js"></script>
+    <link rel="preload" href="/api/clients?page=1&amp;pageSize=12&amp;q=&amp;sort=stable&amp;status=all&amp;os=all&amp;country=all&amp;group=all" as="fetch" crossorigin />
+    <link rel="preload" href="/api/auth/me" as="fetch" crossorigin />
+    <link rel="preload" href="/api/groups" as="fetch" crossorigin />
   </head>
   <body class="min-h-screen bg-slate-950 text-slate-100">
     <header id="top-nav"></header>
@@ -151,8 +154,8 @@
             </button>
           </div>
         </div>
-        <div id="grid" class="flex flex-col gap-3"></div>
-        <div class="flex items-center justify-center gap-3 py-4">
+        <div id="grid" class="flex flex-col gap-3 min-h-[420px]"></div>
+        <div id="pagination" class="flex items-center justify-center gap-3 py-4" style="visibility:hidden">
           <button
             id="prev"
             class="px-4 py-2 rounded-lg border border-slate-700/60 bg-slate-800/70 hover:bg-slate-700/70 text-slate-300 disabled:opacity-40"