Files
super-app/App/common/hooks/useScreenLoadTime.ts
Prajjaval Verma 22c0a34f30 TP-81440 | React Screen Load TIme AIs (#12378)
Co-authored-by: Raaj Gopal <raaj.gopal@navi.com>
2024-09-09 14:19:54 +00:00

42 lines
1.4 KiB
TypeScript

import { useEffect, useState } from "react";
import { useAnalyticsEvent } from "./useAnalyticsEvent";
import { AnalyticsEvent } from "../interface";
import { EVENT_NAMES, EVENT_PROPERTY_KEYS } from "../constants";
import { ScreenState } from "../screen/BaseScreen";
const useScreenLoadTime = (
screenName: string | null,
screenState: ScreenState | null | undefined,
) => {
const [startTime, setStartTime] = useState<number | null>(null);
const { sendAsAnalyticsEvent } = useAnalyticsEvent();
useEffect(() => {
if (screenState === ScreenState.LOADING && startTime === null) {
setStartTime(performance.now());
} else if (
(screenState === ScreenState.LOADED ||
screenState === ScreenState.ERROR) &&
startTime !== null
) {
const endTime = performance.now();
const loadTime = ((endTime - startTime) / 1000).toFixed(3) + "s";
if (screenName) {
const analyticsEvent: AnalyticsEvent = {
name: EVENT_NAMES.SCREEN_LOAD_TIME,
properties: {
[EVENT_PROPERTY_KEYS.SCREEN_NAME]: screenName,
[EVENT_PROPERTY_KEYS.LOAD_TIME]: loadTime,
[EVENT_PROPERTY_KEYS.SCREEN_STATE]: ScreenState[screenState],
},
};
sendAsAnalyticsEvent(analyticsEvent);
}
setStartTime(null);
}
}, [screenState]);
};
export default useScreenLoadTime;