Added preloading animation

Author: Offerel

CHANGELOG.md

@@ -1,5 +1,9 @@
+### v2.2.3
+- Added preloading animation
+  
 ### v2.2.2
 - Fix for notifications
+- Fix for unvisible settings
 
 ### v2.2.0
 - Added notifications for pushed links

composer.json

@@ -12,7 +12,7 @@
 		"role": "Developer"
 	}
 	],
-	"version": "2.2.2",
+	"version": "2.2.3",
 	"repositories": [
 		{
 			"type": "composer",

skins/elastic/plugin.css

@@ -1,3 +1,36 @@
+.db-spinner {
+	width: 50px;
+	height: 50px;
+	border-radius: 50%;
+	background-color: transparent;
+	border: 10px solid #2229;
+	border-top: 10px solid #03a9f4;
+	border-bottom: 100x solid #03a9f4;
+	-webkit-animation: 1s spin linear infinite;
+	animation: 1s spin linear infinite;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	z-index: 100;
+}
+@-webkit-keyframes spin {
+    from {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    } to {
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}
+@keyframes spin {
+    from {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    } to {
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}
 #bmframe{height: 100%;border: 1px solid #bbb;border-top-left-radius: 5px;border-bottom-left-radius: 5px;width: 100%;}
 #taskmenu a.bookmarks::before {
     content: "\f02e"}

skins/elastic/plugin.min.css

@@ -1,3 +1,36 @@
+.db-spinner {
+	width: 50px;
+	height: 50px;
+	border-radius: 50%;
+	background-color: transparent;
+	border: 10px solid #2229;
+	border-top: 10px solid #03a9f4;
+	border-bottom: 100x solid #03a9f4;
+	-webkit-animation: 1s spin linear infinite;
+	animation: 1s spin linear infinite;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	z-index: 100;
+}
+@-webkit-keyframes spin {
+    from {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    } to {
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}
+@keyframes spin {
+    from {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    } to {
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}
 #taskbar a.button-bookmarks span.button-inner {
     background: url(images/bookmark.png) 5px 0 no-repeat;
 }

skins/larry/plugin.css

@@ -18,6 +18,10 @@ function h_del(t, o, format) {
 
 function bookmarks_cmd() {
 	if(document.getElementById("bookmarkpane").clientWidth != "300") {
+		let dv = document.createElement("div");
+		dv.classList.add("db-spinner");
+		dv.id = "db-spinner";
+		document.getElementById("layout").parentNode.appendChild(dv);
 		rcmail.http_post("syncmarks/get_bookmarks", "_url=2")
 	}
 	else {
@@ -37,9 +41,14 @@ function urladded(t) {
 
 function get_bookmarks(response) {
 	bookmarks = JSON.parse(response.data);
-
 	$('#bookmarkpane').html(bookmarks);
 	document.getElementById("bookmarkpane").style.width = "300px";
+	let node = document.getElementById("db-spinner");
+	setTimeout(function() {
+		if (node.parentNode) {
+			node.parentNode.removeChild(node);
+		}
+	}, 700);
 }
 
 function en_noti(elem) {