Import source: cshare-app/src/components/SkeletonLoader

Import the existing local project snapshot. This commit organizes existing files; it does not represent newly developed functionality.
2026-09-18 23:14:16 +03:30
parent 7d854b0d24
commit 0b36b15dfa
1 changed files with 115 additions and 0 deletions
@@ -0,0 +1,115 @@
+export function Skeleton({ width, height, radius = 'var(--radius-sm)', style = {} }) {
+  return (
+    <div
+      className="skeleton"
+      style={{
+        width: width ?? '100%',
+        height: height ?? '16px',
+        borderRadius: radius,
+        ...style,
+      }}
+    />
+  );
+}
+
+export function SkeletonCard({ lines = 3, hasAvatar = false }) {
+  return (
+    <div style={{ padding: '24px' }}>
+      {hasAvatar && (
+        <div style={{ display: 'flex', alignItems: 'center', gap: '12px', marginBottom: '16px' }}>
+          <Skeleton width="40px" height="40px" radius="50%" />
+          <div style={{ flex: 1 }}>
+            <Skeleton width="60%" height="14px" style={{ marginBottom: '6px' }} />
+            <Skeleton width="40%" height="12px" />
+          </div>
+        </div>
+      )}
+      {Array.from({ length: lines }).map((_, i) => (
+        <Skeleton
+          key={i}
+          width={i === lines - 1 ? '45%' : '100%'}
+          height="12px"
+          style={{ marginBottom: i < lines - 1 ? '8px' : 0 }}
+        />
+      ))}
+    </div>
+  );
+}
+
+export function SkeletonStatCards({ count = 3 }) {
+  return (
+    <div style={{
+      display: 'grid',
+      gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
+      gap: '16px',
+    }}>
+      {Array.from({ length: count }).map((_, i) => (
+        <div
+          key={i}
+          className="card"
+          style={{ padding: '20px 24px' }}
+        >
+          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '12px' }}>
+            <Skeleton width="80px" height="10px" />
+            <Skeleton width="32px" height="32px" radius="var(--radius-sm)" />
+          </div>
+          <Skeleton width="60%" height="36px" style={{ marginBottom: '8px' }} />
+          <Skeleton width="90px" height="12px" />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export function SkeletonFileRows({ count = 5 }) {
+  return (
+    <div style={{
+      background: 'var(--bg-elevated)',
+      border: '1px solid var(--border-subtle)',
+      borderRadius: 'var(--radius-lg)',
+      overflow: 'hidden',
+    }}>
+      <div style={{
+        display: 'grid',
+        gridTemplateColumns: '1fr 100px 120px 80px 80px 120px',
+        gap: '12px',
+        padding: '14px 20px',
+        borderBottom: '1px solid var(--border-subtle)',
+      }}>
+        {['File', 'Size', 'Expiry', 'Views', 'DL', 'Actions'].map((h) => (
+          <Skeleton key={h} width="100%" height="10px" />
+        ))}
+      </div>
+      {Array.from({ length: count }).map((_, i) => (
+        <div
+          key={i}
+          style={{
+            display: 'grid',
+            gridTemplateColumns: '1fr 100px 120px 80px 80px 120px',
+            gap: '12px',
+            alignItems: 'center',
+            padding: '16px 20px',
+            borderBottom: '1px solid var(--border-subtle)',
+          }}
+        >
+          <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+            <Skeleton width="36px" height="36px" radius="var(--radius-sm)" />
+            <div style={{ flex: 1 }}>
+              <Skeleton width="70%" height="14px" style={{ marginBottom: '4px' }} />
+              <Skeleton width="40%" height="10px" />
+            </div>
+          </div>
+          <Skeleton width="60px" height="12px" />
+          <Skeleton width="80px" height="12px" />
+          <Skeleton width="24px" height="12px" />
+          <Skeleton width="24px" height="12px" />
+          <div style={{ display: 'flex', gap: '4px' }}>
+            <Skeleton width="28px" height="28px" radius="var(--radius-sm)" />
+            <Skeleton width="28px" height="28px" radius="var(--radius-sm)" />
+            <Skeleton width="28px" height="28px" radius="var(--radius-sm)" />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}