(
WrappedComponent: React.ComponentType,
- fallback?: ReactNode
+ fallback?: ReactNode,
+ context?: Record
): React.ComponentType {
const name = WrappedComponent.name !== '' ? WrappedComponent.name : undefined
const displayName = WrappedComponent.displayName ?? name ?? 'Component'
const ComponentWithErrorBoundary = (props: P) => (
-
+
)
diff --git a/frontends/nextjs/src/components/LoadingIndicator.tsx b/frontends/nextjs/src/components/LoadingIndicator.tsx
new file mode 100644
index 000000000..1a750cf0f
--- /dev/null
+++ b/frontends/nextjs/src/components/LoadingIndicator.tsx
@@ -0,0 +1,294 @@
+'use client'
+
+import React from 'react'
+
+/**
+ * Loading Indicator Component
+ *
+ * Shows progress during async operations.
+ * Supports different display modes: spinner, bar, dots, etc.
+ */
+
+export interface LoadingIndicatorProps {
+ /**
+ * Whether to show the loading indicator
+ * @default true
+ */
+ show?: boolean
+
+ /**
+ * Loading message to display
+ */
+ message?: string
+
+ /**
+ * Variant: 'spinner', 'bar', 'dots', 'pulse'
+ * @default 'spinner'
+ */
+ variant?: 'spinner' | 'bar' | 'dots' | 'pulse'
+
+ /**
+ * Size of the indicator: 'small', 'medium', 'large'
+ * @default 'medium'
+ */
+ size?: 'small' | 'medium' | 'large'
+
+ /**
+ * Whether to show full page overlay
+ * @default false
+ */
+ fullPage?: boolean
+
+ /**
+ * CSS class name for custom styling
+ */
+ className?: string
+
+ /**
+ * Custom style overrides
+ */
+ style?: React.CSSProperties
+}
+
+export function LoadingIndicator({
+ show = true,
+ message,
+ variant = 'spinner',
+ size = 'medium',
+ fullPage = false,
+ className,
+ style,
+}: LoadingIndicatorProps) {
+ if (!show) {
+ return null
+ }
+
+ const sizeMap = {
+ small: '24px',
+ medium: '40px',
+ large: '60px',
+ }
+
+ const containerStyle: React.CSSProperties = fullPage
+ ? {
+ position: 'fixed',
+ top: 0,
+ left: 0,
+ right: 0,
+ bottom: 0,
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ backgroundColor: 'rgba(0, 0, 0, 0.5)',
+ zIndex: 9999,
+ ...style,
+ }
+ : {
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ justifyContent: 'center',
+ padding: '20px',
+ ...style,
+ }
+
+ return (
+
+ {variant === 'spinner' &&
}
+ {variant === 'bar' &&
}
+ {variant === 'dots' &&
}
+ {variant === 'pulse' &&
}
+
+ {message && (
+
+ {message}
+
+ )}
+
+ {[0, 1, 2].map((i) => (
+
+ ))}
+
Error loading content
+ }
+
+ return <>{children}
+}
diff --git a/frontends/nextjs/src/components/Skeleton.tsx b/frontends/nextjs/src/components/Skeleton.tsx
new file mode 100644
index 000000000..afd29a647
--- /dev/null
+++ b/frontends/nextjs/src/components/Skeleton.tsx
@@ -0,0 +1,177 @@
+'use client'
+
+import React from 'react'
+
+/**
+ * Skeleton Component for Loading States
+ *
+ * Creates animated placeholder content while data is loading.
+ * Use for tables, cards, lists, and other async-loaded content.
+ */
+
+export interface SkeletonProps {
+ /**
+ * Width of the skeleton (can be percentage or fixed value)
+ * @default '100%'
+ */
+ width?: string | number
+
+ /**
+ * Height of the skeleton (can be percentage or fixed value)
+ * @default '20px'
+ */
+ height?: string | number
+
+ /**
+ * Border radius for rounded corners
+ * @default '4px'
+ */
+ borderRadius?: string | number
+
+ /**
+ * Whether to show animation
+ * @default true
+ */
+ animate?: boolean
+
+ /**
+ * CSS class name for custom styling
+ */
+ className?: string
+
+ /**
+ * Custom style overrides
+ */
+ style?: React.CSSProperties
+}
+
+/**
+ * Single skeleton line/block
+ */
+export function Skeleton({
+ width = '100%',
+ height = '20px',
+ borderRadius = '4px',
+ animate = true,
+ className,
+ style,
+}: SkeletonProps) {
+ const widthStyle = typeof width === 'number' ? `${width}px` : width
+ const heightStyle = typeof height === 'number' ? `${height}px` : height
+ const radiusStyle = typeof borderRadius === 'number' ? `${borderRadius}px` : borderRadius
+
+ return (
+
+ )
+}
+
+/**
+ * Table skeleton with rows and columns
+ */
+export interface TableSkeletonProps {
+ rows?: number
+ columns?: number
+ className?: string
+}
+
+export function TableSkeleton({ rows = 5, columns = 4, className }: TableSkeletonProps) {
+ return (
+
+
+
+
+ {Array.from({ length: columns }).map((_, i) => (
+ |
+
+ |
+ ))}
+
+
+
+ {Array.from({ length: rows }).map((_, rowIdx) => (
+
+ {Array.from({ length: columns }).map((_, colIdx) => (
+ |
+
+ |
+ ))}
+
+ ))}
+
+
+
+ {Array.from({ length: count }).map((_, i) => (
+
+
+
+
+
+
+ ))}
+
+ {Array.from({ length: count }).map((_, i) => (
+
+ ))}
+