From d6956056a86578d3b1279cf104307cf3e275ef35 Mon Sep 17 00:00:00 2001
From: Lucas Wojciechowski <lucas@mapbox.com>
Date: Wed, 20 Apr 2016 16:19:39 -0700
Subject: [PATCH 1/2] Implemented 'renderstable' event

---
 debug/events.html |  3 ++-
 js/ui/map.js      | 38 ++++++++++++++++++++++++--------------
 2 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/debug/events.html b/debug/events.html
index ebcd89e5148..ec7fcf64cc6 100644
--- a/debug/events.html
+++ b/debug/events.html
@@ -189,7 +189,8 @@
  'zoomstart', 'zoom', 'zoomend',
  'rotatestart', 'rotate', 'rotateend',
  'pitchstart', 'pitch', 'pitchend',
- 'boxzoomstart', 'boxzoomend', 'boxzoomcancel'
+ 'boxzoomstart', 'boxzoomend', 'boxzoomcancel',
+ 'renderstable'
 ].forEach(function (type) {
     var name = 'show-' + type;
     var input = document.createElement('input');
diff --git a/js/ui/map.js b/js/ui/map.js
index 3c2273e5cce..73ea50ed129 100644
--- a/js/ui/map.js
+++ b/js/ui/map.js
@@ -793,18 +793,11 @@ util.extend(Map.prototype, /** @lends Map.prototype */{
     },
 
     /**
-     * Is this map fully loaded? If the style isn't loaded
-     * or it has a change to the sources or style that isn't
-     * propagated to its style, return false.
-     *
-     * @returns {boolean} whether the map is loaded
+     * @returns {boolean} True if all the resources needed to display the
+     *   current viewport have been loaded.
      */
-    loaded: function() {
-        if (this._styleDirty || this._sourcesDirty)
-            return false;
-        if (!this.style || !this.style.loaded())
-            return false;
-        return true;
+    isRenderStable: function() {
+        return (!this._styleDirty && !this.sourcesDirty && this.style && this.style.loaded());
     },
 
     /**
@@ -854,9 +847,18 @@ util.extend(Map.prototype, /** @lends Map.prototype */{
 
         this.fire('render');
 
-        if (this.loaded() && !this._loaded) {
-            this._loaded = true;
-            this.fire('load');
+        if (this.isRenderStable()) {
+            if (!this._wasLoaded) {
+                this._wasLoaded = true;
+                this.fire('load');
+            }
+
+            if (!this._wasRenderStable) {
+                this._wasRenderStable = true;
+                this.fire('renderstable');
+            }
+        } else {
+            this._wasRenderStable = false;
         }
 
         this._frameId = null;
@@ -925,6 +927,9 @@ util.extend(Map.prototype, /** @lends Map.prototype */{
     },
 
     _forwardTileEvent: function(e) {
+        if (e.type === 'tile.load' || e.type === 'tile.add') {
+            this._wasRenderStable = false;
+        }
         this.fire(e.type, util.extend({style: e.target}, e));
     },
 
@@ -962,6 +967,11 @@ util.extend(Map.prototype, /** @lends Map.prototype */{
 
     _onWindowResize: function() {
         this.stop().resize()._update();
+    },
+
+    _onMoveend: function() {
+        this.animationLoop.set(300); // text fading
+        this._rerender();
     }
 });
 

From ee8c5163532f1bdcbbf2de3017401a58087675f8 Mon Sep 17 00:00:00 2001
From: Lucas Wojciechowski <lucas@mapbox.com>
Date: Wed, 20 Apr 2016 16:43:35 -0700
Subject: [PATCH 2/2] Added docs for renderstable event

---
 js/ui/map.js | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/js/ui/map.js b/js/ui/map.js
index 73ea50ed129..84b58d79b91 100644
--- a/js/ui/map.js
+++ b/js/ui/map.js
@@ -1028,3 +1028,13 @@ function removeNode(node) {
         node.parentNode.removeChild(node);
     }
 }
+
+/**
+ * This event is fired when the map becomes "render stable." The map is
+ * considered "render stable" when all the resources needed to display the
+ * current viewport have been loaded. See also `Map#isRenderStable`.
+ *
+ * @event renderstable
+ * @memberof Map
+ * @instance
+ */