Improved loading animation

TapSchemaManagerWebApp/src/main/webapp/WEB-INF/templates/master.xhtml

@@ -18,10 +18,17 @@
         <h:outputStylesheet library="css" name="style.css"></h:outputStylesheet>
         <h:outputScript library="js" name="lib/jquery-1.11.3.min.js"></h:outputScript>
         <h:outputScript library="js" name="lib/bootstrap.min.js"></h:outputScript>
+        <h:outputScript library="js" name="script.js"></h:outputScript>
         <ui:insert name="scripts"></ui:insert>
     </h:head>
 
     <h:body>
         <ui:insert name="content" />
+
+        <div class="loading hide">
+            <div class="icon-wrapper">
+                <span class="glyphicon glyphicon-refresh animate-spin"></span>
+            </div>
+        </div>
     </h:body>
 </html>
\ No newline at end of file

TapSchemaManagerWebApp/src/main/webapp/consistencyChecks.xhtml

@@ -82,7 +82,7 @@
                                 Back
                             </h:commandLink>
                             &#160;
-                            <h:commandLink action="#{consistency.proceed()}" class="btn btn-primary">
+                            <h:commandLink action="#{consistency.proceed()}" class="btn btn-primary" onclick="showWaiting()">
                                 Proceed
                                 <span class="glyphicon glyphicon-arrow-right"></span>
                             </h:commandLink>

TapSchemaManagerWebApp/src/main/webapp/resources/js/edit-tapschema.js

@@ -162,10 +162,10 @@
             }
             switch (data.status) {
                 case "begin":
-                    $('.loading').removeClass('hide');
+                    showWaiting();
                     break;
                 case "complete":
-                    $('.loading').addClass('hide');
+                    hideWaiting();
                     break;
             }
         });

TapSchemaManagerWebApp/src/main/webapp/resources/js/script.js

+
+window.showWaiting = function () {
+    $('.loading').removeClass('hide');
+};
+window.hideWaiting = function () {
+    $('.loading').addClass('hide');
+};

TapSchemaManagerWebApp/src/main/webapp/schemaSelection.xhtml

@@ -54,7 +54,7 @@
                                         </p>
                                     </div>
                                     <div class="form-group">
-                                        <h:commandButton value="Edit Tapschema" class="btn btn-primary" action="#{schemaSelection.edit()}"></h:commandButton>
+                                        <h:commandButton value="Edit Tapschema" class="btn btn-primary" action="#{schemaSelection.edit()}" onclick="showWaiting()"></h:commandButton>
                                     </div>
                                 </div>
                             </h:panelGroup>
@@ -78,7 +78,7 @@
                                     </div>
 
                                     <div class="form-group">
-                                        <h:commandButton value="Create TAP_SCHEMA" class="btn btn-primary" action="#{schemaSelection.create()}"></h:commandButton>
+                                        <h:commandButton value="Create TAP_SCHEMA" class="btn btn-primary" action="#{schemaSelection.create()}" onclick="showWaiting()"></h:commandButton>
                                     </div>
                                 </div>
                             </h:panelGroup>

TapSchemaManagerWebApp/src/main/webapp/tapSchemaEditing.xhtml

@@ -35,7 +35,7 @@
                     <f:ajax execute="@form" render="@form" onevent="TSM.notifyUpdate"/>
                 </h:commandLink>
                 &#160;
-                <h:commandLink class="btn btn-info" action="#{tapSchemaEditing.reload()}">
+                <h:commandLink class="btn btn-info" action="#{tapSchemaEditing.reload()}" onclick="showWaiting()">
                     <span class="glyphicon glyphicon-refresh"></span>
                     Reload all
                 </h:commandLink>
@@ -788,11 +788,5 @@
                 </div>
             </div>
         </div>
-
-        <div class="loading hide">
-            <div class="icon-wrapper">
-                <span class="glyphicon glyphicon-refresh animate-spin"></span>
-            </div>
-        </div>
     </ui:define>
 </ui:composition>
\ No newline at end of file