Adding startTransition to defer GPX renderings.

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]);

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();

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]);

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]);