feat: vollständiges HeroUI v3 Redesign — Types, Utils, Layout, Sections, Dark SaaS Design

frontend/src/components/shared/LoadingSkeleton.tsx

@@ -0,0 +1,34 @@
+import { Card, CardContent } from '@heroui/react';
+import type { ReactNode } from 'react';
+
+type Props = {
+  lines?: number;
+  children?: ReactNode;
+};
+
+export function LoadingSkeleton({ lines = 3, children }: Props) {
+  if (children) {
+    return (
+      <div className="flex flex-col gap-3">
+        {Array.from({ length: lines }).map((_, i) => (
+          <Card key={i} className="animate-pulse border border-default-100 bg-default-50/30">
+            <CardContent className="p-4">{children}</CardContent>
+          </Card>
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-3">
+      {Array.from({ length: lines }).map((_, i) => (
+        <Card key={i} className="animate-pulse border border-default-100 bg-default-50/30">
+          <CardContent className="p-5">
+            <div className="h-4 w-3/4 rounded-lg bg-default-200/50" />
+            {i < 2 && <div className="mt-3 h-3 w-1/2 rounded-lg bg-default-200/30" />}
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+  );
+}