feat(FontList): use getSkeletonWidth utility for skeleton row widths

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`;
+}

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';