From 3fc36b66a9191772ec1745edf13f858d2590a04b Mon Sep 17 00:00:00 2001
From: Bryan Housel <bryan@mapbox.com>
Date: Thu, 16 Feb 2017 10:19:07 -0500
Subject: [PATCH] Let D3 handle the delay rather than using setTimeout

This also fixes a race condition where it was possible to lose a flash
message that was created while the previous one was transitioning away.
---
 modules/ui/flash.js | 32 ++++++++++++--------------------
 1 file changed, 12 insertions(+), 20 deletions(-)

diff --git a/modules/ui/flash.js b/modules/ui/flash.js
index d4dc40cfe..4c908d206 100644
--- a/modules/ui/flash.js
+++ b/modules/ui/flash.js
@@ -1,12 +1,13 @@
 import * as d3 from 'd3';
 
-var timeout;
-
 
 export function uiFlash(showDuration, fadeDuration) {
     showDuration = showDuration || 1500;
     fadeDuration = fadeDuration || 250;
 
+    d3.select('#flash').selectAll('.content')
+        .interrupt();
+
     var content = d3.select('#flash').selectAll('.content')
         .data([0]);
 
@@ -15,24 +16,15 @@ export function uiFlash(showDuration, fadeDuration) {
         .attr('class', 'content fillD')
         .merge(content);
 
-    if (timeout) {
-        window.clearTimeout(timeout);
-    }
-
-    timeout = window.setTimeout(function() {
-        content
-            .transition()
-            .duration(fadeDuration)
-            .style('opacity', 0)
-            .style('transform', 'scaleY(.1)')
-            .on('end', function() {
-                content.remove();
-                timeout = null;
-            });
-
-        return true;
-    }, showDuration);
-
+    content
+        .transition()
+        .delay(showDuration)
+        .duration(fadeDuration)
+        .style('opacity', 0)
+        .style('transform', 'scaleY(.1)')
+        .on('interrupt end', function() {
+            content.remove();
+        });
 
     return content;
 }