From ed9ce1bb3c4ba67e3a847170b3b6b041a629d15e Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Thu, 20 Feb 2014 17:31:40 +0000
Subject: [PATCH] Add deploy-in-action spinner

---
 public/index.html  |  2 +-
 public/red/main.js | 10 ++++++++--
 public/style.css   | 12 ++++++++++++
 3 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/public/index.html b/public/index.html
index 40a8a2d32..19653d0b0 100644
--- a/public/index.html
+++ b/public/index.html
@@ -68,7 +68,7 @@
                 </ul>
             </div>
             <div class="btn-group pull-right">
-                <a id="btn-deploy" class="btn action-deploy disabled" href="#"><i class="icon-upload"></i> Deploy</a>
+                <a id="btn-deploy" class="btn action-deploy disabled" href="#"><i id="btn-icn-deploy" class="icon-upload"></i> Deploy</a>
             </div>
         </div>
     </div>
diff --git a/public/red/main.js b/public/red/main.js
index c2465f211..4591c2174 100644
--- a/public/red/main.js
+++ b/public/red/main.js
@@ -75,12 +75,17 @@ var RED = function() {
                 }
             }
             var nns = RED.nodes.createCompleteNodeSet();
-
+            
+            $("#btn-icn-deploy").removeClass('icon-upload');
+            $("#btn-icn-deploy").addClass('spinner');
+            RED.view.dirty(false);
+            
             d3.xhr("flows").header("Content-type", "application/json")
                            .post(JSON.stringify(nns),function(err,resp) {
+                    $("#btn-icn-deploy").removeClass('spinner');
+                    $("#btn-icn-deploy").addClass('icon-upload');
                     if (resp && resp.status == 204) {
                         RED.notify("Successfully deployed","success");
-                        RED.view.dirty(false);
                         RED.nodes.eachNode(function(node) {
                             if (node.changed) {
                                 node.dirty = true;
@@ -91,6 +96,7 @@ var RED = function() {
                         RED.history.markAllDirty();
                         RED.view.redraw();
                     } else {
+                        RED.view.dirty(true);
                         if (resp) {
                             RED.notify("<strong>Error</strong>: "+resp,"error");
                         } else {
diff --git a/public/style.css b/public/style.css
index 70d2bbd74..0ed9f06ab 100644
--- a/public/style.css
+++ b/public/style.css
@@ -815,3 +815,15 @@ div.tab-config-list-users {
     padding: 1px 5px;
 }
 
+i.spinner {
+    display: inline-block;
+    width: 14px;
+    height: 14px;
+    line-height: 14px;
+    vertical-align: text-top;
+    margin-top: 0px;
+    background: url(spin.gif) no-repeat 50% 50%;
+}
+    
+    
+