feat: implement app content readiness handling in page and components

- Added `appContentReady` state to manage visibility of app content once loading is complete.
- Updated `useEffect` hooks in `CurrentDutyView` and `CalendarPage` to signal when content is ready, enhancing user experience by hiding native loading indicators.
- Refactored `Home` component to conditionally render content based on `appContentReady`, ensuring a smoother transition for users.
- Enhanced app store to include `setAppContentReady` method for state management.
This commit is contained in:
2026-03-03 18:11:02 +03:00
parent cac06f22fa
commit 68a153e4a7
4 changed files with 48 additions and 22 deletions

View File

@@ -28,6 +28,8 @@ export interface AppState {
accessDeniedDetail: string | null;
currentView: CurrentView;
selectedDay: string | null;
/** True when the first visible screen has finished loading; used to hide content until ready(). */
appContentReady: boolean;
setCurrentMonth: (d: Date) => void;
nextMonth: () => void;
@@ -41,8 +43,9 @@ export interface AppState {
setLang: (v: "ru" | "en") => void;
setCurrentView: (v: CurrentView) => void;
setSelectedDay: (key: string | null) => void;
setAppContentReady: (v: boolean) => void;
/** Batch multiple state updates into a single re-render. */
batchUpdate: (partial: Partial<Pick<AppState, "currentMonth" | "pendingMonth" | "lang" | "duties" | "calendarEvents" | "dataForMonthKey" | "loading" | "error" | "accessDenied" | "accessDeniedDetail" | "currentView" | "selectedDay">>) => void;
batchUpdate: (partial: Partial<Pick<AppState, "currentMonth" | "pendingMonth" | "lang" | "duties" | "calendarEvents" | "dataForMonthKey" | "loading" | "error" | "accessDenied" | "accessDeniedDetail" | "currentView" | "selectedDay" | "appContentReady">>) => void;
}
const now = new Date();
@@ -67,6 +70,7 @@ export const useAppStore = create<AppState>((set) => ({
accessDeniedDetail: null,
currentView: getInitialView(),
selectedDay: null,
appContentReady: false,
setCurrentMonth: (d) => set({ currentMonth: d }),
nextMonth: () =>
@@ -86,5 +90,6 @@ export const useAppStore = create<AppState>((set) => ({
setLang: (v) => set({ lang: v }),
setCurrentView: (v) => set({ currentView: v }),
setSelectedDay: (key) => set({ selectedDay: key }),
setAppContentReady: (v) => set({ appContentReady: v }),
batchUpdate: (partial) => set(partial),
}));