Skip to content
Product · 6 min read

WITHMIA v1.0.6 — A Seamless Transition

We killed the double page load after login, replaced it with a professional inline transition overlay, brought full dark mode to onboarding, and fixed the authentication redirect loop for good.

W

WITHMIA Team

WITHMIA

v1.0.5 secured the infrastructure with testing, CI/CD and billing. v1.0.6 focuses on what people actually see and feel: a sign-in experience with no interruptions, no white flashes, no visible reloads. It’s an architectural change that removes an entire second load of the application and replaces it with a smooth visual transition.

The problem: loading everything twice after login

Up to v1.0.5, the Google authentication flow worked like this:

  1. The user clicks “Sign in with Google”
  2. Google authenticates and sends them back to /auth/google
  3. The server renders auth-loading.blade.php — an intermediate page showing the transition video
  4. That page loads the React app inside an iframe to store the token
  5. Then it runs top.location.replace() toward the dashboard
  6. The browser loads the entire app a second time

The result: a visible white flash between the transition and the dashboard. The app was loading twice on every single login.

The fix: direct redirect + inline overlay

v1.0.6 removes auth-loading.blade.php entirely and replaces the whole flow with a single-load design:

The new flow

  1. The user clicks “Sign in with Google”
  2. Google authenticates and sends them back to /auth/google
  3. The server issues a direct redirect() to the dashboard with ?transition=1&auth_token=...
  4. app.blade.php detects ?transition=1 and renders the transition overlay inline, on top of <div id="app">
  5. React mounts underneath the overlay
  6. Once React is ready, the overlay fades out smoothly (1.5s minimum on screen + 0.6s of animation)

One page load. Zero white flashes. A professional transition.

What changed under the hood

ComponentBefore (v1.0.5)Now (v1.0.6)
GoogleAuthControllerreturn view('auth-loading', ...)return redirect($url . '&transition=1')
OnboardingControllerreturn view('auth-loading', ...)return redirect($url . '&transition=1')
routes/web.phpRenders auth-loading as a viewDirect redirect with ?transition=1
OverlaySeparate page (auth-loading.blade.php)Inline in app.blade.php with CSS
Page loads2 (iframe + replace)1 (direct redirect)

Full dark mode in onboarding

The onboarding flow now fully respects your system’s dark mode:

  • Automatic detection — reads prefers-color-scheme: dark from the operating system
  • Persistence — if you already have a preference saved in localStorage, it wins
  • Background and text — the entire onboarding screen adapts: #0F0F0F backgrounds, light text, inputs with subtle borders
  • No white flash<html> is marked with data-theme="dark" before React renders anything

Fixing the authentication redirect loop

We tracked down and fixed several causes behind a redirect loop that was hitting some users:

Causes identified and corrected

  1. Lazy closures in HandleInertiaRequests — the closures were being evaluated even when the user wasn’t authenticated, throwing errors that triggered redirects
  2. AuthenticationException with 302 — changed to return a clean redirect instead of a response Inertia couldn’t handle
  3. auth.clean middleware removed — it was interfering with Railway token handling
  4. Railway auth on API routes — added railway.auth to the user routes in the API so the token works correctly
  5. auth_token preserved in the URL — we stopped stripping auth_token from the URL prematurely, letting the app capture it properly

The transition overlay: a professional look

The inline overlay in app.blade.php reproduces the old auth-loading design exactly:

  • Background video — the same corporate MP4, muted + autoplay + loop
  • Adaptive gradient — a linear-gradient that switches between light and dark mode
  • “WITH YOU, WITHMIA” wordmark — wide tracking, semibold weight, with an opacity gradient
  • Smart timing — 1.5 seconds minimum on screen (tracked by window.__loadingStart), then a 0.6 second fade-out with pointer-events: none so it never blocks interaction
  • URL cleanuphistory.replaceState() strips transition and auth_token from the URL after mount

Dark mode support in the overlay

/* Light mode */
background: linear-gradient(135deg, #f8f9fa 0%, #e8f4f8 50%, #f0f7ff 100%);

/* Dark mode (prefers-color-scheme: dark or data-theme="dark") */
background: linear-gradient(135deg, #0a0a0a 0%, #111827 50%, #0f172a 100%);
color: white;

Fix: one single source of truth for the theme

We discovered there were two theme systems fighting over the dark class on <html>:

  1. WITHMIA ThemeContext — reads withmia_theme_mode from localStorage (the real system, synced with the database)
  2. Laravel starter kit (initializeTheme) — reads appearance from localStorage, which defaulted to 'system'

If a user had their WITHMIA theme set to light but their operating system was in dark mode, initializeTheme() would add the dark class to <html> after the overlay had already rendered in light mode → a flash of dark on top of light.

The fix

initializeTheme() now reads withmia_theme_mode as its primary source of truth, falling back to appearance and then to 'light'. The handleSystemThemeChange handler was updated too.

// Before
const savedAppearance = (localStorage.getItem('appearance') as Appearance) || 'system';

// Now
const savedAppearance = (localStorage.getItem('withmia_theme_mode') as Appearance)
    || (localStorage.getItem('appearance') as Appearance)
    || 'light';

Cleanup: auth-loading is gone

The auth-loading.blade.php file (216 lines) was deleted from the codebase. No controller, route or view references it anymore.

The /auth-loading route still exists as a compatibility redirect — if anyone has the URL cached, they simply get redirected to their destination with &transition=1.

Technical summary

ChangeFilesImpact
Remove the double loadGoogleAuthController, OnboardingController, routes/web.phpview()redirect()
Inline overlayapp.blade.phpDetects ?transition=1, CSS overlay with video
Fade-out in Reactapp.tsx1.5s minimum + 0.6s animation, URL cleanup
Dark mode in onboardingonboarding.tsxRespects prefers-color-scheme and localStorage
Redirect loop fixHandleInertiaRequests, routes/web.php, GoogleAuthController5 independent fixes
Return typesGoogleAuthController, OnboardingControllerRedirectResponse as the return type
Theme source of truthuse-appearance.tsxwithmia_theme_mode as the primary source
Cleanupauth-loading.blade.phpFile deleted (-216 lines)

What’s next

With the login experience polished, the focus moves back to product features:

  • PWA / mobile app — the priority for a mobile-first LATAM
  • CSAT surveys — customer satisfaction built into the conversation
  • AI resolution analytics — metrics on how much AI actually resolves
  • WhatsApp broadcasting — bulk campaigns

WITHMIA v1.0.6 is the release that makes the first 3 seconds of your experience perfect. One login, one load, zero interruptions.

Open WITHMIA → Try it free at app.withmia.com →

Labels

update v1.0.6 product UX dark-mode authentication transition performance theme

Share

Comments

Be respectful. Your email will not be published.

Related articles

Want to put this to work in your business?

Try it free for 14 days. No credit card.

Try free for 14 days