WITHMIA v1.0.6 — Transição perfeita
Acabamos com o carregamento duplo depois do login, colocamos no lugar uma transição visual profissional com overlay inline, dark mode completo no onboarding e a correção definitiva do loop de redirecionamento na autenticação.
Equipe WITHMIA
WITHMIA
A v1.0.5 blindou a infraestrutura com testes, CI/CD e faturamento. A v1.0.6 olha para o que a pessoa vê e sente: uma entrada na plataforma sem interrupções, sem flashes brancos, sem reloads visíveis. É uma mudança de arquitetura que elimina um carregamento inteiro da aplicação e o substitui por uma transição visual fluida.
O problema: carregar tudo duas vezes depois do login
Até a v1.0.5, o fluxo de autenticação com o Google funcionava assim:
- A pessoa clica em “Entrar com Google”
- O Google autentica e devolve para
/auth/google - O servidor renderiza
auth-loading.blade.php— uma página intermediária que mostra o vídeo de transição - Essa página carrega o app React dentro de um iframe para guardar o token
- Depois executa
top.location.replace()em direção ao painel - O navegador carrega o app inteiro pela segunda vez
O resultado: um flash branco visível entre a transição e o painel. O app carregava duas vezes a cada login.
A solução: redirect direto + overlay inline
A v1.0.6 elimina o auth-loading.blade.php por completo e substitui todo o fluxo por um desenho de carregamento único:
O novo fluxo
- A pessoa clica em “Entrar com Google”
- O Google autentica e devolve para
/auth/google - O servidor faz um
redirect()direto para o painel com?transition=1&auth_token=... - O
app.blade.phpdetecta o?transition=1e renderiza o overlay de transição inline sobre a<div id="app"> - O React monta por baixo do overlay
- Quando o React está pronto, o overlay faz um fade-out suave (mínimo de 1,5s em tela + 0,6s de animação)
Um único carregamento de página. Zero flashes brancos. Transição profissional.
O que muda tecnicamente
| Componente | Antes (v1.0.5) | Agora (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 view | Redirect direto com ?transition=1 |
| Overlay | Página separada (auth-loading.blade.php) | Inline no app.blade.php com CSS |
| Carregamentos de página | 2 (iframe + replace) | 1 (redirect direto) |
Dark mode completo no onboarding
O fluxo de onboarding agora respeita totalmente o modo escuro do sistema:
- Detecção automática — lê o
prefers-color-scheme: darkdo sistema operacional - Persistência — se já existe uma preferência salva no localStorage, ela prevalece
- Fundo e texto — toda a tela de onboarding se adapta: fundos
#0F0F0F, textos claros, inputs com bordas sutis - Sem flash branco — o
<html>recebedata-theme="dark"antes de o React renderizar
Correção do loop de redirecionamento na autenticação
Encontramos e corrigimos várias causas de um loop de redirecionamento que afetava algumas pessoas:
Causas identificadas e corrigidas
- Lazy closures em HandleInertiaRequests — as closures eram avaliadas mesmo com o usuário não autenticado, gerando erros que disparavam redirects
- AuthenticationException com 302 — passou a devolver um redirect limpo, em vez de uma resposta que o Inertia não conseguia tratar
- Middleware auth.clean removido — interferia no tratamento dos tokens do Railway
- Railway auth nas rotas de API — adicionamos
railway.authàs rotas de usuário na API para que o token funcione corretamente - auth_token preservado na URL — paramos de limpar o
auth_tokenda URL cedo demais, permitindo que o app o capture direito
Overlay de transição: acabamento profissional
O overlay inline no app.blade.php reproduz exatamente o desenho do antigo auth-loading:
- Vídeo de fundo — o mesmo MP4 corporativo, muted + autoplay + loop
- Gradiente adaptativo — um
linear-gradientque muda entre modo claro e escuro - Assinatura “WITH YOU, WITHMIA” — tracking amplo, peso semibold, com gradiente de opacidade
- Timing inteligente — mínimo de 1,5 segundo em tela (o tempo que o
window.__loadingStartacompanha) e fade-out de 0,6 segundo compointer-events: nonepara nunca bloquear a interação - Limpeza da URL — o
history.replaceState()removetransitioneauth_tokenda URL depois do mount
Suporte a dark mode no overlay
/* Light mode */
background: linear-gradient(135deg, #f8f9fa 0%, #e8f4f8 50%, #f0f7ff 100%);
/* Dark mode (prefers-color-scheme: dark ou data-theme="dark") */
background: linear-gradient(135deg, #0a0a0a 0%, #111827 50%, #0f172a 100%);
color: white;Correção: uma única fonte de verdade para o tema
Descobrimos que existiam dois sistemas de tema disputando o controle da classe dark no <html>:
- WITHMIA ThemeContext — lê
withmia_theme_modedo localStorage (o sistema real, sincronizado com o banco) - Laravel starter kit (
initializeTheme) — lêappearancedo localStorage, que por padrão vinha como'system'
Se a pessoa tinha o tema WITHMIA em light, mas o sistema operacional estava em dark mode, o initializeTheme() adicionava a classe dark ao <html> depois de o overlay já ter renderizado em modo claro → um flash de escuro por cima do claro.
A solução
O initializeTheme() agora lê withmia_theme_mode como fonte de verdade principal, com fallback para appearance e depois para 'light'. O handler handleSystemThemeChange também foi atualizado.
// Antes
const savedAppearance = (localStorage.getItem('appearance') as Appearance) || 'system';
// Agora
const savedAppearance = (localStorage.getItem('withmia_theme_mode') as Appearance)
|| (localStorage.getItem('appearance') as Appearance)
|| 'light';Faxina: auth-loading eliminado
O arquivo auth-loading.blade.php (216 linhas) foi removido do codebase. Nenhum controller, rota ou view faz mais referência a ele.
A rota /auth-loading continua existindo como redirect de compatibilidade — se alguém tiver a URL em cache, é simplesmente redirecionado ao destino com &transition=1.
Resumo técnico
| Mudança | Arquivos | Impacto |
|---|---|---|
| Eliminar o carregamento duplo | GoogleAuthController, OnboardingController, routes/web.php | view() → redirect() |
| Overlay inline | app.blade.php | Detecção de ?transition=1, overlay em CSS com vídeo |
| Fade-out no React | app.tsx | Mínimo de 1,5s + 0,6s de animação, limpeza da URL |
| Dark mode no onboarding | onboarding.tsx | Respeita prefers-color-scheme e localStorage |
| Correção do loop de redirect | HandleInertiaRequests, routes/web.php, GoogleAuthController | 5 correções independentes |
| Return types | GoogleAuthController, OnboardingController | RedirectResponse no tipo de retorno |
| Fonte de verdade do tema | use-appearance.tsx | withmia_theme_mode como fonte principal |
| Faxina | auth-loading.blade.php | Arquivo removido (-216 linhas) |
O que vem por aí
Com a experiência de login refinada, o foco volta para funcionalidades de produto:
- PWA / app mobile — a prioridade para uma América Latina mobile-first
- Pesquisas CSAT — satisfação do cliente integrada à conversa
- AI resolution analytics — métricas de resolução por IA
- Broadcasting no WhatsApp — campanhas em massa
A WITHMIA v1.0.6 é a versão que deixa os primeiros 3 segundos da sua experiência perfeitos. Um login, um carregamento, zero interrupções.
Etiquetas
Comentários
Seja respeitoso. Seu e-mail não será publicado.