Disable query executing if its already in progress

static/css/app.css

@@ -128,6 +128,16 @@
   border: none;
   box-shadow: none;
   background: #7eb54e;
+  float: left;
+}
+
+#input .actions #query_progress {
+  display: none;
+  float: left;
+  margin-left: 12px;
+  line-height: 30px;
+  height: 30px;
+  color: #aaa;
 }
 
 #input .actions .btn:focus {
@@ -202,7 +212,7 @@
 }
 
 #results td div {
-  max-width: 200px;
+  max-width: 350px;
   max-height: 51px;
   overflow: hidden;
   text-overflow: ellipsis;

static/index.html

@@ -31,6 +31,7 @@
         <div id="custom_query"></div>
         <div class="actions">
           <input type="button" id="run" value="Run Query" class="btn btn-sm btn-primary" />
+          <div id="query_progress">Please wait, query is executing...</div>
         </div>
       </div>
     </div>

static/js/app.js

@@ -143,8 +143,14 @@ function showTableStructure() {
 function runQuery() {
   setCurrentTab("table_query");
 
+  $("#run").attr("disabled", "disabled");
+  $("#query_progress").show();
+
   executeQuery(editor.getValue(), function(data) {
     buildTable(data);
+
+    $("#run").removeAttr("disabled");
+    $("#query_progress").hide();
     $("#input").show();
     $("#output").removeClass("full");
   });