import React from 'react';
import { Outlet } from 'react-router-dom';
import Navbar from './components/Navbar';
import PageHeader from './components/PageHeader';
import Loading from './components/Loading';
import './App.css';

function App() {
    return (
        <div className="app-shell">
            <Navbar />
            <div className="app-content">
                <main className="site-main">
                    <PageHeader />
                    <React.Suspense fallback={<div className="suspend-loading"><Loading /></div>}>
                        <Outlet />
                    </React.Suspense>
                </main>
            </div>
        </div>
    );
}

export default App;
