Files
super-app/App/common/hooks/useScreenLoadTime.ts
2024-11-15 12:05:58 +00:00

43 lines
1.4 KiB
TypeScript

import { useEffect, useState } from "react";
import { EVENT_NAMES, EVENT_PROPERTY_KEYS } from "../constants";
import { AnalyticsEvent } from "../interface";
import { ScreenState } from "../screen/BaseScreen";
import { useAnalyticsEvent } from "./useAnalyticsEvent";
const useScreenLoadTime = (
screenName: string | null,
moduleName: 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 = Math.round(endTime - startTime);
if (screenName && moduleName) {
const analyticsEvent: AnalyticsEvent = {
name: moduleName + "_" + EVENT_NAMES.SCREEN_LOAD_TIME,
properties: {
[EVENT_PROPERTY_KEYS.SCREEN_NAME]: screenName,
[EVENT_PROPERTY_KEYS.LOAD_TIME]: loadTime.toString(),
[EVENT_PROPERTY_KEYS.SCREEN_STATE]: ScreenState[screenState],
},
};
sendAsAnalyticsEvent(analyticsEvent);
}
setStartTime(null);
}
}, [screenState]);
};
export default useScreenLoadTime;