commit 921d4e2: [WebUI] Add preloader

[moisseev]

Author: moisseev
Date: 2020-07-26 18:01:15 +0300
URL: https://github.com/rspamd/rspamd/commit/921d4e2ce19e08d1335a85d8bd22eeb1fce75ca5

[WebUI] Add preloader

---
 interface/css/rspamd.css   | 11 +++++++++++
 interface/index.html       | 10 ++++++++++
 interface/js/app/rspamd.js |  3 +++
 3 files changed, 24 insertions(+)

diff --git a/interface/css/rspamd.css b/interface/css/rspamd.css
index af410a3bb..10ea971ec 100644
--- 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;
+}
+ at keyframes blinker {
+    50% {
+        -webkit-filter: invert(1);
+        filter: invert(1);
+    }
+}
diff --git a/interface/index.html b/interface/index.html
index d1e943646..ce0e380c4 100644
--- 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 8361bb925..654979fe5 100644
--- 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 () {