diff --git a/src/components/PredictedAction.tsx b/src/components/PredictedAction.tsx index 5b9846f83..0e598880a 100644 --- a/src/components/PredictedAction.tsx +++ b/src/components/PredictedAction.tsx @@ -1,14 +1,28 @@ import { HStack, Text, VisuallyHidden, VStack } from "@chakra-ui/react"; +import debounce from "lodash.debounce"; +import { useEffect, useMemo, useState } from "react"; import { FormattedMessage, useIntl } from "react-intl"; +import { useStore } from "../store"; import { tourElClassname } from "../tours"; import InfoToolTip from "./InfoToolTip"; import LedIcon from "./LedIcon"; import { predictedActionDisplayWidth } from "./LiveGraphPanel"; -import { useStore } from "../store"; const PredictedAction = () => { const intl = useIntl(); const predictionResult = useStore((s) => s.predictionResult); + const estimatedAction = predictionResult?.detected?.name; + const [liveRegionEstimatedAction, setLiveRegionEstimatedAction] = useState< + string | undefined + >(estimatedAction); + const setLiveRegionEstimatedActionDebounced = useMemo( + () => debounce(setLiveRegionEstimatedAction, 500), + [] + ); + useEffect(() => { + setLiveRegionEstimatedActionDebounced(estimatedAction); + }, [setLiveRegionEstimatedActionDebounced, estimatedAction]); + return ( { id="estimated-action-aria" values={{ action: - predictionResult?.detected?.name ?? + liveRegionEstimatedAction ?? intl.formatMessage({ id: "unknown" }), }} /> @@ -52,7 +66,7 @@ const PredictedAction = () => { textAlign="center" w={`${predictedActionDisplayWidth}px`} > - {predictionResult?.detected?.name ?? } + {estimatedAction ?? } );