+ This component is working normally. Click the button below to trigger an error. +
++ This content was "loaded" asynchronously and is now displayed. +
++ Demonstration of error boundaries, loading states, and skeleton components +
++ Click "Show Skeletons" to see skeleton loading components in action. +
++ {description} +
+ + {/* Error Details (Development Mode) */} + {process.env.NODE_ENV === 'development' && ( ++ Error ID: {errorId} +
++ Type: {errorType} | Severity: {severity} +
++ {error.message} +
+ {errorInfo.componentStack && ( +
+ {errorInfo.componentStack}
+
+
+ If this problem persists, please{' '}
+
+ contact support
+
+ {' '}with error ID: {errorId}
+
+ {text} +
+ )} ++ The page is taking longer than expected to load. This might be due to a slow connection or server issues. +
+ ++ If this problem persists, please check your internet connection or{' '} + + contact support + +
+( + Component: React.ComponentType
,
+ suspenseProps?: Omit
+ {errorMessage}
+ {details}
+ Current URL: {location.pathname + location.search}
+
+ Error Type: {type}
+
+ Timestamp: {new Date().toISOString()}
+
+ Need help?{' '}
+
+ Contact Support
+
+ {' '}or check our{' '}
+
+ Help Center
+
+
+ {Array.from({ length: lines }).map((_, index) => (
+
+ );
+}
+
+/**
+ * Skeleton for avatars and circular elements
+ */
+export function AvatarSkeleton({
+ size = 'md',
+ className
+}: {
+ size?: 'sm' | 'md' | 'lg' | 'xl';
+ className?: string;
+}) {
+ const sizeClasses = {
+ sm: 'w-8 h-8',
+ md: 'w-12 h-12',
+ lg: 'w-16 h-16',
+ xl: 'w-24 h-24'
+ };
+
+ return (
+
+ {/* Loading indicator */}
+ {loadingText && (
+
+ );
+}
+
+/**
+ * Skeleton for list items
+ */
+function ListSkeleton({ loadingText, className }: SkeletonLayoutProps) {
+ return (
+
+
+ )}
+
+ {/* Card skeletons */}
+
+ {Array.from({ length: 6 }).map((_, index) => (
+
+
+ {/* Header */}
+
+
+
+
+ {/* Content */}
+
+
+
+
+
+ {/* Footer */}
+
+
+
+ {/* Loading indicator */}
+ {loadingText && (
+
+ );
+}
+
+/**
+ * Skeleton for tables
+ */
+function TableSkeleton({ loadingText, className }: SkeletonLayoutProps) {
+ return (
+
+
+ )}
+
+ {/* List items */}
+ {Array.from({ length: 8 }).map((_, index) => (
+
+
+ ))}
+
+
+
+
+
+ {/* Loading indicator */}
+ {loadingText && (
+
+ );
+}
+
+/**
+ * Skeleton for full page layouts
+ */
+function PageSkeleton({ loadingText, className }: SkeletonLayoutProps) {
+ return (
+
+
+ )}
+
+
+
+
+ {/* Table rows */}
+
+ {Array.from({ length: 5 }).map((_, index) => (
+
+
+ {Array.from({ length: 10 }).map((_, rowIndex) => (
+
+
+
+ ))}
+
+ {Array.from({ length: 5 }).map((_, colIndex) => {
+ if (colIndex === 0) {
+ return (
+
+
+
+ );
+ }
+ if (colIndex === 4) {
+ return (
+
+
+ );
+ }
+ return
+ {/* Header skeleton */}
+
+ );
+}
+
+/**
+ * Skeleton for form layouts
+ */
+function FormSkeleton({ loadingText, className }: SkeletonLayoutProps) {
+ return (
+
+
+
+ {/* Main content area */}
+
+
+
+
+
+ {Array.from({ length: 4 }).map((_, index) => (
+
+
+
+
+ {/* Loading indicator */}
+ {loadingText && (
+
+
+
+ )}
+
+ {/* Page title and actions */}
+
+
+
+ {/* Stats cards */}
+
+
+
+
+
+ {Array.from({ length: 4 }).map((_, index) => (
+
+
+ {/* Main content */}
+
+
+
+ {/* Primary content */}
+
+
+
+
+ {/* Sidebar */}
+
+
+
+
+
+ {Array.from({ length: 6 }).map((_, index) => (
+
+
+
+ ))}
+
+
+
+
+
+
+
+ {Array.from({ length: 4 }).map((_, index) => (
+
+
+
+ ))}
+
+
+
+ {/* Loading indicator */}
+ {loadingText && (
+
+ );
+}
+
+// Export all skeleton components
+export const Skeleton = {
+ Base: BaseSkeleton,
+ Text: TextSkeleton,
+ Avatar: AvatarSkeleton,
+ Button: ButtonSkeleton,
+ Card: CardSkeleton,
+ List: ListSkeleton,
+ Table: TableSkeleton,
+ Page: PageSkeleton,
+ Form: FormSkeleton
+};
+
+export default Skeleton;
\ No newline at end of file
diff --git a/reactrebuild0825/src/components/loading/index.ts b/reactrebuild0825/src/components/loading/index.ts
new file mode 100644
index 0000000..47cb15b
--- /dev/null
+++ b/reactrebuild0825/src/components/loading/index.ts
@@ -0,0 +1,24 @@
+/**
+ * Loading Components
+ *
+ * Comprehensive collection of loading states and skeleton components
+ * with glassmorphism styling and accessibility features.
+ */
+
+// Main loading components
+export { LoadingSpinner, PulseLoader, ShimmerLoader, DotsLoader } from './LoadingSpinner';
+export type { LoadingSpinnerProps } from './LoadingSpinner';
+
+// Suspense and route loading
+export { RouteSuspense, withRouteSuspense, useLoadingTimeout } from './RouteSuspense';
+export type { RouteSuspenseProps } from './RouteSuspense';
+
+// Skeleton components
+export {
+ BaseSkeleton,
+ TextSkeleton,
+ AvatarSkeleton,
+ ButtonSkeleton,
+ Skeleton
+} from './Skeleton';
+export type { SkeletonProps, SkeletonLayoutProps } from './Skeleton';
\ No newline at end of file
diff --git a/reactrebuild0825/src/pages/ErrorPage.tsx b/reactrebuild0825/src/pages/ErrorPage.tsx
new file mode 100644
index 0000000..5048af9
--- /dev/null
+++ b/reactrebuild0825/src/pages/ErrorPage.tsx
@@ -0,0 +1,357 @@
+import React from 'react';
+
+import { useNavigate, useLocation } from 'react-router-dom';
+
+import { clsx } from 'clsx';
+
+import { AppLayout } from '../components/layout/AppLayout';
+import { Alert } from '../components/ui/Alert';
+import { Button } from '../components/ui/Button';
+import { Card } from '../components/ui/Card';
+
+export type ErrorPageType = '404' | '403' | '500' | 'network' | 'timeout' | 'maintenance';
+
+export interface ErrorPageProps {
+ type?: ErrorPageType;
+ title?: string;
+ message?: string;
+ details?: string;
+ showRetry?: boolean;
+ showHome?: boolean;
+ showBack?: boolean;
+ customActions?: React.ReactNode;
+ className?: string;
+}
+
+/**
+ * Get error configuration based on error type
+ */
+interface ErrorConfig {
+ title: string;
+ message: string;
+ icon: React.ReactNode;
+ showRetry?: boolean;
+ showHome?: boolean;
+ showBack?: boolean;
+}
+
+function getErrorConfig(type: ErrorPageType): ErrorConfig {
+ const configs: Record
+
+ )}
+
+
+ {/* Form title */}
+
+
+ {Array.from({ length: 6 }).map((_, index) => (
+
+
+ {/* Text area */}
+
+
+ ))}
+
+
+
+ {/* Form actions */}
+
+
+
+
+
+ {/* Error Icon */}
+
+
+
+
+
+ {/* Error Code */}
+ {(type === '404' || type === '403' || type === '500') && (
+
+ {type}
+
+ )}
+
+ {/* Error Title */}
+
+ {errorTitle}
+
+
+ {/* Error Message */}
+
+
+ )}
+
+ {/* Action Buttons */}
+
+ Development Details
+
+
+
+
+ {shouldShowRetry && (
+
+ )}
+
+ {shouldShowHome && (
+
+ )}
+
+ {shouldShowBack && (
+
+ )}
+
+ {customActions}
+
+
+ {/* Support Information */}
+
+
+