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:
@@ -20,7 +20,6 @@ import {
|
||||
formatHHMM,
|
||||
} from "@/lib/date-utils";
|
||||
import { getRemainingTime, findCurrentDuty } from "@/lib/current-duty";
|
||||
import { callMiniAppReadyOnce } from "@/lib/telegram-ready";
|
||||
import { ContactLinks } from "@/components/contact/ContactLinks";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
@@ -47,6 +46,7 @@ type ViewState = "loading" | "error" | "ready";
|
||||
export function CurrentDutyView({ onBack, openedFromPin = false }: CurrentDutyViewProps) {
|
||||
const { t } = useTranslation();
|
||||
const lang = useAppStore((s) => s.lang);
|
||||
const setAppContentReady = useAppStore((s) => s.setAppContentReady);
|
||||
const { initDataRaw } = useTelegramAuth();
|
||||
|
||||
const [state, setState] = useState<ViewState>("loading");
|
||||
@@ -93,12 +93,12 @@ export function CurrentDutyView({ onBack, openedFromPin = false }: CurrentDutyVi
|
||||
return () => controller.abort();
|
||||
}, [loadTodayDuties]);
|
||||
|
||||
// Signal Telegram to hide loading when this view is ready (or error).
|
||||
// Mark content ready when data is loaded or error, so page can call ready() and show content.
|
||||
useEffect(() => {
|
||||
if (state !== "loading") {
|
||||
callMiniAppReadyOnce();
|
||||
setAppContentReady(true);
|
||||
}
|
||||
}, [state]);
|
||||
}, [state, setAppContentReady]);
|
||||
|
||||
// Auto-update remaining time every second when there is an active duty.
|
||||
useEffect(() => {
|
||||
|
||||
Reference in New Issue
Block a user