From 26728691f5a222d8ba07d5a8d51a3a4f1e8fcb5d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?samuel=20ordo=C3=B1ez?= <kaynower@gmail.com>
Date: Sat, 18 Jul 2026 13:24:16 -0500
Subject: [PATCH] Add loading skeletons to split list

---
 app/src/components/SplitList.tsx | 22 +++++++++++++-
 app/src/styles.css               | 52 ++++++++++++++++++++++++++++++++
 2 files changed, 73 insertions(+), 1 deletion(-)

diff --git a/app/src/components/SplitList.tsx b/app/src/components/SplitList.tsx
index 89d9902..cca398b 100644
--- a/app/src/components/SplitList.tsx
+++ b/app/src/components/SplitList.tsx
@@ -129,7 +129,27 @@ export default function SplitList({
   const [open, setOpen] = useState<string | null>(null);
   const [search, setSearch] = useState("");
 
-  if (loading) return <p className="note">{t("loadingSplits")}</p>;
+  if (loading)
+    return (
+      <div className="splits">
+        {Array.from({ length: 6 }, (_, i) => (
+          <div className="skeleton-split" key={i}>
+            <div className="skeleton-head">
+              <div className="skeleton-line skeleton-id" />
+              <div className="skeleton-line skeleton-badge" />
+            </div>
+            <div className="skeleton-body">
+              {Array.from({ length: 3 }, (_, j) => (
+                <div className="skeleton-row" key={j}>
+                  <div className="skeleton-line skeleton-addr" />
+                  <div className="skeleton-line skeleton-pct" />
+                </div>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    );
   if (splits.length === 0) {
     return (
       <div className="empty">
diff --git a/app/src/styles.css b/app/src/styles.css
index 67b5b5f..ae1a3f2 100644
--- a/app/src/styles.css
+++ b/app/src/styles.css
@@ -548,6 +548,58 @@ select.lang-select:focus {
   text-decoration: underline;
 }
 
+/* ── Loading skeletons ────────────────────────────────── */
+
+.skeleton-split {
+  background: var(--panel);
+  border: 1px solid var(--line);
+  border-radius: 14px;
+  padding: 14px 16px;
+  cursor: default;
+}
+
+.skeleton-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.skeleton-body {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.skeleton-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.skeleton-line {
+  height: 12px;
+  border-radius: 6px;
+  background: linear-gradient(
+    90deg,
+    var(--line) 25%,
+    rgba(31, 44, 69, 0.4) 50%,
+    var(--line) 75%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 1.4s ease-in-out infinite;
+}
+
+.skeleton-id   { width: 48px; }
+.skeleton-badge { width: 52px; }
+.skeleton-addr { width: 140px; }
+.skeleton-pct  { width: 36px; }
+
+@keyframes shimmer {
+  0%   { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
 @media (prefers-reduced-motion: reduce) {
   * {
     animation: none !important;