WITHMIA v1.0.6 — Transición Perfecta
Eliminación del doble page-load post-login, transición visual profesional con overlay inline, dark mode completo en onboarding, y corrección definitiva del redirect loop de autenticación.
Equipo WITHMIA
WITHMIA
La v1.0.5 aseguró la infraestructura con testing, CI/CD y facturación. La v1.0.6 se enfoca en lo que el usuario ve y siente: una experiencia de inicio de sesión sin interrupciones, sin flashes blancos, sin reloads visibles. Un cambio arquitectónico que elimina una carga doble de la aplicación y la reemplaza con una transición visual fluida.
El problema: doble carga después del login
Hasta v1.0.5, el flujo de autenticación con Google funcionaba así:
- El usuario hace clic en “Iniciar sesión con Google”
- Google autentica y devuelve a
/auth/google - El servidor renderiza
auth-loading.blade.php— una página intermedia que muestra el video de transición - Esa página carga la app React dentro de un iframe para guardar el token
- Después ejecuta
top.location.replace()hacia el dashboard - El navegador carga la app completa por segunda vez
El resultado: un flash blanco visible entre la transición y el dashboard. La app se cargaba dos veces en cada login.
La solución: redirect directo + overlay inline
La v1.0.6 elimina auth-loading.blade.php completamente y reemplaza todo el flujo con un diseño de una sola carga:
Nuevo flujo
- El usuario hace clic en “Iniciar sesión con Google”
- Google autentica y devuelve a
/auth/google - El servidor hace un
redirect()directo al dashboard con?transition=1&auth_token=... app.blade.phpdetecta?transition=1y renderiza el overlay de transición inline sobre el<div id="app">- React se monta debajo del overlay
- Cuando React está listo, el overlay hace fade-out suave (1.5s mínimo de display + 0.6s de animación)
Una sola carga de página. Cero flashes blancos. Transición profesional.
¿Qué cambia técnicamente?
| Componente | Antes (v1.0.5) | Ahora (v1.0.6) |
|---|---|---|
| GoogleAuthController | return view('auth-loading', ...) | return redirect($url . '&transition=1') |
| OnboardingController | return view('auth-loading', ...) | return redirect($url . '&transition=1') |
| routes/web.php | Renderiza auth-loading como vista | Redirect directo con ?transition=1 |
| Overlay | Página separada (auth-loading.blade.php) | Inline en app.blade.php con CSS |
| Cargas de página | 2 (iframe + replace) | 1 (redirect directo) |
Dark mode completo en onboarding
El flujo de onboarding ahora respeta completamente el modo oscuro del sistema:
- Detección automática —
prefers-color-scheme: darkdel sistema operativo - Persistencia — si el usuario ya tiene preferencia guardada en localStorage, se respeta
- Fondo y texto — toda la pantalla de onboarding se adapta: backgrounds
#0F0F0F, textos claros, inputs con bordes sutiles - Sin flash blanco — el
<html>se marca condata-theme="dark"antes de que React renderice
Fix del redirect loop de autenticación
Se corrigieron múltiples causas de un loop de redirección que afectaba a algunos usuarios:
Causas identificadas y corregidas
- Lazy closures en HandleInertiaRequests — las closures se evaluaban incluso cuando el usuario no estaba autenticado, causando errores que disparaban redirects
- AuthenticationException con 302 — cambiado para devolver un redirect limpio en lugar de una respuesta que Inertia no podía manejar
- Middleware auth.clean eliminado — interfería con el manejo de tokens de Railway
- Railway auth en rutas API — agregado
railway.autha las rutas de usuario en API para que el token funcione correctamente - auth_token preservado en URL — se dejó de limpiar el
auth_tokende la URL prematuramente, permitiendo que la app lo capture correctamente
Overlay de transición: diseño profesional
El overlay inline en app.blade.php replica exactamente el diseño del antiguo auth-loading:
- Video de fondo — el mismo video MP4 corporativo, muted + autoplay + loop
- Gradiente adaptativo —
linear-gradientque cambia según light/dark mode - Texto “WITH YOU, WITHMIA” — tracking amplio, peso semibold, con gradiente de opacidad
- Timing inteligente — mínimo 1.5 segundos de display (el tiempo que
window.__loadingStarttrackea), fade-out de 0.6 segundos conpointer-events: nonepara no bloquear interacción - Limpieza de URL —
history.replaceState()remuevetransitionyauth_tokende la URL después del mount
Soporte de dark mode en el overlay
/* Light mode */
background: linear-gradient(135deg, #f8f9fa 0%, #e8f4f8 50%, #f0f7ff 100%);
/* Dark mode (prefers-color-scheme: dark o data-theme="dark") */
background: linear-gradient(135deg, #0a0a0a 0%, #111827 50%, #0f172a 100%);
color: white;Fix: fuente de verdad unificada para el tema
Se descubrió que existían dos sistemas de tema compitiendo por el control de la clase dark en el <html>:
- WITHMIA ThemeContext — lee
withmia_theme_modede localStorage (el sistema real, sincronizado con la BD) - Laravel starter kit (
initializeTheme) — leeappearancede localStorage, que por defecto era'system'
Si el usuario tenía el tema WITHMIA en light pero su sistema operativo estaba en dark mode, initializeTheme() agregaba la clase dark al <html> después de que el overlay se renderizara en modo claro → flash de oscuro sobre claro.
La solución
initializeTheme() ahora lee withmia_theme_mode como fuente de verdad principal, con fallback a appearance y luego a 'light'. El handler de handleSystemThemeChange también fue actualizado.
// Antes
const savedAppearance = (localStorage.getItem('appearance') as Appearance) || 'system';
// Ahora
const savedAppearance = (localStorage.getItem('withmia_theme_mode') as Appearance)
|| (localStorage.getItem('appearance') as Appearance)
|| 'light';Limpieza: auth-loading eliminado
El archivo auth-loading.blade.php (216 líneas) fue eliminado del codebase. Ya no es referenciado por ningún controlador, ruta o vista.
La ruta /auth-loading sigue existiendo como redirect de compatibilidad — si alguien tiene la URL cacheada, simplemente se redirige al destino con &transition=1.
Resumen técnico
| Cambio | Archivos | Impacto |
|---|---|---|
| Eliminar doble carga | GoogleAuthController, OnboardingController, routes/web.php | view() → redirect() |
| Overlay inline | app.blade.php | Detección de ?transition=1, CSS overlay con video |
| Fade-out en React | app.tsx | 1.5s mínimo + 0.6s animación, limpieza de URL |
| Dark mode onboarding | onboarding.tsx | Respeta prefers-color-scheme y localStorage |
| Fix redirect loop | HandleInertiaRequests, routes/web.php, GoogleAuthController | 5 fixes independientes |
| Return types | GoogleAuthController, OnboardingController | RedirectResponse en tipo de retorno |
| Theme source of truth | use-appearance.tsx | withmia_theme_mode como fuente principal |
| Limpieza | auth-loading.blade.php | Archivo eliminado (-216 líneas) |
Lo que viene
Con la experiencia de login refinada, el foco se mueve a features de producto:
- PWA / App móvil — la prioridad para LATAM mobile-first
- Encuestas CSAT — customer satisfaction integrada en la conversación
- AI resolution analytics — métricas de resolución por IA
- Broadcasting WhatsApp — campañas masivas
WITHMIA v1.0.6 es la versión que hace que los primeros 3 segundos de tu experiencia sean perfectos. Un login, una carga, cero interrupciones.
Etiquetas
Comentarios
Sé respetuoso. Tu email no será publicado.