Add map widget loading indicator

ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts

@@ -39,7 +39,7 @@ import { BehaviorSubject, Observable, of } from 'rxjs';
 import { filter } from 'rxjs/operators';
 import { Polyline } from './polyline';
 import { Polygon } from './polygon';
-import { createTooltip, parseArray, safeExecute } from '@home/components/widget/lib/maps/maps-utils';
+import { createLoadingDiv, createTooltip, parseArray, safeExecute } from '@home/components/widget/lib/maps/maps-utils';
 import { WidgetContext } from '@home/models/widget-component.models';
 import { DatasourceData } from '@shared/models/widget.models';
 import { deepClone, isDefinedAndNotNull } from '@core/utils';
@@ -60,6 +60,8 @@ export default abstract class LeafletMap {
     markersData: FormattedData[] = [];
     polygonsData: FormattedData[] = [];
     defaultMarkerIconInfo: { size: number[], icon: Icon };
+    loadingDiv: JQuery<HTMLElement>;
+    loading = false;
 
     protected constructor(public ctx: WidgetContext,
                           public $container: HTMLElement,
@@ -169,6 +171,24 @@ export default abstract class LeafletMap {
         }
     }
 
+    public setLoading(loading: boolean) {
+      if (this.loading !== loading) {
+        this.loading = loading;
+        this.ready$.subscribe(() => {
+          if (this.loading) {
+            if (!this.loadingDiv) {
+              this.loadingDiv = createLoadingDiv(this.ctx.translate.instant('common.loading'));
+            }
+            this.$container.append(this.loadingDiv[0]);
+          } else {
+            if (this.loadingDiv) {
+              this.loadingDiv.remove();
+            }
+          }
+        });
+      }
+    }
+
     public setMap(map: L.Map) {
         this.map = map;
         if (this.options.useDefaultCenterPosition) {

ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts

@@ -85,6 +85,7 @@ export class MapWidgetController implements MapWidgetInterface {
           textSearch: null,
           dynamic: true
         };
+        this.map.setLoading(true);
         this.ctx.defaultSubscription.subscribeAllForPaginatedData(this.pageLink, null);
     }
 
@@ -279,6 +280,7 @@ export class MapWidgetController implements MapWidgetInterface {
         if (this.settings.draggableMarker) {
           this.map.setDataSources(formattedData);
         }
+        this.map.setLoading(false);
     }
 
     resize() {

ui-ngx/src/app/modules/home/components/widget/lib/maps/maps-utils.ts

@@ -322,3 +322,28 @@ export function calculateNewPointCoordinate(coordinate: number, imageSize: numbe
   }
   return pointCoordinate;
 }
+
+export function createLoadingDiv(loadingText: string): JQuery<HTMLElement> {
+  return $(`
+    <div style="
+          z-index: 12;
+          position: absolute;
+          top: 0;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          flex-direction: column;
+          align-content: center;
+          align-items: center;
+          justify-content: center;
+          display: flex;
+          background: rgba(255,255,255,0.7);
+          font-size: 16px;
+          font-family: Roboto;
+          font-weight: 400;
+          text-transform:  uppercase;
+        ">
+        <span>${loadingText}</span>
+    </div>
+  `);
+}