Added UI loading indications to the HTML app

src/web/App.js

@@ -30,6 +30,7 @@ var App = function(categories, operations, defaultFavourites, defaultOptions) {
     this.chef        = new Chef();
     this.manager     = new Manager(this);
 
+    this.baking      = false;
     this.autoBake_   = false;
     this.progress    = 0;
     this.ingId       = 0;
@@ -67,6 +68,37 @@ App.prototype.handleError = function(err) {
 };
 
 
+/**
+ * Updates the UI to show if baking is in process or not.
+ *
+ * @param {bakingStatus}
+ */
+App.prototype.setBakingStatus = function(bakingStatus) {
+    this.baking = bakingStatus;
+
+    var inputLoadingIcon = document.querySelector("#input .title .loading-icon"),
+        outputLoadingIcon = document.querySelector("#output .title .loading-icon"),
+        inputElement = document.querySelector("#input-text"),
+        outputElement = document.querySelector("#output-text");
+
+    if (bakingStatus) {
+        inputLoadingIcon.style.display = "inline-block";
+        outputLoadingIcon.style.display = "inline-block";
+        inputElement.classList.add("disabled");
+        outputElement.classList.add("disabled");
+        inputElement.disabled = true;
+        outputElement.disabled = true;
+    } else {
+        inputLoadingIcon.style.display = "none";
+        outputLoadingIcon.style.display = "none";
+        inputElement.classList.remove("disabled");
+        outputElement.classList.remove("disabled");
+        inputElement.disabled = false;
+        outputElement.disabled = false;
+    }
+};
+
+
 /**
  * Calls the Chef to bake the current input using the current recipe.
  *
@@ -76,6 +108,10 @@ App.prototype.handleError = function(err) {
 App.prototype.bake = async function(step) {
     var response;
 
+    if (this.baking) return;
+
+    this.setBakingStatus(true);
+
     try {
         response = await this.chef.bake(
             this.getInput(),         // The user's input
@@ -94,6 +130,8 @@ App.prototype.bake = async function(step) {
         this.handleError(response.error);
     }
 
+    this.setBakingStatus(false);
+
     this.options  = response.options;
     this.dishStr  = response.type === "html" ? Utils.stripHtmlTags(response.result, true) : response.result;
     this.progress = response.progress;

src/web/css/structure/layout.css

@@ -430,3 +430,36 @@ span.btn img {
     border-top: none;
     margin-top: 0;
 }
+
+
+@-moz-keyframes spinner {
+    from { -moz-transform: rotate(0deg); }
+    to { -moz-transform: rotate(359deg); }
+}
+@-webkit-keyframes spinner {
+    from { -webkit-transform: rotate(0deg); }
+    to { -webkit-transform: rotate(359deg); }
+}
+@keyframes spinner {
+    from {transform:rotate(0deg);}
+    to {transform:rotate(359deg);}
+}
+
+.loading-icon::before {
+    content: "\21bb";
+}
+
+.loading-icon {
+    -webkit-animation-name: spinner;
+    -webkit-animation-duration: 1000ms;
+    -webkit-animation-iteration-count: infinite;
+    -webkit-animation-timing-function: linear;
+    -moz-animation-name: spinner;
+    -moz-animation-duration: 1000ms;
+    -moz-animation-iteration-count: infinite;
+    -moz-animation-timing-function: linear;
+    -ms-animation-name: spinner;
+    -ms-animation-duration: 1000ms;
+    -ms-animation-iteration-count: infinite;
+    -ms-animation-timing-function: linear;
+}

src/web/html/index.html

@@ -100,6 +100,7 @@
                     <div id="input" class="split no-select">
                         <div class="title no-select">
                             <label for="input-text">Input</label>
+                            <div class="loading-icon" style="display: none"></div>
                             <div class="btn-group io-btn-group">
                                 <button type="button" class="btn btn-default btn-sm" id="clr-io"><img aria-hidden="true" src="<%- require('../static/images/recycle-16x16.png') %>" alt="Recycle Icon"/> Clear I/O</button>
                                 <button type="button" class="btn btn-default btn-sm" id="reset-layout"><img aria-hidden="true" src="<%- require('../static/images/layout-16x16.png') %>" alt="Grid Icon"/> Reset layout</button>
@@ -116,6 +117,7 @@
                     <div id="output" class="split">
                         <div class="title no-select">
                             <label for="output-text">Output</label>
+                            <div class="loading-icon" style="display: none"></div>
                             <div class="btn-group io-btn-group">
                                 <button type="button" class="btn btn-default btn-sm" id="save-to-file" title="Save to file"><img aria-hidden="true" src="<%- require('../static/images/save_as-16x16.png') %>" alt="Save Icon"/> Save to file</button>
                                 <button type="button" class="btn btn-default btn-sm" id="switch" title="Move output to input"><img aria-hidden="true" src="<%- require('../static/images/switch-16x16.png') %>" alt="Switch Icon"/> Move output to input</button>