From a801903fd37a74f23cb09b704aee5df1dd81e8ac Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Mon, 20 Apr 2026 22:25:02 +0300
Subject: [PATCH] feat(FontList): use getSkeletonWidth utility for skeleton row
 widths

---
 .../getSkeletonWidth/getSkeletonWidth.ts      | 13 +++++++++++
 src/shared/lib/utils/index.ts                 |  1 +
 .../ui/FontList/FontList.svelte               | 23 ++++++++++++++++++-
 3 files changed, 36 insertions(+), 1 deletion(-)
 create mode 100644 src/shared/lib/utils/getSkeletonWidth/getSkeletonWidth.ts

diff --git a/src/shared/lib/utils/getSkeletonWidth/getSkeletonWidth.ts b/src/shared/lib/utils/getSkeletonWidth/getSkeletonWidth.ts
new file mode 100644
index 0000000..e038fab
--- /dev/null
+++ b/src/shared/lib/utils/getSkeletonWidth/getSkeletonWidth.ts
@@ -0,0 +1,13 @@
+/**
+ * Generates a consistent but varied width for skeleton placeholders.
+ * Uses a predefined sequence to ensure stability between renders.
+ *
+ * @param index - Index of the item in a list to pick a width from the sequence
+ * @param multiplier - Multiplier to apply to the base sequence values (default: 4)
+ * @returns CSS width value (e.g., "128px")
+ */
+export function getSkeletonWidth(index: number, multiplier = 4): string {
+    const sequence = [32, 48, 40, 56, 36, 44, 52, 38, 46, 42, 34, 50];
+    const base = sequence[index % sequence.length];
+    return `${base * multiplier}px`;
+}
diff --git a/src/shared/lib/utils/index.ts b/src/shared/lib/utils/index.ts
index 6d708ab..b4ae529 100644
--- a/src/shared/lib/utils/index.ts
+++ b/src/shared/lib/utils/index.ts
@@ -17,6 +17,7 @@ export {
 export { clampNumber } from './clampNumber/clampNumber';
 export { debounce } from './debounce/debounce';
 export { getDecimalPlaces } from './getDecimalPlaces/getDecimalPlaces';
+export { getSkeletonWidth } from './getSkeletonWidth/getSkeletonWidth';
 export { roundToStepPrecision } from './roundToStepPrecision/roundToStepPrecision';
 export { smoothScroll } from './smoothScroll/smoothScroll';
 export { splitArray } from './splitArray/splitArray';
diff --git a/src/widgets/ComparisonView/ui/FontList/FontList.svelte b/src/widgets/ComparisonView/ui/FontList/FontList.svelte
index 3fbe65a..e8ae2b9 100644
--- a/src/widgets/ComparisonView/ui/FontList/FontList.svelte
+++ b/src/widgets/ComparisonView/ui/FontList/FontList.svelte
@@ -11,9 +11,11 @@ import {
     VIRTUAL_INDEX_NOT_LOADED,
     fontStore,
 } from '$entities/Font';
+import { getSkeletonWidth } from '$shared/lib/utils';
 import {
     Button,
     Label,
+    Skeleton,
 } from '$shared/ui';
 import DotIcon from '@lucide/svelte/icons/dot';
 import {
@@ -84,6 +86,20 @@ function handleSelect(font: UnifiedFont) {
             itemHeight={45}
             class="bg-transparent min-h-0 h-full scroll-stable py-2 pl-6 pr-4"
         >
+            {#snippet skeleton()}
+                {#each { length: 12 } as _, i (i)}
+                    <div class="w-full px-4 py-3 flex items-center justify-between border border-transparent bg-white/50 dark:bg-[#1e1e1e]/50">
+                        <div class="flex-1 flex items-center gap-3">
+                            <Skeleton
+                                class="h-4 bg-neutral-200/70 dark:bg-neutral-800/70"
+                                style="width: {getSkeletonWidth(i)}"
+                            />
+                        </div>
+                        <Skeleton class="w-1.5 h-1.5 rounded-full bg-neutral-200/70 dark:bg-neutral-800/70" />
+                    </div>
+                {/each}
+            {/snippet}
+
             {#snippet children({ item: font, index })}
                 {@const isSelectedA = font.id === comparisonStore.fontA?.id}
                 {@const isSelectedB = font.id === comparisonStore.fontB?.id}
@@ -96,7 +112,12 @@ function handleSelect(font: UnifiedFont) {
                     class="w-full px-3 md:px-4 py-2.5 md:py-3 flex !justify-between text-left text-sm"
                     iconPosition="right"
                 >
-                    <FontApplicator {font}>{font.name}</FontApplicator>
+                    <FontApplicator {font}>
+                        {#snippet skeleton()}
+                            <Skeleton class="h-4 w-32 bg-neutral-200/70 dark:bg-neutral-800/70" />
+                        {/snippet}
+                        {font.name}
+                    </FontApplicator>
 
                     {#snippet icon()}
                         {#if active}