perf: memoize coordinate processing to prevent UI freeze

mapper/src/App.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, useMemo } from 'react';
 import * as leaflet from 'leaflet';
 import { MapContainer, Polyline, TileLayer, useMap, useMapEvents } from 'react-leaflet';
 import Datetime from 'react-datetime';
@@ -153,9 +153,22 @@ function FitBounds({ coords, mapState, end, duration }) {
 function Map({end, duration, slider, mapState, setMapState}) {
 	const [data, loading] = useSensor('owntracks', 'OwnTracks', end, duration);
 
-	const range = parseSlider(end, duration, slider);
+	const range = useMemo(() => parseSlider(end, duration, slider), [end, duration, slider]);
 
-	const coords = data.length ? data.filter(x => !range || (x.time >= range[0] && x.time <= range[1])).map(({ lat, lon }) => [lat, lon]).filter(([lat, lon]) => typeof lat === 'number' && typeof lon === 'number' && isFinite(lat) && isFinite(lon)) : [];
+	const coords = useMemo(() => {
+		if (!data || !data.length) return [];
+
+		const result = [];
+		for (const point of data) {
+			if ((!range || (point.time >= range[0] && point.time <= range[1]))) {
+				const { lat, lon } = point;
+				if (typeof lat === 'number' && typeof lon === 'number' && isFinite(lat) && isFinite(lon)) {
+					result.push([lat, lon]);
+				}
+			}
+		}
+		return result;
+	}, [data, range]);
 
 	const handleSubmit = (e) => {
 		e.preventDefault();