feat: introduce the Skeleton component

src/components/Skeleton/Skeleton.module.css

@@ -0,0 +1,24 @@
+.skeleton {
+    display: block;
+    animation: loading 2s infinite;
+    background-color: var(--color-secondary-background);
+    pointer-events: none;
+}
+
+.skeleton::before {
+    content: '\00a0';
+}
+
+@keyframes loading {
+    0% {
+        background-color: var(--color-secondary-background);
+    }
+
+    50% {
+        background-color: var(--color-tertiary-background);
+    }
+
+    100% {
+        background-color: var(--color-secondary-background);
+    }
+}

src/components/Skeleton/Skeleton.tsx

@@ -0,0 +1,13 @@
+import clsx from 'clsx'
+
+import styles from './Skeleton.module.css'
+
+type SkeletonProps = {
+    className?: string
+}
+
+export function Skeleton({ className }: SkeletonProps) {
+    return (
+        <span className={clsx(styles.skeleton, className)} />
+    )
+}

src/components/Skeleton/index.ts

@@ -0,0 +1 @@
+export { Skeleton } from './Skeleton'