router spinner

src/modules/Editor.ts

@@ -14,7 +14,7 @@ import {
   setAddress,
   setChanged,
   setDistance,
-  setIsEmpty,
+  setIsEmpty, setIsRouting,
   setLogo,
   setMarkersShown,
   setMode,
@@ -81,9 +81,19 @@ export class Editor {
       map, routerMoveStart, lockMapClicks, setDistance: this.setDistance, triggerOnChange, editor: this,
     });
 
-    this.stickers = new Stickers({ map, lockMapClicks, triggerOnChange, editor: this });
+    this.stickers = new Stickers({
+      map,
+      lockMapClicks,
+      triggerOnChange,
+      editor: this
+    });
+
     this.router = new Router({
-      map, lockMapClicks, setRouterPoints: this.setRouterPoints, pushPolyPoints
+      map,
+      lockMapClicks,
+      pushPolyPoints,
+      setRouterPoints: this.setRouterPoints,
+      setIsRouting: this.setIsRouting,
     });
 
     this.switches = {
@@ -176,6 +186,7 @@ export class Editor {
   setAddress: typeof setAddress = value => store.dispatch(setAddress(value));
   setPublic: typeof setPublic = value => store.dispatch(setPublic(value));
   setIsEmpty: typeof setIsEmpty = value => store.dispatch(setIsEmpty(value));
+  setIsRouting: typeof setIsRouting = value => store.dispatch(setIsRouting(value));
 
   setMarkersShown = (value: boolean): void => {
     if (this.getState().markers_shown !== value) store.dispatch(setMarkersShown(value));

src/modules/Router.ts

@@ -13,6 +13,7 @@ interface IWaypoint {
 }
 
 interface Props {
+  setIsRouting: typeof editor.setIsRouting,
   map: Map,
   setRouterPoints: typeof editor.setRouterPoints,
   pushPolyPoints: typeof editor.pushPolyPoints,
@@ -21,12 +22,13 @@ interface Props {
 
 export class Router {
   constructor({
-    map, lockMapClicks, setRouterPoints, pushPolyPoints
+    map, lockMapClicks, setRouterPoints, pushPolyPoints, setIsRouting,
   }: Props) {
     this.waypoints = [];
     this.lockMapClicks = lockMapClicks;
     this.setRouterPoints = setRouterPoints;
     this.pushPolyPoints = pushPolyPoints;
+    this.setIsRouting = setIsRouting;
 
     const routeLine = r => Routing.line(r, {
       styles: [
@@ -58,11 +60,22 @@ export class Router {
         geometryOnly: false,
       },
       useHints: false,
-    }).on('waypointschanged', this.updateWaypointsCount);
+    })
+      .on('routingstart', this.showSpinner)
+      .on('routesfound routingerror', this.hideSpinner)
+      .on('waypointschanged', this.updateWaypointsCount);
 
     this.router.addTo(map);
   }
 
+  showSpinner = () => {
+    this.setIsRouting(true);
+  };
+
+  hideSpinner = () => {
+    this.setIsRouting(false);
+  };
+
   pushWaypointOnClick = ({ latlng: { lat, lng } }: { latlng: ILatLng }): void => {
     const waypoints = this.router.getWaypoints().filter(({ latLng }) => !!latLng);
     this.router.setWaypoints([...waypoints, { lat, lng }]);
@@ -153,6 +166,7 @@ export class Router {
   };
 
   waypoints: Array<IWaypoint> = [];
+  setIsRouting: Props['setIsRouting'];
   lockMapClicks: Props['lockMapClicks'];
   setRouterPoints: Props['setRouterPoints'];
   pushPolyPoints: Props['pushPolyPoints'];