[Libreoffice-commits] online.git: Branch 'distro/collabora/collabora-online-4-0' - loleaflet/src

[Michael Meeks (via logerrit)]

 loleaflet/src/layer/marker/ProgressOverlay.js |   54 +++++++++++++++++++++++++-
 loleaflet/src/map/Map.js                      |   14 ------
 2 files changed, 55 insertions(+), 13 deletions(-)

New commits:
commit d010919b8f2f21688b49c45dd7e32e8642cc1c4f
Author:     Michael Meeks <michael.meeks at collabora.com>
AuthorDate: Fri Oct 4 17:11:46 2019 +0100
Commit:     Michael Meeks <michael.meeks at collabora.com>
CommitDate: Wed Oct 9 13:49:42 2019 +0200

    Spinner: accelerate the spin, and hold off showing the progress bar.
    
    Ironically the progress bar makes people think something is slow.
    
    Change-Id: I3fb85ba1a44cdb436159abe5448d71b666020c5c
    Reviewed-on: https://gerrit.libreoffice.org/80242
    Tested-by: Aron Budea <aron.budea at collabora.com>
    Reviewed-by: Michael Meeks <michael.meeks at collabora.com>

diff --git a/loleaflet/src/layer/marker/ProgressOverlay.js b/loleaflet/src/layer/marker/ProgressOverlay.js
index 93835c583..7100243d8 100644
--- a/loleaflet/src/layer/marker/ProgressOverlay.js
+++ b/loleaflet/src/layer/marker/ProgressOverlay.js
@@ -6,13 +6,15 @@
 L.ProgressOverlay = L.Layer.extend({
 
 	options: {
-		spinnerSpeed: 15
+		spinnerSpeed: 30
 	},
 
 	initialize: function (latlng, size) {
 		this._latlng = L.latLng(latlng);
 		this._size = size;
+		this._percent = 0;
 		this._initLayout();
+		this.intervalTimer = undefined;
 	},
 
 	onAdd: function () {
@@ -67,6 +69,55 @@ L.ProgressOverlay = L.Layer.extend({
 		L.DomUtil.setPosition(this._container, pos);
 	},
 
+	shutdownTimer: function() {
+		if (this.intervalTimer)
+			clearInterval(this.intervalTimer);
+		this.intervalTimer = undefined;
+	},
+
+	// Show the progress bar, but only if things seem slow
+	delayedStart: function(map, label, bar) {
+		this.setLabel(label);
+		this.setBar(false);
+		this.setValue(0);
+
+		this.shutdownTimer();
+
+		var self = this;
+		self.state = 0;
+		this.intervalTimer = setInterval(
+			function() {
+				self.state = self.state + 1;
+				switch (self.state) {
+				// 0.5s -> start the spinner
+				case 1:
+					if (!map.hasLayer(self))
+						map.addLayer(self);
+					break;
+				// 2s -> enable the progress bar if we have one & it's low
+				case 4:
+					if (self._percent < 80)
+						self.setBar(bar);
+					break;
+				// 3s -> show the bar if it's not up.
+				case 6:
+					self.setBar(bar);
+					break;
+				}
+				if (!map.hasLayer(self)) {
+					map.addLayer(self);
+				}
+			}, 500 /* ms */);
+	},
+
+	// Hide ourselves if there is anything to hide
+	end: function(map) {
+		this.shutdownTimer();
+		if (map.hasLayer(this)) {
+			map.removeLayer(this);
+		}
+	},
+
 	setLabel: function (label) {
 		if (this._label.innerHTML !== label) {
 			this._label.innerHTML = label;
@@ -83,6 +134,7 @@ L.ProgressOverlay = L.Layer.extend({
 	},
 
 	setValue: function (value) {
+		this._percent = value;
 		this._bar.style.width = value + '%';
 		this._value.innerHTML = value + '%';
 	}
diff --git a/loleaflet/src/map/Map.js b/loleaflet/src/map/Map.js
index 10525ae73..2c802d5e9 100644
--- a/loleaflet/src/map/Map.js
+++ b/loleaflet/src/map/Map.js
@@ -347,22 +347,12 @@ L.Map = L.Evented.extend({
 			this.fire('showbusy', {label: label});
 			return;
 		}
-
-		this._progressBar.setLabel(label);
-		this._progressBar.setBar(bar);
-		this._progressBar.setValue(0);
-
-		if (!this.hasLayer(this._progressBar)) {
-			this.addLayer(this._progressBar);
-		}
+		this._progressBar.delayedStart(this, label, bar);
 	},
 
 	hideBusy: function () {
 		this.fire('hidebusy');
-
-		if (this.hasLayer(this._progressBar)) {
-			this.removeLayer(this._progressBar);
-		}
+		this._progressBar.end(this);
 	},
 
 	setZoom: function (zoom, options) {