[WebUI] Add preloader

diff --git a/interface/css/rspamd.css b/interface/css/rspamd.css
index af410a3bb92873c159089062daae4d93dd2496d3..10ea971ecf8f93ff4d2289ac1cf0a9180cf7171a 100644 (file)
--- a/interface/css/rspamd.css
+++ b/interface/css/rspamd.css
@@ -567,3 +567,14 @@ table#symbolsTable input[type="number"] {
 .token.lf::before {
     content: "";
 }
+
+/* Preloader */
+.blinking {
+    animation: blinker 1.2s ease-in-out infinite;
+}
+@keyframes blinker {
+    50% {
+        -webkit-filter: invert(1);
+        filter: invert(1);
+    }
+}

diff --git a/interface/index.html b/interface/index.html
index d1e94364623ca7ea7953b2def2218ff4e7b13599..ce0e380c499fcd7ddf55e91cd447ff9ef9c49f65 100644 (file)
--- a/interface/index.html
+++ b/interface/index.html
@@ -74,6 +74,16 @@
 
 <div class="notification-area"></div>
 
+<div id="preloader" class="container-fluid">
+       <div id="loading" class="position-absolute align-items-center my-3 text-primary blinking">
+               <div class="spinner-border align-middle" role="status" aria-hidden="true"></div>
+               <strong class="ml-3">Loading...</strong>
+       </div>
+       <div class="row position-absolute w-100 h-100 align-items-center text-center">
+               <img class="img-fluid mh-100 mx-auto" src="./img/rspamd_logo_navbar.png" alt="Rspamd" />
+       </div>
+</div>
+
 <div id="mainUI" class="d-none">
 
        <div class="container-fluid">

diff --git a/interface/js/app/rspamd.js b/interface/js/app/rspamd.js
index 8361bb92528e349e45a5ef10931aa8d66109310f..654979fe592fe5e2da26f3d6943e81bb714fe445 100644 (file)
--- a/interface/js/app/rspamd.js
+++ b/interface/js/app/rspamd.js
@@ -283,6 +283,7 @@ function ($, D3pie, visibility, NProgress, stickyTabs, tab_stat, tab_graph, tab_
             $(".ro-hide").show();
         }
 
+        $("#preloader").addClass("d-none");
         $("#navBar, #mainUI").removeClass("d-none");
         $(".nav-tabs-sticky").stickyTabs({initialTab:"#status_nav"});
     }
@@ -434,6 +435,8 @@ function ($, D3pie, visibility, NProgress, stickyTabs, tab_stat, tab_graph, tab_
         tab_symbols.setup(ui, tables);
         tab_upload.setup(ui, tables);
         selData = tab_graph.setup(ui);
+
+        $("#loading").addClass("d-none");
     };
 
     ui.connect = function () {