router spinner

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