Clean client info

assets/index.css

@@ -212,7 +212,18 @@ body::before {
     margin-top: 4px;
     color: var(--text-muted);
     padding-bottom: 5px;
+    transition: opacity 0.3s ease;
+    min-height: 1.2em; /* no layout shit from js */
 }
+
+.location.loading {
+    opacity: 0;
+}
+
+.location.loaded {
+    opacity: 1;
+}
+
 .entry-list {
     margin-top: 10px;
 }

assets/index.js

@@ -71,18 +71,42 @@ function eraselabel(label) {
 // we get the client info from the headers
 // unclean but it works
 function updateClientInfo() {
+  const locationElement = document.querySelector(".location");
+  if (!locationElement) {
+    console.warn("Location element not found in DOM");
+    return;
+  }
+
+  // say we're loading
+  locationElement.classList.add("loading");
+
   fetch(window.location.href)
     .then((response) => {
       const clientInfo = response.headers.get("X-Client-Info");
-      if (clientInfo) {
-        // i hate http why does it do this
-        // this is a hack to fix the weird  character that shows up
-        const correctedInfo = clientInfo.replace(/Â?µs/g, "µs");
-        document.querySelector(".location").textContent = correctedInfo;
+
+      if (!clientInfo) {
+        throw new Error("X-Client-Info header not present");
       }
+
+      const cleanClientInfo = clientInfo
+        .replace(/\u00A0?µs/g, "µs")
+        .replace(/[\u0080-\u00FF]/g, "")
+        .trim();
+
+      // dumb smooth transition lmao
+      requestAnimationFrame(() => {
+        locationElement.textContent = cleanClientInfo;
+        locationElement.classList.remove("loading");
+        locationElement.classList.add("loaded");
+      });
     })
     .catch((error) => {
-      console.error("Error fetching X-Client-Info:", error);
+      console.error("Failed to update client info:", error);
+      requestAnimationFrame(() => {
+        locationElement.textContent = "CLIENT INFO UNAVAILABLE";
+        locationElement.classList.remove("loading");
+        locationElement.classList.add("loaded", "error");
+      });
     });
 }
 

index.html

@@ -35,7 +35,7 @@
                             Initializing...
                         </div>
                     </div>
-                    <div class="location">X-SERVED-INFO</div>
+                    <div class="location"></div>
                 </div>
                 <div class="section-title">ELIA.NETWORK</div>
                 <div class="entry-list">