perf: preload events and CalDAV config to avoid empty screens
Add CaldavConfigStore and preloadAppData() to load events (current month) and CalDAV config into stores before dismissing the auth loading spinner. This prevents the brief empty flash when first navigating to Calendar or Settings tabs. Also applies Prettier formatting across codebase.
This commit is contained in:
13
CLAUDE.md
13
CLAUDE.md
@@ -84,7 +84,7 @@ src/
|
||||
│ └── note/
|
||||
│ └── [id].tsx # Note editor for event (dynamic route)
|
||||
├── components/
|
||||
│ ├── AuthGuard.tsx # Auth wrapper: loads user, CalDAV sync on auto-login, shows loading, redirects if unauthenticated
|
||||
│ ├── AuthGuard.tsx # Auth wrapper: loads user, preloads app data (events + CalDAV config), CalDAV sync, shows loading, redirects if unauthenticated. Exports preloadAppData()
|
||||
│ ├── BaseBackground.tsx # Common screen wrapper (themed)
|
||||
│ ├── BaseButton.tsx # Reusable button component (themed, supports children)
|
||||
│ ├── Header.tsx # Header component (themed)
|
||||
@@ -118,6 +118,7 @@ src/
|
||||
│ │ # Uses expo-secure-store (native) / localStorage (web)
|
||||
│ ├── ChatStore.ts # messages[], isWaitingForResponse, addMessage(), addMessages(), updateMessage(), clearMessages(), setWaitingForResponse(), chatMessageToMessageData()
|
||||
│ ├── EventsStore.ts # events[], setEvents(), addEvent(), updateEvent(), deleteEvent()
|
||||
│ ├── CaldavConfigStore.ts # config (CaldavConfig | null), setConfig() - cached CalDAV config
|
||||
│ └── ThemeStore.ts # theme, setTheme() - reactive theme switching with Zustand
|
||||
└── hooks/
|
||||
└── useDropdownPosition.ts # Hook for positioning dropdowns relative to trigger element
|
||||
@@ -128,9 +129,12 @@ src/
|
||||
**Authentication Flow:**
|
||||
- `AuthGuard` component wraps the tab layout in `(tabs)/_layout.tsx`
|
||||
- On app start, `AuthGuard` calls `loadStoredUser()` and shows loading indicator
|
||||
- After auth, `preloadAppData()` loads events (current month) + CalDAV config into stores before dismissing spinner
|
||||
- If not authenticated, redirects to `/login`
|
||||
- `login.tsx` also calls `preloadAppData()` after successful login (spinner stays visible during preload)
|
||||
- `index.tsx` simply redirects to `/(tabs)/chat` - AuthGuard handles the rest
|
||||
- This pattern handles Expo Router's navigation state caching (avoids race conditions)
|
||||
- Preloading prevents empty screens when navigating to Calendar or Settings tabs for the first time
|
||||
|
||||
### Theme System
|
||||
|
||||
@@ -597,8 +601,8 @@ NODE_ENV=development # development = pretty logs, production = JSON
|
||||
- `AuthStore`: Manages user state with expo-secure-store (native) / localStorage (web)
|
||||
- `AuthService`: login(), register(), logout() - calls backend API
|
||||
- `ApiClient`: Automatically injects X-User-Id header for authenticated requests, handles empty responses (204)
|
||||
- `AuthGuard`: Reusable component that wraps protected routes - loads user, triggers CalDAV sync on auto-login, shows loading, redirects if unauthenticated
|
||||
- Login screen: Supports email OR userName login, triggers CalDAV sync after successful login
|
||||
- `AuthGuard`: Reusable component that wraps protected routes - loads user, preloads app data (events + CalDAV config) into stores before dismissing spinner, triggers CalDAV sync, shows loading, redirects if unauthenticated. Exports `preloadAppData()` (also called by `login.tsx`)
|
||||
- Login screen: Supports email OR userName login, preloads app data + triggers CalDAV sync after successful login
|
||||
- Register screen: Email validation, checks for existing email/userName
|
||||
- `AuthButton`: Reusable button component with themed shadow
|
||||
- `Header`: Themed header component (logout moved to Settings)
|
||||
@@ -644,7 +648,8 @@ NODE_ENV=development # development = pretty logs, production = JSON
|
||||
- `DeleteEventModal`: Delete confirmation modal using ModalBase - shows three options for recurring events (single/future/all), simple confirm for non-recurring
|
||||
- `EventOverlay` (in calendar.tsx): Day events overlay using ModalBase - shows EventCards for selected day
|
||||
- `Themes.tsx`: Theme definitions with THEMES object (defaultLight, defaultDark) including all color tokens (textPrimary, borderPrimary, eventIndicator, secondaryBg, shadowColor, etc.)
|
||||
- `EventsStore`: Zustand store with setEvents(), addEvent(), updateEvent(), deleteEvent() - stores ExpandedEvent[]
|
||||
- `EventsStore`: Zustand store with setEvents(), addEvent(), updateEvent(), deleteEvent() - stores ExpandedEvent[], preloaded by AuthGuard
|
||||
- `CaldavConfigStore`: Zustand store with config (CaldavConfig | null), setConfig() - cached CalDAV config, preloaded by AuthGuard, used by Settings to avoid API call on mount
|
||||
- `ChatStore`: Zustand store with addMessage(), addMessages(), updateMessage(), clearMessages(), isWaitingForResponse/setWaitingForResponse() for typing indicator - loads from server on mount and persists across tab switches
|
||||
- `ThemeStore`: Zustand store with theme/setTheme() for reactive theme switching across all components
|
||||
- `ChatBubble`: Reusable chat bubble component with Tailwind styling, used by ChatMessage and TypingIndicator
|
||||
|
||||
Reference in New Issue
Block a user