WITHMIA v1.0.6 — Der perfekte Übergang
Das doppelte Laden nach dem Login ist Geschichte: ein sauberer visueller Übergang als Inline-Overlay, vollständiger Dark Mode im Onboarding und die endgültige Behebung der Redirect-Schleife bei der Anmeldung.
WITHMIA-Team
WITHMIA
Die v1.0.5 hat die Infrastruktur mit Tests, CI/CD und Abrechnung abgesichert. Die v1.0.6 kümmert sich um das, was man tatsächlich sieht und spürt: eine Anmeldung ohne Unterbrechungen, ohne weiße Blitze, ohne sichtbare Reloads. Eine architektonische Änderung, die einen kompletten Ladevorgang der Anwendung streicht und durch einen flüssigen visuellen Übergang ersetzt.
Das Problem: nach dem Login wurde alles zweimal geladen
Bis zur v1.0.5 lief die Authentifizierung mit Google so ab:
- Die Person klickt auf „Mit Google anmelden”
- Google authentifiziert und leitet zurück auf
/auth/google - Der Server rendert
auth-loading.blade.php— eine Zwischenseite mit dem Übergangsvideo - Diese Seite lädt die React-App in einem iframe, um das Token zu speichern
- Danach führt sie
top.location.replace()Richtung Dashboard aus - Der Browser lädt die komplette App ein zweites Mal
Das Ergebnis: ein sichtbarer weißer Blitz zwischen Übergang und Dashboard. Die App wurde bei jedem Login zweimal geladen.
Die Lösung: direkter Redirect + Inline-Overlay
Die v1.0.6 entfernt auth-loading.blade.php vollständig und ersetzt den gesamten Ablauf durch ein Design mit nur einem Ladevorgang:
Der neue Ablauf
- Die Person klickt auf „Mit Google anmelden”
- Google authentifiziert und leitet zurück auf
/auth/google - Der Server macht einen direkten
redirect()zum Dashboard mit?transition=1&auth_token=... app.blade.phperkennt?transition=1und rendert das Übergangs-Overlay inline über<div id="app">- React mountet unterhalb des Overlays
- Sobald React bereit ist, blendet das Overlay sanft aus (mindestens 1,5 s sichtbar + 0,6 s Animation)
Ein einziger Seitenaufbau. Null weiße Blitze. Ein professioneller Übergang.
Was sich technisch ändert
| Komponente | Vorher (v1.0.5) | Jetzt (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 | Rendert auth-loading als View | Direkter Redirect mit ?transition=1 |
| Overlay | Eigene Seite (auth-loading.blade.php) | Inline in app.blade.php per CSS |
| Seitenaufbauten | 2 (iframe + replace) | 1 (direkter Redirect) |
Vollständiger Dark Mode im Onboarding
Der Onboarding-Ablauf respektiert jetzt den Dunkelmodus des Systems vollständig:
- Automatische Erkennung — liest
prefers-color-scheme: darkvom Betriebssystem - Persistenz — liegt bereits eine Präferenz im localStorage, hat sie Vorrang
- Hintergrund und Text — der gesamte Onboarding-Screen passt sich an: Hintergründe in
#0F0F0F, helle Texte, Eingabefelder mit dezenten Rändern - Kein weißer Blitz —
<html>bekommtdata-theme="dark", bevor React überhaupt rendert
Fix der Redirect-Schleife bei der Anmeldung
Wir haben mehrere Ursachen einer Redirect-Schleife gefunden und behoben, die einige Nutzerinnen und Nutzer getroffen hat:
Erkannte und behobene Ursachen
- Lazy Closures in HandleInertiaRequests — die Closures wurden auch dann ausgewertet, wenn niemand angemeldet war, was Fehler und damit Redirects auslöste
- AuthenticationException mit 302 — gibt jetzt einen sauberen Redirect zurück statt einer Antwort, mit der Inertia nichts anfangen konnte
- Middleware auth.clean entfernt — sie kam der Verarbeitung der Railway-Tokens in die Quere
- Railway-Auth auf den API-Routen —
railway.authwurde den User-Routen in der API hinzugefügt, damit das Token korrekt funktioniert - auth_token bleibt in der URL — wir entfernen
auth_tokennicht mehr voreilig aus der URL, sodass die App ihn sauber aufnehmen kann
Das Übergangs-Overlay: professionelles Finish
Das Inline-Overlay in app.blade.php bildet das Design des alten auth-loading exakt nach:
- Hintergrundvideo — dasselbe Corporate-MP4, muted + autoplay + loop
- Adaptiver Verlauf — ein
linear-gradient, der zwischen hellem und dunklem Modus wechselt - Schriftzug „WITH YOU, WITHMIA” — weite Laufweite, Semibold, mit Deckkraftverlauf
- Kluges Timing — mindestens 1,5 Sekunden sichtbar (die Zeit, die
window.__loadingStartmisst), dann 0,6 Sekunden Ausblenden mitpointer-events: none, damit nie eine Interaktion blockiert wird - URL-Bereinigung —
history.replaceState()entfernttransitionundauth_tokennach dem Mount aus der URL
Dark-Mode-Unterstützung im Overlay
/* Light mode */
background: linear-gradient(135deg, #f8f9fa 0%, #e8f4f8 50%, #f0f7ff 100%);
/* Dark mode (prefers-color-scheme: dark oder data-theme="dark") */
background: linear-gradient(135deg, #0a0a0a 0%, #111827 50%, #0f172a 100%);
color: white;Fix: eine einzige Quelle der Wahrheit für das Theme
Es stellte sich heraus, dass zwei Theme-Systeme um die Kontrolle über die dark-Klasse am <html> stritten:
- WITHMIA ThemeContext — liest
withmia_theme_modeaus dem localStorage (das echte System, mit der Datenbank synchronisiert) - Laravel Starter Kit (
initializeTheme) — liestappearanceaus dem localStorage, standardmäßig'system'
Stand das WITHMIA-Theme auf light, das Betriebssystem aber im Dark Mode, hängte initializeTheme() die Klasse dark an <html>, nachdem das Overlay bereits hell gerendert war → ein dunkles Aufblitzen über dem hellen Bild.
Die Lösung
initializeTheme() liest jetzt withmia_theme_mode als primäre Quelle der Wahrheit, mit Fallback auf appearance und danach auf 'light'. Der Handler handleSystemThemeChange wurde ebenfalls aktualisiert.
// Vorher
const savedAppearance = (localStorage.getItem('appearance') as Appearance) || 'system';
// Jetzt
const savedAppearance = (localStorage.getItem('withmia_theme_mode') as Appearance)
|| (localStorage.getItem('appearance') as Appearance)
|| 'light';Aufräumen: auth-loading ist weg
Die Datei auth-loading.blade.php (216 Zeilen) wurde aus der Codebase gelöscht. Kein Controller, keine Route und keine View verweist noch darauf.
Die Route /auth-loading existiert weiterhin als Kompatibilitäts-Redirect — wer die URL im Cache hat, wird einfach mit &transition=1 an sein Ziel weitergeleitet.
Technische Zusammenfassung
| Änderung | Dateien | Auswirkung |
|---|---|---|
| Doppeltes Laden entfernen | GoogleAuthController, OnboardingController, routes/web.php | view() → redirect() |
| Inline-Overlay | app.blade.php | Erkennung von ?transition=1, CSS-Overlay mit Video |
| Ausblenden in React | app.tsx | mind. 1,5 s + 0,6 s Animation, URL-Bereinigung |
| Dark Mode im Onboarding | onboarding.tsx | Respektiert prefers-color-scheme und localStorage |
| Fix Redirect-Schleife | HandleInertiaRequests, routes/web.php, GoogleAuthController | 5 unabhängige Fixes |
| Rückgabetypen | GoogleAuthController, OnboardingController | RedirectResponse als Rückgabetyp |
| Theme Source of Truth | use-appearance.tsx | withmia_theme_mode als primäre Quelle |
| Aufräumen | auth-loading.blade.php | Datei gelöscht (-216 Zeilen) |
Wie es weitergeht
Da die Login-Erfahrung nun sitzt, wandert der Fokus zurück auf Produktfunktionen:
- PWA / mobile App — die Priorität für ein mobile-first geprägtes Lateinamerika
- CSAT-Umfragen — Kundenzufriedenheit direkt im Gespräch
- AI Resolution Analytics — Kennzahlen zur Lösungsquote der KI
- WhatsApp-Broadcasting — Kampagnen an viele Empfänger
WITHMIA v1.0.6 ist die Version, die die ersten 3 Sekunden deiner Erfahrung perfekt macht. Ein Login, ein Ladevorgang, null Unterbrechungen.
Labels
Kommentare
Bleiben Sie respektvoll. Ihre E-Mail-Adresse wird nicht veröffentlicht.