1 line
1.2 KiB
TypeScript

import React,{lazy,Suspense}from'react';import{createRoot}from'react-dom/client';import'./styles.css';const App=lazy(()=>import('./App'));class ErrorBoundary extends React.Component<{children:React.ReactNode},{hasError:boolean;error?:Error}>{constructor(props:{children:React.ReactNode}){super(props);this.state={hasError:false}}static getDerivedStateFromError(error:Error){return{hasError:true,error}}componentDidCatch(error:Error,errorInfo:React.ErrorInfo){console.error('ErrorBoundary caught:',error,errorInfo)}render(){if(this.state.hasError){return(<div className="error-boundary"><h1>Something went wrong</h1><p>{this.state.error?.message}</p><button onClick={()=>window.location.reload()}>Reload</button></div>)}return this.props.children}}const LoadingSkeleton=()=>(<div className="loading-skeleton"><div className="skeleton-header shimmer"/><div className="skeleton-content"><div className="skeleton-card shimmer"/><div className="skeleton-card shimmer"/><div className="skeleton-card shimmer"/></div></div>);const root=createRoot(document.getElementById('root')!);root.render(<React.StrictMode><ErrorBoundary><Suspense fallback={<LoadingSkeleton/>}><App/></Suspense></ErrorBoundary></React.StrictMode>);