add custom skeleton component, remove dependency

src/shared/components/skeleton/skeleton.module.css

@@ -13,6 +13,28 @@
 
     width: 100%;
     height: 100%;
+    background: linear-gradient(
+        90deg,
+        var(--base-color) 0%,
+        var(--highlight-color) 50%,
+        var(--base-color) 100%
+    );
+    background-size: 200% 100%;
+    border-radius: var(--skeleton-border-radius, 0.25rem);
+}
+
+.skeleton.animated {
+    animation: shimmer var(--animation-duration) ease-in-out infinite;
+}
+
+@keyframes shimmer {
+    0% {
+        background-position: 200% 0;
+    }
+
+    100% {
+        background-position: -200% 0;
+    }
 }
 
 .skeleton-container {
@@ -22,6 +44,31 @@
     height: 100%;
 }
 
-.centered {
+.skeleton-container.inline {
+    display: inline-flex;
+}
+
+.skeleton-container.centered {
     justify-content: center;
 }
+
+.skeleton-container.rtl {
+    flex-direction: row-reverse;
+}
+
+.skeleton-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    align-items: stretch;
+    width: 100%;
+    height: 100%;
+}
+
+.skeleton-wrapper.inline {
+    display: inline-flex;
+}
+
+.skeleton-wrapper.rtl {
+    direction: rtl;
+}

src/shared/components/skeleton/skeleton.tsx

@@ -1,11 +1,8 @@
 import clsx from 'clsx';
 import { type CSSProperties, memo } from 'react';
-import RSkeleton from 'react-loading-skeleton';
 
 import styles from './skeleton.module.css';
 
-import 'react-loading-skeleton/dist/skeleton.css';
-
 interface SkeletonProps {
     baseColor?: string;
     borderRadius?: string;
@@ -26,8 +23,8 @@ export function BaseSkeleton({
     borderRadius,
     className,
     containerClassName,
-    count,
-    direction,
+    count = 1,
+    direction = 'ltr',
     enableAnimation = false,
     height,
     inline,
@@ -35,22 +32,40 @@ export function BaseSkeleton({
     style,
     width,
 }: SkeletonProps) {
+    const skeletonStyle: CSSProperties = {
+        ...style,
+        ...(baseColor && { ['--base-color' as string]: baseColor }),
+        ...(borderRadius && { ['--skeleton-border-radius' as string]: borderRadius }),
+        ...(height !== undefined && {
+            height: typeof height === 'number' ? `${height}px` : height,
+        }),
+        ...(width !== undefined && { width: typeof width === 'number' ? `${width}px` : width }),
+    };
+
+    const containerClasses = clsx(styles.skeletonContainer, containerClassName, {
+        [styles.centered]: isCentered,
+        [styles.inline]: inline,
+        [styles.rtl]: direction === 'rtl',
+    });
+
+    const skeletonClasses = clsx(styles.skeleton, className, {
+        [styles.animated]: enableAnimation,
+    });
+
+    if (count <= 1) {
+        return (
+            <div className={containerClasses}>
+                <div className={skeletonClasses} style={skeletonStyle} />
+            </div>
+        );
+    }
+
     return (
-        <RSkeleton
-            baseColor={baseColor}
-            borderRadius={borderRadius}
-            className={clsx(styles.skeleton, className)}
-            containerClassName={clsx(styles.skeletonContainer, containerClassName, {
-                [styles.centered]: isCentered,
-            })}
-            count={count}
-            direction={direction}
-            enableAnimation={enableAnimation}
-            height={height}
-            inline={inline}
-            style={style}
-            width={width}
-        />
+        <div className={clsx(containerClasses, styles.skeletonWrapper)} dir={direction}>
+            {Array.from({ length: count }, (_, i) => (
+                <div className={skeletonClasses} key={i} style={skeletonStyle} />
+            ))}
+        </div>
     );
 }