cleanup

apps/frontend/src/components/ui/skeleton.tsx

@@ -0,0 +1,50 @@
+import { JSX } from "solid-js";
+
+interface SkeletonProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  width?: string;
+  height?: string;
+  circle?: boolean;
+}
+
+export function Skeleton(props: SkeletonProps) {
+  const { width, height, circle, class: className, ...rest } = props;
+
+  return (
+    <div
+      {...rest}
+      class={[
+        "animate-pulse bg-canvas-muted rounded-lg",
+        circle ? "rounded-full" : "",
+        className || "",
+      ].join(" ")}
+      style={{
+        width: width || "100%",
+        height: height || "1rem",
+      }}
+    />
+  );
+}
+
+export function SkeletonCard() {
+  return (
+    <div class="p-6 rounded-card border border-border bg-canvas/50 space-y-4">
+      <Skeleton width="60%" height="1.5rem" />
+      <Skeleton width="100%" height="1rem" />
+      <Skeleton width="80%" height="1rem" />
+    </div>
+  );
+}
+
+export function SkeletonText(props: { lines?: number }) {
+  const lines = props.lines || 3;
+  return (
+    <div class="space-y-2">
+      {Array.from({ length: lines }).map((_, i) => (
+        <Skeleton
+          width={i === lines - 1 ? "75%" : "100%"}
+          height="1rem"
+        />
+      ))}
+    </div>
+  );
+}