diff --git a/src/components/PredictedAction.tsx b/src/components/PredictedAction.tsx index a76da0e3f..843130c2c 100644 --- a/src/components/PredictedAction.tsx +++ b/src/components/PredictedAction.tsx @@ -1,10 +1,4 @@ -import { - HStack, - Text, - usePrevious, - VisuallyHidden, - VStack, -} from "@chakra-ui/react"; +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"; @@ -17,27 +11,17 @@ import { predictedActionDisplayWidth } from "./LiveGraphPanel"; const PredictedAction = () => { const intl = useIntl(); const predictionResult = useStore((s) => s.predictionResult); - const [estimatedAction, setEstimatedAction] = useState( - intl.formatMessage({ id: "unknown" }) + const estimatedAction = predictionResult?.detected?.name; + const [liveRegionEstimatedAction, setLiveRegionEstimatedAction] = useState< + string | undefined + >(estimatedAction); + const setLiveRegionEstimatedActionDebounced = useMemo( + () => debounce(setLiveRegionEstimatedAction, 500, { leading: true }), + [] ); - const debouncedEstimatedAction = useMemo( - () => - debounce((name: string | undefined) => { - if (name) { - setEstimatedAction(name); - } else { - setEstimatedAction(intl.formatMessage({ id: "unknown" })); - } - }, 500), - [intl] - ); - - const prevEstimatedAction = usePrevious(predictionResult?.detected?.name); useEffect(() => { - if (prevEstimatedAction !== predictionResult?.detected?.name) { - debouncedEstimatedAction(predictionResult?.detected?.name); - } - }, [debouncedEstimatedAction, predictionResult, prevEstimatedAction]); + setLiveRegionEstimatedActionDebounced(estimatedAction); + }, [setLiveRegionEstimatedActionDebounced, estimatedAction]); return ( { @@ -80,7 +66,7 @@ const PredictedAction = () => { textAlign="center" w={`${predictedActionDisplayWidth}px`} > - {predictionResult?.detected?.name ?? } + {estimatedAction ?? } );