From a53ddfa63e8153f007520b6d992332c73e930bb0 Mon Sep 17 00:00:00 2001
From: evlist <vdv@dyomedea.com>
Date: Thu, 17 Nov 2022 21:05:12 +0100
Subject: [PATCH] Adding startTransition to defer GPX renderings.

---
 src/components/map/Gpx.tsx    | 4 ++--
 src/components/map/Gpxes.tsx  | 4 ++--
 src/components/map/Trk.tsx    | 4 ++--
 src/components/map/Trkseg.tsx | 4 ++--
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/map/Gpx.tsx b/src/components/map/Gpx.tsx
index 2194bd0..141e66a 100644
--- a/src/components/map/Gpx.tsx
+++ b/src/components/map/Gpx.tsx
@@ -1,4 +1,4 @@
-import react, { useEffect, useState } from 'react';
+import react, { startTransition, useEffect, useState } from 'react';
 import dispatch from '../../workers/dispatcher-main';
 import Trk from './Trk';
 import { TileKeyObject, Rectangle } from './types';
@@ -22,7 +22,7 @@ export const Gpx: react.FC<GpxProperties> = (props: GpxProperties) => {
         },
       });
       console.log(`<Gpx>, gpx: ${JSON.stringify(gpx)}`);
-      setGpx(gpx);
+      startTransition(() => setGpx(gpx));
     };
     getGpx();
   }, [props.id]);
diff --git a/src/components/map/Gpxes.tsx b/src/components/map/Gpxes.tsx
index 90b6bd7..5f435ea 100644
--- a/src/components/map/Gpxes.tsx
+++ b/src/components/map/Gpxes.tsx
@@ -1,4 +1,4 @@
-import react, { useEffect, useState } from 'react';
+import react, { startTransition, useEffect, useState } from 'react';
 import dispatch from '../../workers/dispatcher-main';
 import Gpx from './Gpx';
 import { TileKeyObject, Rectangle } from './types';
@@ -21,7 +21,7 @@ export const Gpxes: react.FC<GpxesProperties> = (props: GpxesProperties) => {
         },
       });
       console.log(`Gpxes, visibles: ${JSON.stringify(gpxes)}`);
-      setVisibleGpxes(gpxes);
+      startTransition(() => setVisibleGpxes(gpxes));
     };
     if (props.viewPort !== undefined) {
       getVisibleGpxes();
diff --git a/src/components/map/Trk.tsx b/src/components/map/Trk.tsx
index b3ef309..d9355d5 100644
--- a/src/components/map/Trk.tsx
+++ b/src/components/map/Trk.tsx
@@ -1,4 +1,4 @@
-import react, { useEffect, useState } from 'react';
+import react, { startTransition, useEffect, useState } from 'react';
 import dispatch from '../../workers/dispatcher-main';
 import { TileKeyObject, Rectangle } from './types';
 import getUri from '../../lib/ids';
@@ -22,7 +22,7 @@ export const Trk: react.FC<TrkProperties> = (props: TrkProperties) => {
         },
       });
       console.log(`<Trk>, gpx: ${JSON.stringify(trk)}`);
-      setTrk(trk);
+      startTransition(() => setTrk(trk));
     };
     getTrk();
   }, [props.id]);
diff --git a/src/components/map/Trkseg.tsx b/src/components/map/Trkseg.tsx
index 9b4e3f2..7f70b6f 100644
--- a/src/components/map/Trkseg.tsx
+++ b/src/components/map/Trkseg.tsx
@@ -1,4 +1,4 @@
-import react, { useEffect, useState } from 'react';
+import react, { startTransition, useEffect, useState } from 'react';
 import { lon2tile, lat2tile } from '../../lib/geo';
 import dispatch from '../../workers/dispatcher-main';
 import { TileKeyObject, Rectangle, Point, geoPoint } from './types';
@@ -26,7 +26,7 @@ export const Trkseg: react.FC<TrksegProperties> = (props: TrksegProperties) => {
         },
       });
       console.log(`<Trkseg>, gpx: ${JSON.stringify(trk)}`);
-      setTrkseg(trk);
+      startTransition(() => setTrkseg(trk));
     };
     getTrkseg();
   }, [props.id]);