From f4c03316d2a54960c051722cb6f550e0d2266472 Mon Sep 17 00:00:00 2001
From: John Firebaugh <john.firebaugh@gmail.com>
Date: Wed, 27 Mar 2013 10:30:48 -0700
Subject: [PATCH] Loding indicator for tag reference (#1161)

---
 css/app.css                          |   5 +++++
 img/{loader.gif => loader-white.gif} | Bin
 js/id/ui/loading.js                  |  14 ++++++++++----
 js/id/ui/tag_reference.js            |  23 +++++++++++++++++++----
 4 files changed, 34 insertions(+), 8 deletions(-)
 rename img/{loader.gif => loader-white.gif} (100%)

diff --git a/css/app.css b/css/app.css
index de0a54921..ae4a953af 100644
--- a/css/app.css
+++ b/css/app.css
@@ -1288,6 +1288,11 @@ img.wiki-image {
     border-radius: 4px;
 }
 
+.tag-reference-spinner {
+    display: block;
+    margin: auto;
+}
+
 /* Map Controls */
 
 .map-control {
diff --git a/img/loader.gif b/img/loader-white.gif
similarity index 100%
rename from img/loader.gif
rename to img/loader-white.gif
diff --git a/js/id/ui/loading.js b/js/id/ui/loading.js
index fe161acec..3b8258dc2 100644
--- a/js/id/ui/loading.js
+++ b/js/id/ui/loading.js
@@ -3,12 +3,18 @@ iD.ui.loading = function(selection, message, blocking) {
 
     var loadertext = modal.select('.content')
         .classed('loading-modal', true)
-        .append('div').attr('class','modal-section fillL');
+        .append('div')
+        .attr('class', 'modal-section fillL');
 
-    loadertext.append('img').attr('class','loader').attr('src', 'img/loader.gif');
-    loadertext.append('h3').text(message || '');
+    loadertext.append('img')
+        .attr('class', 'loader')
+        .attr('src', 'img/loader-white.gif');
 
-    modal.select('button.close').attr('class','hide');
+    loadertext.append('h3')
+        .text(message || '');
+
+    modal.select('button.close')
+        .attr('class', 'hide');
 
     return modal;
 };
diff --git a/js/id/ui/tag_reference.js b/js/id/ui/tag_reference.js
index bccfc6946..747be3eac 100644
--- a/js/id/ui/tag_reference.js
+++ b/js/id/ui/tag_reference.js
@@ -31,18 +31,33 @@ iD.ui.TagReference = function(entity, tag) {
 
         selection.classed('cf', true);
 
+        var spinner = selection.append('img')
+            .attr('class', 'tag-reference-spinner')
+            .attr('src', 'img/loader-white.gif');
+
         taginfo.docs(tag, function(err, docs) {
+            spinner
+                .style('position', 'absolute')
+                .transition()
+                .style('opacity', 0)
+                .remove();
+
+            var referenceBody = selection.append('div')
+                .attr('class', 'tag-reference-wrap')
+                .style('opacity', 0);
+
+            referenceBody
+                .transition()
+                .style('opacity', 1);
+
             if (!err && docs) {
                 docs = findLocal(docs);
             }
 
             if (!docs || !docs.description) {
-                return selection.text(t('inspector.no_documentation_key'));
+                return referenceBody.text(t('inspector.no_documentation_key'));
             }
 
-            var referenceBody = selection.append('div')
-                .attr('class','tag-reference-wrap');
-
             if (docs.image && docs.image.thumb_url_prefix) {
                 referenceBody
                     .append('img')