Add loading screen

css/app.css

@@ -248,6 +248,12 @@ button small {
     box-shadow:0 0 5px #000;
 }
 
+.modal.loading-pane {
+    width:300px;
+    height:200px;
+    margin-left:-160px;
+}
+
 .shaded:before {
     content:'';
     background:rgba(0,0,0,0.5);

index.html

@@ -26,6 +26,7 @@
         <script type='text/javascript' src='js/id/renderer/markers.js'></script>
         <script type='text/javascript' src='js/id/ui/inspector.js'></script>
         <script type='text/javascript' src='js/id/ui/commit.js'></script>
+        <script type='text/javascript' src='js/id/ui/loading.js'></script>
         <script type='text/javascript' src='js/id/ui/userpanel.js'></script>
 
         <script type='text/javascript' src='js/id/actions/modes.js'></script>

js/iD/id.js

@@ -68,13 +68,15 @@ var iD = function(container) {
         .attr('class', 'save')
         .html("Save<small id='as-username'></small>")
         .on('click', function() {
-            function save() {
+            function save(e) {
+                d3.select('.shaded').remove();
+                var l = iD.loading('committing changes to openstreetmap');
                 connection.putChangeset(map.history.changes(), e.comment, function() {
-                    shaded.remove();
+                    l.remove();
                 });
             }
             connection.authenticate(function() {
-                var shaded = d3.select(document.body)
+                shaded = d3.select(document.body)
                     .append('div').attr('class', 'shaded')
                     .on('click', function() {
                         if (d3.event.target == this) shaded.remove();

js/iD/ui/Inspector.js

@@ -102,7 +102,7 @@ iD.Inspector = function() {
             selection.append('button')
                 .attr('class', 'save').text('Save')
                 .on('click', function() {
-                    event.changeTags(entity, newtags(table));
+                    event.changeTags(entity, update());
                 });
 
             selection.append('button')
@@ -113,26 +113,6 @@ iD.Inspector = function() {
         });
     }
 
-    // TODO: there must be a function for this
-    function unentries(x) {
-        var obj = {};
-        for (var i = 0; i < x.length; i++) {
-            if (obj[x[i].key] && x[i].value) obj[x[i].key] = x[i].value;
-        }
-        return obj;
-    }
-
-    function formtags(table) {
-        var t = newtags(table);
-        if (Object.keys(t).indexOf('') === -1) t[''] = '';
-        return d3.entries(t);
-    }
-
-    function newtags(table) {
-        var inputs = table.selectAll('input.tag-value')
-            .data();
-        return unentries(inputs);
-    }
 
     return d3.rebind(inspector, event, 'on');
 };