hero.title.beforehero.title.highlighthero.title.after

import React, { useState, useEffect } from 'react';
            import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
            import axios from 'axios';
            
            import Header from './components/Header';
            import Dashboard from './pages/Dashboard';
            import Analytics from './pages/Analytics';
            import Settings from './pages/Settings';
            import Login from './pages/Login';
            
            // Authentication context
            import { AuthProvider } from './context/AuthContext';
            import PrivateRoute from './components/PrivateRoute';
            
            const App = () => {
              const [isLoading, setIsLoading] = useState(true);
              
              useEffect(() => {
                // Simulating API load time
                const timer = setTimeout(() => {
                  setIsLoading(false);
                }, 1500);
                
                return () => {
                  clearTimeout(timer);
                };
              }, []);
            
              if (isLoading) {
                return (
                  <div className="loading-screen">
                    <div className="spinner"></div>
                  </div>
                );
              }
            
              return (
                <AuthProvider>
                  <Router>
                    <div className="app">
                      <Header />
                      <main className="main-content">
                        <Routes>
                          <Route path="/login" element={<Login />} />
                          <Route path="/" element={
                            <PrivateRoute>
                              <Dashboard />
                            </PrivateRoute>
                          } />
                          <Route path="/analytics" element={
                            <PrivateRoute>
                              <Analytics />
                            </PrivateRoute>
                          } />
                          <Route path="/settings" element={
                            <PrivateRoute>
                              <Settings />
                            </PrivateRoute>
                          } />
                        </Routes>
                      </main>
                    </div>
                  </Router>
                </AuthProvider>
              );
            };
            
            export default App;