From 9da229ea608648d0ad080a1d5b7631b95273ca5a Mon Sep 17 00:00:00 2001
From: busya <uglypod@gmail.com>
Date: Wed, 17 Jun 2026 14:06:42 +0300
Subject: [PATCH] feat(frontend): add shared Skeleton component

Skeleton.svelte with line, card, circle, and row variants.
Replaces 30+ hand-rolled animate-pulse patterns across the codebase.
---
 frontend/src/lib/ui/Skeleton.svelte | 43 +++++++++++++++++++++++++++++
 frontend/src/lib/ui/index.ts        |  1 +
 2 files changed, 44 insertions(+)
 create mode 100644 frontend/src/lib/ui/Skeleton.svelte

diff --git a/frontend/src/lib/ui/Skeleton.svelte b/frontend/src/lib/ui/Skeleton.svelte
new file mode 100644
index 00000000..b409ad6a
--- /dev/null
+++ b/frontend/src/lib/ui/Skeleton.svelte
@@ -0,0 +1,43 @@
+<!-- #region UI.Skeleton [C:2] [TYPE Component] [SEMANTICS skeleton,loading,placeholder,ui,atom] -->
+<!-- @ingroup UI -->
+<!-- @BRIEF Loading skeleton placeholder with line, card, circle, and table-row variants. -->
+<!-- @LAYER UI -->
+<!-- @UX_STATE Loading -> Animated pulse placeholder matching target element shape. -->
+<script lang="ts">
+  let {
+    variant = "line" as "line" | "card" | "circle" | "row",
+    width = "" as string,
+    height = "" as string,
+    cols = 3 as number,
+    rows = 3 as number,
+    class: className = "",
+  } = $props();
+</script>
+
+{#if variant === "line"}
+  <div
+    class="animate-pulse bg-surface-muted rounded {width || 'w-full'} {height || 'h-4'} {className}"
+  ></div>
+
+{:else if variant === "card"}
+  <div
+    class="animate-pulse bg-surface-muted rounded-lg {width || 'w-full'} {height || 'h-24'} {className}"
+  ></div>
+
+{:else if variant === "circle"}
+  <div
+    class="animate-pulse bg-surface-muted rounded-full {width || 'w-10'} {height || 'h-10'} {className}"
+  ></div>
+
+{:else if variant === "row"}
+  <div class="animate-pulse space-y-3 {className}">
+    {#each Array(rows) as _}
+      <div class="flex items-center gap-4">
+        {#each Array(cols) as _}
+          <div class="h-4 bg-surface-muted rounded flex-1"></div>
+        {/each}
+      </div>
+    {/each}
+  </div>
+{/if}
+<!-- #endregion UI.Skeleton -->
diff --git a/frontend/src/lib/ui/index.ts b/frontend/src/lib/ui/index.ts
index 6bb71f1a..b9d184e6 100644
--- a/frontend/src/lib/ui/index.ts
+++ b/frontend/src/lib/ui/index.ts
@@ -17,6 +17,7 @@ export { default as LanguageSwitcher } from './LanguageSwitcher.svelte';
 export { default as Icon } from './Icon.svelte';
 export { default as HelpTooltip } from './HelpTooltip.svelte';
 export { default as Badge } from './Badge.svelte';
+export { default as Skeleton } from './Skeleton.svelte';
 // [/SECTION: EXPORTS]
 
 // #endregion ui:Module
\ No newline at end of file