Show moderation filter loading status

css/style.css

@@ -834,6 +834,32 @@ button:not(.icon-button):focus {
   display: flex;
 }
 
+.status-banner {
+  align-items: center;
+  background-color: rgba(31, 41, 55, 0.9);
+  border-radius: 0.5rem;
+  color: #e5e7eb;
+  display: flex;
+  gap: 0.75rem;
+  margin-bottom: 1rem;
+  padding: 1rem;
+}
+
+.status-banner .status-spinner {
+  animation: spin 1s linear infinite;
+  border: 0.125rem solid rgba(229, 231, 235, 0.35);
+  border-radius: 9999px;
+  border-top-color: #f9fafb;
+  height: 1.25rem;
+  width: 1.25rem;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
 /* Responsive Design */
 @media (max-width: 640px) {
   #videoList {

index.html

@@ -155,6 +155,17 @@
         class="hidden bg-red-100 text-red-900 p-4 rounded-md mb-4"
       ></div>
 
+      <!-- Status Container -->
+      <div
+        id="statusContainer"
+        class="hidden status-banner"
+        role="status"
+        aria-live="polite"
+      >
+        <span class="status-spinner" aria-hidden="true"></span>
+        <span class="status-message" data-status-message></span>
+      </div>
+
       <!-- Success Container -->
       <div
         id="successContainer"

js/app.js

@@ -663,6 +663,9 @@ class bitvidApp {
     // Notification containers
     this.errorContainer = document.getElementById("errorContainer") || null;
     this.successContainer = document.getElementById("successContainer") || null;
+    this.statusContainer = document.getElementById("statusContainer") || null;
+    this.statusMessage =
+      this.statusContainer?.querySelector("[data-status-message]") || null;
 
     // Auth state
     this.pubkey = null;
@@ -4718,6 +4721,7 @@ class bitvidApp {
 
     let loadError = null;
     this.setAdminLoading(true);
+    this.showStatus("Fetching moderation filters…");
     try {
       await accessControl.ensureReady();
     } catch (error) {
@@ -4741,12 +4745,14 @@ class bitvidApp {
     }
 
     if (loadError) {
+      if (loadError?.code === "nostr-unavailable") {
+        console.info("Moderation lists are still syncing with relays.");
+        return;
+      }
+
       console.error("Failed to load admin lists:", loadError);
-      const message =
-        loadError?.code === "nostr-unavailable"
-          ? "Unable to reach Nostr relays. Moderation lists may be out of date."
-          : "Unable to load moderation lists. Please try again.";
-      this.showError(message);
+      this.showStatus(null);
+      this.showError("Unable to load moderation lists. Please try again.");
       this.clearAdminLists();
       this.setAdminLoading(false);
       return;
@@ -4760,6 +4766,7 @@ class bitvidApp {
       if (adminNav instanceof HTMLElement && adminNav.classList.contains("bg-gray-800")) {
         this.selectProfilePane("account");
       }
+      this.showStatus(null);
       this.setAdminLoading(false);
       return;
     }
@@ -4769,6 +4776,7 @@ class bitvidApp {
       this.adminModeratorsSection.setAttribute("aria-hidden", (!isSuperAdmin).toString());
     }
     this.populateAdminLists();
+    this.showStatus(null);
     this.setAdminLoading(false);
   }
 
@@ -9749,6 +9757,27 @@ class bitvidApp {
     }, 5000);
   }
 
+  showStatus(msg) {
+    if (!(this.statusContainer instanceof HTMLElement)) {
+      return;
+    }
+
+    if (!msg) {
+      if (this.statusMessage instanceof HTMLElement) {
+        this.statusMessage.textContent = "";
+      }
+      this.statusContainer.classList.add("hidden");
+      return;
+    }
+
+    if (this.statusMessage instanceof HTMLElement) {
+      this.statusMessage.textContent = msg;
+    } else {
+      this.statusContainer.textContent = msg;
+    }
+    this.statusContainer.classList.remove("hidden");
+  }
+
   showSuccess(msg) {
     if (!msg) {
       this.successContainer.textContent = "";