#303 2 new loading bars added for bulk and cache options

ec-jrc · Sep 12, 2023 · 3aa25ef · 3aa25ef
1 parent c5eba44
commit 3aa25ef
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 8 deletions.
diff --git a/sources/Re3gistry2/src/main/webapp/jsp/ajaxServices/browseLoader.jsp b/sources/Re3gistry2/src/main/webapp/jsp/ajaxServices/browseLoader.jsp
@@ -656,21 +656,28 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="modal-footer">
+                            <div id="browseLoaderModalFooter" class="modal-footer">
                                 <div class="col-sm-6">
                                     <button type="reset" class="btn btn-danger width100"><i class="fas fa-sync-alt"></i> ${localization.getString("reset")}</button>                                    
                                 </div>
                                 <div class="col-sm-6">
-                                    <button type="submit" class="btn btn-primary width100">
+                                    <button id="btnStartBulkImport" type="submit" class="btn btn-primary width100">
                                         <i class="fas fa-upload"></i> ${localization.getString("label.start.bulkimport")}
                                     </button>
-                                </div>
+                                    <script>
+            $(document).on('click', '#btnStartBulkImport', function (e) {
+                $('#bufferLoader').html('<div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>');
+            });
+        </script>
+
+                                </div> 
+
                             </div>
+                                                                        <div id="bufferLoader"></div>
                         </div>
                     </form>
                 </div>
-            </div>
-
+            </div>                                                        
             <% } else { %>
             <div class="col-sm-6"></div>
             <%}%>

diff --git a/sources/Re3gistry2/src/main/webapp/jsp/registryManagerDataExport.jsp b/sources/Re3gistry2/src/main/webapp/jsp/registryManagerDataExport.jsp
@@ -75,6 +75,7 @@
 <!DOCTYPE html>
 <html lang="${localization.getString("property.localeid")}" role="document">
     <%@include file="includes/head.inc.jsp" %>
+    <link rel="stylesheet" href="res/css/css-loader.css">
     <body>
         <%@include file="includes/header.inc.jsp"%>
 
@@ -129,7 +130,7 @@
                     <h5 class="card-title"></h5>
                     <p class="card-text">${localization.getString("label.solrdescription")}</p>
                     <% if (SolrHandler.checkSolrCompleteIndexinglRunning()) { %>
-                    <p class="card-text mt-3 alert alert-warning">${localization.getString("label.solrrunning")}</p>
+                    <div class="card-text mt-3 alert alert-warning"><p>${localization.getString("label.solrrunning")}</p> <div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div> </div>
                     <% } else {%>
                     <a id="startSolrIndexing" class="btn btn-primary btn-md<%=buttonDisabled%>" href="?<%=BaseConstants.KEY_REQUEST_STARTINDEX%>=<%=BaseConstants.KEY_BOOLEAN_STRING_TRUE%>" role="button">${localization.getString("label.solrstartindexing")}</a>
                     <script>
@@ -157,8 +158,9 @@
                 <div class="card-body">
                     <h5 class="card-title"></h5>
                     <p class="card-text">${localization.getString("label.cachingdescription")}</p>
-                    <% if (CacheHelper.checkCacheCompleteRunning()) { %>
-                    <p class="card-text mt-3 alert alert-warning">${localization.getString("label.cacheallrunning")}</p>
+                    <% if (CacheHelper.checkCacheCompleteRunning()) {                
+                    %>
+                    <div class="card-text mt-3 alert alert-warning"><p>${localization.getString("label.cacheallrunning")}</p> <div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div> </div>
                     <% } else {%>
                     <div class="row">
                         <div class="col-sm-4">

diff --git a/sources/Re3gistry2/src/main/webapp/res/css/css-loader.css b/sources/Re3gistry2/src/main/webapp/res/css/css-loader.css
@@ -0,0 +1,64 @@
+/*
+Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
+Click nbfs://nbhost/SystemFileSystem/Templates/JSP_Servlet/CascadeStyleSheet.css to edit this template
+*/
+/* 
+    Created on : 08-sep-2023, 9:45:16
+    Author     : ubarrigon
+*/
+.lds-ellipsis {
+  display: flex;
+  position: relative;
+  width: 80px;
+  height: 80px;
+  margin: 0 auto;
+}
+.lds-ellipsis div {
+  position: absolute;
+  top: 33px;
+  width: 13px;
+  height: 13px;
+  border-radius: 50%;
+  background: #ccc;
+  animation-timing-function: cubic-bezier(0, 1, 1, 0);
+}
+.lds-ellipsis div:nth-child(1) {
+  left: 8px;
+  animation: lds-ellipsis1 0.6s infinite;
+}
+.lds-ellipsis div:nth-child(2) {
+  left: 8px;
+  animation: lds-ellipsis2 0.6s infinite;
+}
+.lds-ellipsis div:nth-child(3) {
+  left: 32px;
+  animation: lds-ellipsis2 0.6s infinite;
+}
+.lds-ellipsis div:nth-child(4) {
+  left: 56px;
+  animation: lds-ellipsis3 0.6s infinite;
+}
+@keyframes lds-ellipsis1 {
+  0% {
+    transform: scale(0);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+@keyframes lds-ellipsis3 {
+  0% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(0);
+  }
+}
+@keyframes lds-ellipsis2 {
+  0% {
+    transform: translate(0, 0);
+  }
+  100% {
+    transform: translate(24px, 0);
+  }
+}