Adds spinner on layers loading

ekylibre · Sep 19, 2017 · bf5733a · bf5733a
1 parent 18928c5
commit bf5733a
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 7 deletions.
diff --git a/app/assets/javascripts/map_editor.js.coffee b/app/assets/javascripts/map_editor.js.coffee
@@ -300,13 +300,25 @@
     setDynamicSeries: ->
       return unless @options.dynamic_series?
 
-      $.getJSON @options.dynamic_series, (data) =>
-        $.extend(true, @options.show, data.show)
-        @_refreshReferenceLayerGroup()
-        @_refreshControls()
-
-        #Ensure edition layer is on top
-        @edition.bringToFront() if @edition
+      $.ajax
+        method: 'GET'
+        dataType: 'json'
+        url: @options.dynamic_series
+        beforeSend: () =>
+          @dynamic_loading = new L.control(position: "bottomleft")
+          @dynamic_loading.onAdd = (map) =>
+            L.DomUtil.create('div', 'leaflet-dynamic-loading')
+
+          @map.addControl @dynamic_loading
+        success: (data) =>
+          $.extend(true, @options.show, data.show)
+          @_refreshReferenceLayerGroup()
+          @_refreshControls()
+        complete: () =>
+          @map.removeControl @dynamic_loading
+
+      #Ensure edition layer is on top
+      @edition.bringToFront() if @edition
 
     updateFeature: (feature_id, attributeName, attributeValue) ->
       this.updateFeatureProperties(feature_id, attributeName, attributeValue)

diff --git a/app/themes/tekyla/stylesheets/leaflet.scss b/app/themes/tekyla/stylesheets/leaflet.scss
@@ -1076,4 +1076,15 @@ span.leaflet-importer-geojson, span.leaflet-importer-gml {
     display: block;
     height: 44px;
   }
+}
+
+.leaflet-dynamic-loading {
+  color: $text-color;
+  @include is-icon;
+  @include use-icon(circle-o-notch);
+  @include animation(loading-rotate 2s infinite linear);
+  @include text-align(center);
+  width: $map-button-size;
+  height: $map-button-size;
+  line-height: $map-button-size;
 }