Reduce visual transitions when updating delays

sncf-station/src/TrainsTable.js

@@ -11,7 +11,7 @@ import {
 } from "@mui/material"
 import {CSSTransition, TransitionGroup} from 'react-transition-group'
 import {useQueries, useQuery} from "@tanstack/react-query";
-import {useCallback, useEffect, useMemo, useRef} from "react";
+import {useCallback, useEffect, useMemo, useRef, useState} from "react";
 
 const StyledTableRow = styled(TableRow)(({ theme, tabletype }) => ({
   'tbody &:nth-of-type(odd)': {
@@ -140,7 +140,12 @@ function TrainRow({train, tableType, date, time}) {
         .then(response => response.json()),
     enabled: !!trip.id,
   })
-  const realtimeTripData = realtimeTripQuery.data ?? {}
+
+  const [realtimeTripData, setRealtimeTripData] = useState({})
+  useEffect(() => {
+    if (realtimeTripQuery.data)
+      setRealtimeTripData(realtimeTripQuery.data)
+  }, [realtimeTripQuery.data])
   const tripScheduleRelationship = realtimeTripData.schedule_relationship ?? 0
 
   const realtimeQuery = useQuery({
@@ -149,7 +154,11 @@ function TrainRow({train, tableType, date, time}) {
         .then(response => response.json()),
     enabled: !!train.id,
   })
-  const realtimeData = realtimeQuery.data ?? {}
+  const [realtimeData, setRealtimeData] = useState({})
+  useEffect(() => {
+    if (realtimeQuery.data)
+      setRealtimeData(realtimeQuery.data)
+  }, [realtimeQuery.data])
   const stopScheduleRelationship = realtimeData.schedule_relationship ?? 0
 
   const canceled = tripScheduleRelationship === 3 || stopScheduleRelationship === 1