modified: src/App.jsx

modified:   src/components/AppShell.jsx
modified:   src/components/Brand.jsx
modified:   src/index.css
modified:   src/pages/MedicalRecordsPage.jsx
modified:   src/pages/PatientsPage.jsx
modified:   src/pages/ReportsPage.jsx
modified:   src/pages/SettingsPage.jsx
modified:   src/repositories/authRepository.js
modified:   src/repositories/professionalRepository.js
modified:   src/repositories/repositoryUtils.js
modified:   src/repositories/settingsRepository.js
modified:   src/utils/theme.js

src/App.jsx

@@ -1,30 +1,36 @@
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { lazy, Suspense, useCallback, useEffect, useMemo, useState } from 'react'
 
 import './App.css'
 import { AppShell } from './components/AppShell.jsx'
 import { canAccess } from './config/permissions.js'
 import { useAuth } from './hooks/useAuth.js'
-import { AgendaPage } from './pages/AgendaPage.jsx'
-import { AnalyticsPage } from './pages/AnalyticsPage.jsx'
 import { ForgotPasswordPage, LoginPage, RegisterPage } from './pages/AuthPages.jsx'
-import { HomePage } from './pages/HomePage.jsx'
-import { MedicalRecordsPage } from './pages/MedicalRecordsPage.jsx'
-import { MessagesPage } from './pages/MessagesPage.jsx'
 import { NotFoundPage } from './pages/NotFoundPage.jsx'
-import { PatientDetailPage, PatientsPage } from './pages/PatientsPage.jsx'
-import { ProfilePage } from './pages/ProfilePage.jsx'
-import { ReportsPage } from './pages/ReportsPage.jsx'
-import { SettingsPage } from './pages/SettingsPage.jsx'
-import { UsersPage } from './pages/UsersPage.jsx'
-import { VisitsPage } from './pages/VisitsPage.jsx'
 import { patientRepository } from './repositories/patientRepository.js'
 
+const AgendaPage = lazyPage(() => import('./pages/AgendaPage.jsx'), 'AgendaPage')
+const AnalyticsPage = lazyPage(() => import('./pages/AnalyticsPage.jsx'), 'AnalyticsPage')
+const HomePage = lazyPage(() => import('./pages/HomePage.jsx'), 'HomePage')
+const MedicalRecordsPage = lazyPage(() => import('./pages/MedicalRecordsPage.jsx'), 'MedicalRecordsPage')
+const MessagesPage = lazyPage(() => import('./pages/MessagesPage.jsx'), 'MessagesPage')
+const PatientDetailPage = lazyPage(() => import('./pages/PatientsPage.jsx'), 'PatientDetailPage')
+const PatientsPage = lazyPage(() => import('./pages/PatientsPage.jsx'), 'PatientsPage')
+const ProfilePage = lazyPage(() => import('./pages/ProfilePage.jsx'), 'ProfilePage')
+const ReportsPage = lazyPage(() => import('./pages/ReportsPage.jsx'), 'ReportsPage')
+const SettingsPage = lazyPage(() => import('./pages/SettingsPage.jsx'), 'SettingsPage')
+const UsersPage = lazyPage(() => import('./pages/UsersPage.jsx'), 'UsersPage')
+const VisitsPage = lazyPage(() => import('./pages/VisitsPage.jsx'), 'VisitsPage')
+
 const PANEL_PATHS = ['/inicio', '/home', '/dashboard']
 const ROLE_HOME_PATHS = {
   medico: '/agenda',
   secretaria: '/agenda',
 }
 
+function lazyPage(loader, exportName) {
+  return lazy(() => loader().then((module) => ({ default: module[exportName] })))
+}
+
 function App() {
   const [location, setLocation] = useState(() => readLocation())
   const { isAuthenticated, role, loading: authLoading } = useAuth()
@@ -72,7 +78,7 @@ function App() {
 
   // Rotas públicas (sem shell)
   if (!route.withShell) {
-    return route.element
+    return <RouteSuspense>{route.element}</RouteSuspense>
   }
 
   // Usuário não autenticado
@@ -97,11 +103,27 @@ function App() {
 
   return (
     <AppShell currentPath={location.pathname} navigate={navigate} role={role} routeTitle={route.title}>
-      {route.element}
+      <RouteSuspense>{route.element}</RouteSuspense>
     </AppShell>
   )
 }
 
+function RouteSuspense({ children }) {
+  return (
+    <Suspense fallback={<RouteFallback />}>
+      {children}
+    </Suspense>
+  )
+}
+
+function RouteFallback() {
+  return (
+    <div className="flex min-h-[40vh] items-center justify-center">
+      <p className="text-sm text-[#a3a3a3]">Carregando...</p>
+    </div>
+  )
+}
+
 function resolveRoute(pathname, navigate, role) {
   if (pathname === '/' || pathname === '/login') {
     return {