Merge pull request #4960 from wri/FLAG-1297-fix-sluggish-map

FLAG-1297 - Fix unresponsive map when panning or zooming

Author: wri7tno

components/map/selectors.js

@@ -48,7 +48,9 @@ export const getMapViewport = createSelector([getMapSettings], (settings) => {
     pitch,
     latitude: center?.lat,
     longitude: center?.lng,
-    transitionDuration: 500,
+    // The map transition needs to always be 0 otherwise the map becomes sluggish when panned or zoomed. Only set a
+    // different value when flying between locations and only temporarily.
+    transitionDuration: 0,
   };
 });
 

components/ui/map/component.jsx

@@ -271,6 +271,9 @@ class Map extends Component {
           onResize={this.onResize}
           onLoad={this.onLoad}
           getCursor={getCursor}
+          // If the `transitionDuration` is not 0, then the map becomes sluggish when panned or zoomed. Nevertheless,
+          // we still want a transition when flying between locations.
+          transitionDuration={flying ? viewport.transitionDuration || 0 : 0}
           transitionInterpolator={new FlyToInterpolator()}
           transitionEasing={easeCubic}
           preventStyleDiffing