diff --git a/src/App.jsx b/src/App.jsx index 56d854d..cb99769 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,21 +1,66 @@ -import React from 'react' +import React, { Suspense, Component } from 'react' import { Routes, Route, Navigate } from 'react-router-dom' import { AppProvider } from './context/AppContext' import { ThemeProvider } from './context/ThemeContext' import Navbar from './components/Navbar' import RateLimitBanner from './components/RateLimitBanner' -import HomePage from './pages/HomePage' -import OverviewPage from './pages/OverviewPage' -import RepositoriesPage from './pages/RepositoriesPage' -import ContributorsPage from './pages/ContributorsPage' -import ContributorProfilePage from './pages/ContributorProfilePage' -import NetworkPage from './pages/NetworkPage' -import AnalyticsPage from './pages/AnalyticsPage' -import GovernancePage from './pages/GovernancePage' -import SettingsPage from './pages/SettingsPage' -import Footer from './components/layout/Footer' -import Support from './pages/Support' +import Footer from './components/layout/Footer' import RequireAnalysis from './components/RequireAnalysis' +import { Spinner } from './components/UI' + +const HomePage = React.lazy(() => import('./pages/HomePage')) +const OverviewPage = React.lazy(() => import('./pages/OverviewPage')) +const RepositoriesPage = React.lazy(() => import('./pages/RepositoriesPage')) +const ContributorsPage = React.lazy(() => import('./pages/ContributorsPage')) +const ContributorProfilePage = React.lazy(() => import('./pages/ContributorProfilePage')) +const NetworkPage = React.lazy(() => import('./pages/NetworkPage')) +const AnalyticsPage = React.lazy(() => import('./pages/AnalyticsPage')) +const GovernancePage = React.lazy(() => import('./pages/GovernancePage')) +const SettingsPage = React.lazy(() => import('./pages/SettingsPage')) +const ROUTE_STRINGS = { + ERROR_TITLE: 'Unable to load page', + ERROR_MESSAGE: 'An error occurred while loading this page.', + RELOAD_BUTTON: 'Reload Page', + LOADING_LABEL: 'Loading page', +} + +class ErrorBoundary extends Component { + constructor(props) { + super(props) + this.state = { hasError: false } + } + + static getDerivedStateFromError() { + return { hasError: true } + } + + componentDidCatch(error, errorInfo) { + console.error('Route load error:', error, errorInfo) + } + + render() { + if (this.state.hasError) { + return ( +
+

{ROUTE_STRINGS.ERROR_TITLE}

+

{ROUTE_STRINGS.ERROR_MESSAGE}

+ +
+ ) + } + return this.props.children + } +} + +function PageLoader() { + return ( +
+ +
+ ) +} function Layout({ children }) { return ( @@ -31,19 +76,23 @@ function Layout({ children }) { function AppContent() { return ( - - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - + + }> + + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + + + ) }