Skip to content

feat: resolve Zustand persist hydration causing redirect/layout flicker#1281

Open
dataCenter430 wants to merge 2 commits intoeigent-ai:mainfrom
dataCenter430:fix-zustand-hydration
Open

feat: resolve Zustand persist hydration causing redirect/layout flicker#1281
dataCenter430 wants to merge 2 commits intoeigent-ai:mainfrom
dataCenter430:fix-zustand-hydration

Conversation

@dataCenter430
Copy link

Related Issue

Persisted auth may hydrate after the first render, causing temporary redirects or flicker.

Closes #1260

Description

  1. src/hooks/useAuthHydration.ts (new)
  • Hook that returns true only after the auth store’s persist middleware has finished rehydrating.
  • Uses useAuthStore.persist.hasHydrated() and onFinishHydration() so we don’t read token / initState / isFirstLaunch before they’re restored from storage.
  1. src/routers/index.tsx
  • ProtectedRoute uses useAuthHydration().
  • Shows the loading spinner until hasHydrated is true, then runs the existing proxy check and INITIALIZE with the real token.
  • Prevents briefly sending logged-in users to /login before hydration completes.
  1. src/components/Layout/index.tsx
  • Layout uses useAuthHydration().
  • Keeps showing “Loading…” until the auth store has hydrated, then reads initState and isFirstLaunch.
  • Prevents the install/onboarding screen from flashing before switching to the correct main content.

Why it’s better

  • No auth flicker: Route guard and layout only use auth state after rehydration, so we don’t redirect to login or show wrong UI and then correct it.
  • Single source of truth: Hydration is handled in one hook (useAuthHydration) and reused wherever auth-dependent UI is rendered.
  • Uses Zustand’s API: Relies on persist.hasHydrated() and onFinishHydration() instead of ad-hoc timing or timeouts.
  • Same loading UX: We still show a spinner/“Loading…” until we know the real auth state; we only avoid the incorrect redirect and layout flicker that happened when acting on unhydrated state.

What is the purpose of this pull request?

  • Bug fix
  • New Feature
  • Documentation update
  • Other

Contribution Guidelines Acknowledgement

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feature Request] Architecture and UX Improvement

1 participant