Login: evitar pantalla en blanco al arrancar

- ErrorBoundary global: si un modulo falla al renderizar se muestra un
  mensaje amable con recargar en lugar de pantalla en blanco.
- El bootstrap de auth ya no se queda cargando para siempre: si /auth/me
  no responde en 20 s (red lenta o tunel caido) se muestra una pantalla
  de reintento. Si la red fallo se conserva la sesion; solo se descarta
  el token cuando el servidor contesta (401).
This commit is contained in:
2026-09-28 19:52:23 +00:00
parent 72f12946c3
commit 89429aee9b
3 changed files with 111 additions and 7 deletions

View File

@@ -1,6 +1,7 @@
import type { FC, ReactNode } from 'react';
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
import { ToastProvider } from './components/ui';
import { ToastProvider, Button } from './components/ui';
import ErrorBoundary from './components/ErrorBoundary';
import { AuthProvider, useAuth } from './lib/auth';
import { QuickLinksProvider } from './lib/quicklinks';
import { PatientDrawerProvider } from './components/PatientDrawer';
@@ -36,9 +37,24 @@ const FullScreenLoader: FC = () => (
</div>
);
// Pantalla cuando el servidor no responde al arrancar (red lenta o caída):
// en lugar de quedarse cargando para siempre, ofrece reintentar.
const BootErrorScreen: FC<{ onRetry: () => void }> = ({ onRetry }) => (
<div className="min-h-screen flex items-center justify-center p-6 bg-theme-bg">
<div className="max-w-md w-full space-y-4 rounded-2xl border border-theme-border bg-theme-surface p-8 shadow-soft text-center">
<h1 className="font-heading text-xl text-theme-heading">No se pudo conectar</h1>
<p className="text-sm text-theme-muted">
El servidor no responde en este momento. Revisa tu conexión a internet e intenta de nuevo.
</p>
<Button onClick={onRetry}>Reintentar</Button>
</div>
</div>
);
const RequireAuth: FC<{ children: ReactNode; href: string }> = ({ children, href }) => {
const { user, loading, canSee } = useAuth();
const { user, loading, bootError, retryBoot, canSee } = useAuth();
if (loading) return <FullScreenLoader />;
if (bootError) return <BootErrorScreen onRetry={retryBoot} />;
if (!user) return <Navigate to="/login" replace />;
// La ruta "/" se maneja en HomeRoute (calcula landing por rol) para evitar
// el bucle de redirecciones cuando el rol no tiene '/' en la matriz.
@@ -81,6 +97,7 @@ const HomeRoute: FC = () => {
const App: FC = () => {
return (
<ErrorBoundary>
<AuthProvider>
<QuickLinksProvider>
<Router>
@@ -121,6 +138,7 @@ const App: FC = () => {
</Router>
</QuickLinksProvider>
</AuthProvider>
</ErrorBoundary>
);
};