diff --git a/frontend/opsce/components/Skeletons/index.tsx b/frontend/opsce/components/Skeletons/index.tsx new file mode 100644 index 00000000..432331f7 --- /dev/null +++ b/frontend/opsce/components/Skeletons/index.tsx @@ -0,0 +1,134 @@ +'use client'; + +/** + * Reusable skeleton loading components for all major pages. + * Uses Tailwind's animate-pulse utility for a consistent loading experience. + */ + +// ── TableSkeleton ───────────────────────────────────────────── +export function TableSkeleton({ rows = 5, cols = 5 }: { rows?: number; cols?: number }) { + return ( +
+ {/* Header */} +
+
+ {Array.from({ length: cols }).map((_, i) => ( +
+ ))} +
+
+ {/* Rows */} + {Array.from({ length: rows }).map((_, rowIdx) => ( +
+
+ {Array.from({ length: cols }).map((_, colIdx) => ( +
+ ))} +
+
+ ))} +
+ ); +} + +// ── CardSkeleton ────────────────────────────────────────────── +export function CardSkeleton({ count = 4 }: { count?: number }) { + return ( +
+ {Array.from({ length: count }).map((_, i) => ( +
+
+
+
+ ))} +
+ ); +} + +// ── DetailPageSkeleton ──────────────────────────────────────── +export function DetailPageSkeleton() { + return ( +
+ {/* Back button */} +
+ + {/* Header card */} +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + {/* Tabs */} +
+ {Array.from({ length: 5 }).map((_, i) => ( +
+ ))} +
+ + {/* Content grid */} +
+ {Array.from({ length: 2 }).map((_, i) => ( +
+
+ {Array.from({ length: 6 }).map((_, j) => ( +
+
+
+
+ ))} +
+ ))} +
+
+ ); +} + +// ── FormSkeleton ────────────────────────────────────────────── +export function FormSkeleton({ fields = 4 }: { fields?: number }) { + return ( +
+
+ {Array.from({ length: fields }).map((_, i) => ( +
+
+
+
+ ))} +
+
+ ); +} + +// ── ListSkeleton ────────────────────────────────────────────── +export function ListSkeleton({ items = 6 }: { items?: number }) { + return ( +
+ {Array.from({ length: items }).map((_, i) => ( +
+
+
+
+
+
+
+ ))} +
+ ); +} diff --git a/frontend/opsce/components/index.ts b/frontend/opsce/components/index.ts new file mode 100644 index 00000000..77ef0287 --- /dev/null +++ b/frontend/opsce/components/index.ts @@ -0,0 +1,7 @@ +export { + TableSkeleton, + CardSkeleton, + DetailPageSkeleton, + FormSkeleton, + ListSkeleton, +} from './Skeletons';