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:
@@ -16,7 +16,6 @@ import { CalendarHeader } from "@/components/calendar/CalendarHeader";
|
||||
import { CalendarGrid } from "@/components/calendar/CalendarGrid";
|
||||
import { DutyList } from "@/components/duty/DutyList";
|
||||
import { DayDetail, type DayDetailHandle } from "@/components/day-detail";
|
||||
import { callMiniAppReadyOnce } from "@/lib/telegram-ready";
|
||||
import { ErrorState } from "@/components/states/ErrorState";
|
||||
import { AccessDenied } from "@/components/states/AccessDenied";
|
||||
|
||||
@@ -60,6 +59,7 @@ export function CalendarPage({ isAllowed, initDataRaw }: CalendarPageProps) {
|
||||
prevMonth,
|
||||
setCurrentMonth,
|
||||
setSelectedDay,
|
||||
setAppContentReady,
|
||||
} = useAppStore(
|
||||
useShallow((s) => ({
|
||||
currentMonth: s.currentMonth,
|
||||
@@ -75,6 +75,7 @@ export function CalendarPage({ isAllowed, initDataRaw }: CalendarPageProps) {
|
||||
prevMonth: s.prevMonth,
|
||||
setCurrentMonth: s.setCurrentMonth,
|
||||
setSelectedDay: s.setSelectedDay,
|
||||
setAppContentReady: s.setAppContentReady,
|
||||
}))
|
||||
);
|
||||
|
||||
@@ -126,13 +127,13 @@ export function CalendarPage({ isAllowed, initDataRaw }: CalendarPageProps) {
|
||||
}, [setSelectedDay]);
|
||||
|
||||
const readyCalledRef = useRef(false);
|
||||
// Signal Telegram to hide loading when the first load finishes (loading goes true -> false).
|
||||
// Mark content ready when first load finishes or access denied, so page can call ready() and show content.
|
||||
useEffect(() => {
|
||||
if (!loading && !readyCalledRef.current) {
|
||||
if ((!loading || accessDenied) && !readyCalledRef.current) {
|
||||
readyCalledRef.current = true;
|
||||
callMiniAppReadyOnce();
|
||||
setAppContentReady(true);
|
||||
}
|
||||
}, [loading]);
|
||||
}, [loading, accessDenied, setAppContentReady]);
|
||||
|
||||
return (
|
||||
<div className="mx-auto flex min-h-screen w-full max-w-[var(--max-width-app)] flex-col bg-background px-3 pb-6 pt-safe">
|
||||
|
||||
Reference in New Issue
Block a user