feat: skeletons

src/components/Skeleton/index.css.ts

@@ -0,0 +1,13 @@
+import { slateDarkA } from '@radix-ui/colors';
+import { keyframes, style } from '@vanilla-extract/css';
+
+const animation = keyframes({
+  '0%': { backgroundColor: slateDarkA.slateA2 },
+  '50%': { backgroundColor: slateDarkA.slateA3 },
+  '100%': { backgroundColor: slateDarkA.slateA2 },
+});
+
+export const skeleton = style({
+  borderRadius: 8,
+  animation: `${animation} 2s ease-in-out infinite`,
+});

src/components/Skeleton/index.tsx

@@ -0,0 +1,6 @@
+import { ComponentProps } from 'react';
+import { skeleton } from './index.css';
+
+export function Skeleton({ className, ...props }: ComponentProps<'div'>) {
+  return <div {...props} className={`${className} ${skeleton}`} />;
+}