From 89b38145e0783cd9fb4c020b6c174bc4521ac3b8 Mon Sep 17 00:00:00 2001
From: Matthew Somerville <matthew-github@dracos.co.uk>
Date: Thu, 31 May 2018 10:18:35 +0100
Subject: Improve handling of loading spinner display.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Going back to /around from /report/new can trigger loadend (and the
spinner hiding function) twice (if the strategy activation starts a
read), with triggerRead aborting that read and triggering the event
itself. This means the spinner is not displayed, as the count falls
below 0. We could pin the count above 0, but instead let’s log each
layer ID while ‘active’ and switch off when they’re all gone.
---
 CHANGELOG.md             |  1 +
 web/js/map-OpenLayers.js | 22 +++++++++++++++++-----
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9ee873306..aea940ce0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -45,6 +45,7 @@
         - Fixed CSS padding/overflow bug during sidebar "drawer" animations. #2132
         - Response template containing double quote now works.
         - A few small display issues with RTL text display.
+        - Improve handling of loading spinner display. #2059
     - Admin improvements:
         - Inspectors can set non_public status of reports. #1992
         - Default start date is shown on the dashboard.
diff --git a/web/js/map-OpenLayers.js b/web/js/map-OpenLayers.js
index a96e65953..2e62336ed 100644
--- a/web/js/map-OpenLayers.js
+++ b/web/js/map-OpenLayers.js
@@ -1,3 +1,15 @@
+if (!Object.keys) {
+  Object.keys = function(obj) {
+    var result = [];
+    for (var prop in obj) {
+      if (Object.prototype.hasOwnProperty.call(obj, prop)) {
+        result.push(prop);
+      }
+    }
+    return result;
+  };
+}
+
 var fixmystreet = fixmystreet || {};
 
 fixmystreet.utils = fixmystreet.utils || {};
@@ -247,18 +259,18 @@ $.extend(fixmystreet.utils, {
        * the spinner in the DOM.
        */
       loading_spinner: {
-          count: 0,
+          count: {},
           show: function() {
-              fixmystreet.maps.loading_spinner.count++;
-              if (fixmystreet.maps.loading_spinner.count > 0) {
+              fixmystreet.maps.loading_spinner.count[this.id] = 1;
+              if (Object.keys(fixmystreet.maps.loading_spinner.count).length) {
                   // Show the loading indicator over the map
                   $('#loading-indicator').removeClass('hidden');
                   $('#loading-indicator').attr('aria-hidden', false);
               }
           },
           hide: function() {
-              fixmystreet.maps.loading_spinner.count--;
-              if (fixmystreet.maps.loading_spinner.count <= 0) {
+              delete fixmystreet.maps.loading_spinner.count[this.id];
+              if (!Object.keys(fixmystreet.maps.loading_spinner.count).length) {
                   // Remove loading indicator
                   $('#loading-indicator').addClass('hidden');
                   $('#loading-indicator').attr('aria-hidden', true);
-- 
cgit v1.2.3