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')