From 0e87ecd8cf8cee362f166230a1c847cf1d06872c Mon Sep 17 00:00:00 2001
From: Emmy D'Anello <ynerant@emy.lu>
Date: Sat, 10 Feb 2024 20:54:12 +0100
Subject: [PATCH] Reduce visual transitions when updating delays

---
 sncf-station/src/TrainsTable.js | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/sncf-station/src/TrainsTable.js b/sncf-station/src/TrainsTable.js
index 67a95a6..538da19 100644
--- a/sncf-station/src/TrainsTable.js
+++ b/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