From f697b6d99e4e5bc9e7bf2fab2153af77b6dafc91 Mon Sep 17 00:00:00 2001
From: cc <codecolorist@gmail.com>
Date: Wed, 15 Apr 2026 23:30:09 +0200
Subject: [PATCH] Use subtle loading skeleton for keys page

Replace animated Skeleton with deterministic-width divs to fix React
hydration mismatch caused by Math.random() generating different values
on server vs client.
---
 src/app/os/keys/page.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/app/os/keys/page.tsx b/src/app/os/keys/page.tsx
index 201a5ab..bc17a64 100644
--- a/src/app/os/keys/page.tsx
+++ b/src/app/os/keys/page.tsx
@@ -7,7 +7,6 @@ import { Search, X } from "lucide-react";
 
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
-import { Skeleton } from "@/components/ui/skeleton";
 import { HeaderPortal } from "@/components/header-portal";
 import { createEngine } from "@/lib/engine";
 import { tokenizeKeys, getTopTokens } from "@/lib/tokenizer";
@@ -115,10 +114,10 @@ export default function Keys() {
       {loading ? (
         <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-x-6 gap-y-1">
           {Array.from({ length: 30 }).map((_, i) => (
-            <Skeleton
+            <div
               key={i}
-              className="h-7"
-              style={{ width: `${60 + Math.random() * 40}%` }}
+              className="h-7 bg-muted/50 rounded"
+              style={{ width: `${65 + (i * 17) % 30}%` }}
             />
           ))}
         </div>