feat: mobile nav, radio layout/requests, leaderboard tabs, client i18n, habbo background, navbar fixes

src/components/public/ui.tsx

@@ -101,3 +101,60 @@ export function RankBadge({ position }: { position: number }) {
     </span>
   );
 }
+
+/* ── Skeleton loaders ────────────────────────────────────────── */
+
+export function Skeleton({ className, style }: { className?: string; style?: React.CSSProperties }) {
+  return (
+    <div
+      className={className}
+      style={{
+        ...style,
+        backgroundColor: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
+        borderRadius: "6px",
+        animation: "shimmer 1.5s ease-in-out infinite",
+      }}
+    />
+  );
+}
+
+export function SkeletonCard({ lines = 3 }: { lines?: number }) {
+  return (
+    <div className="content-card" style={{ padding: "1rem" }}>
+      <div className="content-card-head" style={{ margin: "-1rem -1rem 1rem" }}>
+        <Skeleton style={{ width: "44px", height: "44px", borderRadius: "999px" }} />
+        <div style={{ flex: 1, display: "grid", gap: "0.35rem" }}>
+          <Skeleton style={{ height: "16px", width: "60%" }} />
+          <Skeleton style={{ height: "12px", width: "40%" }} />
+        </div>
+      </div>
+      {Array.from({ length: lines }).map((_, i) => (
+        <Skeleton key={i} style={{ height: "12px", width: `${85 - i * 10}%`, marginBottom: "0.6rem" }} />
+      ))}
+    </div>
+  );
+}
+
+export function SkeletonTable({ rows = 5 }: { rows?: number }) {
+  return (
+    <div className="content-card" style={{ padding: "0.5rem 1rem 1rem" }}>
+      {Array.from({ length: rows }).map((_, i) => (
+        <div key={i} style={{ display: "flex", alignItems: "center", gap: "0.75rem", padding: "0.6rem 0", borderTop: i > 0 ? "1px solid color-mix(in srgb, var(--color-text-muted) 12%, transparent)" : undefined }}>
+          {i === 0 ? (
+            <>
+              <Skeleton style={{ height: "12px", width: "30%" }} />
+              <Skeleton style={{ height: "12px", width: "20%" }} />
+              <Skeleton style={{ height: "12px", width: "25%", marginLeft: "auto" }} />
+            </>
+          ) : (
+            <>
+              <Skeleton style={{ width: "28px", height: "28px", borderRadius: "8px" }} />
+              <Skeleton style={{ height: "14px", width: "35%" }} />
+              <Skeleton style={{ height: "14px", width: "20%", marginLeft: "auto" }} />
+            </>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}