diff --git a/mapper/src/App.js b/mapper/src/App.js index a363785..e5332b4 100644 --- a/mapper/src/App.js +++ b/mapper/src/App.js @@ -107,7 +107,7 @@ function MapEvents({ onMapChange }) { return null; } -function FitBounds({ coords, mapState, end, duration }) { +function FitBounds({ coords, mapState, end, duration, loading }) { const map = useMap(); const prevEndRef = useRef(); const prevDurationRef = useRef(); @@ -133,8 +133,11 @@ function FitBounds({ coords, mapState, end, duration }) { prevDurationRef.current = duration; }, [end, duration]); - // Effect 2: Acts on `coords` changes, but only if the flag is set. + // Effect 2: Acts on `coords` changes, but only if the flag is set and data isn't loading. useEffect(() => { + // Do not run this effect if new data is being fetched. + if (loading) return; + // A refit is needed on initial load (mapState.center is null) // or if the flag has been set by the other effect. if ((mapState.center === null || refitNeeded.current) && coords.length > 0) { @@ -145,7 +148,7 @@ function FitBounds({ coords, mapState, end, duration }) { // Reset the flag after the fit is performed. refitNeeded.current = false; } - }, [coords, mapState.center, map]); + }, [coords, mapState.center, map, loading]); return null; } @@ -192,7 +195,7 @@ function Map({end, duration, slider, mapState, setMapState}) { {mapState.center && } - +