[TASK] both API tools: add a throbber to indicate request-in-progress

css/api-style.css

@@ -345,6 +345,51 @@ span.cm-atom {
   color:#66327C !important;
 }
 
+/* Progress spinner animation */
+@keyframes rotating {
+    from {
+        transform: rotate(0deg);
+        -ms-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -webkit-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+        -ms-transform: rotate(360deg);
+        -moz-transform: rotate(360deg);
+        -webkit-transform: rotate(360deg);
+        -o-transform: rotate(360deg);
+    }
+}
+
+@-webkit-keyframes rotating /* Safari and Chrome */ {
+    from {
+        transform: rotate(0deg);
+        -ms-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -webkit-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+        -ms-transform: rotate(360deg);
+        -moz-transform: rotate(360deg);
+        -webkit-transform: rotate(360deg);
+        -o-transform: rotate(360deg);
+    }
+}
+
+.loader {
+    -webkit-animation: rotating 1s linear infinite;
+    -moz-animation: rotating 1s linear infinite;
+    -ms-animation: rotating 1s linear infinite;
+    -o-animation: rotating 1s linear infinite;
+    animation: rotating 1s linear infinite;
+    width: 25px;height:25px;
+}
+
+
 /* Rest-tool-specific stuff */
 
 #rest_method {

js/api-main.js

@@ -15,6 +15,7 @@
   var request         = $(command_wrapper).find('#request');
   var status          = $(command_wrapper).find('#status');
   var info            = $(command_wrapper).find('#info');
+  var spinner = $(".loader");
 
   var remote = new ripple.Remote({
     trusted:        true,
@@ -339,6 +340,7 @@
     if (is_response && parsed.id === id._c) {
       if (!WAITING) return;
       else WAITING = false;
+      spinner.hide();
 
       var request_header = '<span class="request_name">'
       + selected_request.name;
@@ -591,6 +593,7 @@
     WAITING                  = true;
     selected_request.message = message;
     selected_request.t       = Date.now();
+    spinner.show();
 
     request.message = prepare_request(message);
     request.request();

js/apitool-rest.js

@@ -6,6 +6,7 @@ var response_code = $("#rest_responsecode");
 var rest_url = $('#rest_url');
 var rest_method = $("#rest_method");
 var selected_command = $("#selected_command");
+var spinner = $(".loader");
 
 var GET = "GET";
 var POST = "POST";
@@ -291,6 +292,8 @@ function send_request() {
             url: URL_BASE + path
         }).done(success_output).fail(error_output).always(reset_sending_status);
     }
+    
+    spinner.show();
 }
 
 function error_output(xhr,status,statusText) {
@@ -306,6 +309,7 @@ function success_output(body,status,xhr) {
 function reset_sending_status() {
     response_body.removeClass('obscured');
     request_button.removeClass('depressed');
+    spinner.hide();
 }
 
 function reset_response_area() {

rest-api-tool.html

@@ -147,7 +147,10 @@ mixpanel.init("132d42885e094171f34467fc54da6fab");
           </div>
           <div id='output' class='io'>
             <h2>Response</h2>
-            <p id='rest_responsecode'></p>
+            <div>
+                <img class="loader" src="assets/img/rippleThrobber.png" style="vertical-align: middle; display:none;"/>
+                <span id='rest_responsecode'></span>
+            </div>
             <div id='response_body'></div>
             <div id='tooltip'></div>
           </div>

ripple-api-tool.html

@@ -149,7 +149,10 @@ mixpanel.init("132d42885e094171f34467fc54da6fab");
               <li id='stream_show'>show</li>
               <li id='stream_pause'>pause</li>
             </ul>
-            <div id='status'></div>
+            <div>
+                <img class="loader" src="assets/img/rippleThrobber.png" style="vertical-align: middle; display:none;"/>
+                <p id='status'></p>
+            </div>
             <p id='info'></p>
             <div id='response'></div>
             <div id='tooltip'></div>