Add service loading navigation button animation

frontend/sass/index.scss

@@ -7,6 +7,16 @@ body {
 	flex-direction: row;
 }
 
+#service-buttons {
+	flex-grow: 1;
+
+	overflow: hidden auto;
+}
+
+*:focus {
+	outline-color: rgb(118, 93, 176);
+}
+
 #navigation {
 	display: flex;
 	flex-direction: column;
@@ -16,72 +26,12 @@ body {
 	body.fullscreen & {
 		display: none;
 	}
-}
 
-#navigation > :not(#service-buttons) {
+	> :not(#service-buttons) {
 		flex-shrink: 0;
 	}
 
-#service-buttons {
+	button {
-	flex-grow: 1;
-
-	overflow: hidden auto;
-}
-
-#service-selector {
-	display: block;
-	margin: 0;
-	padding: 0;
-
-	list-style: none;
-}
-
-#service-selector::-webkit-scrollbar {
-	width: 6px;
-}
-
-#service-selector [draggable] {
-	user-select: none;
-	background-color: rgb(43, 43, 43);
-}
-
-#service-selector [draggable] img {
-	-webkit-user-drag: none;
-	user-drag: none;
-}
-
-#service-selector .drag-target button::after,
-#service-last-drag-position.drag-target {
-	content: "";
-	height: 4px;
-	transform: translateY(-50%);
-	border: 0;
-	box-sizing: border-box;
-	background: #fff9;
-}
-
-#service-selector .drag-target-self button::after {
-	height: var(--nav-width);
-	border: 1px dashed #fff;
-	transform: none;
-}
-
-#service-selector .drag-target button::after {
-	position: absolute;
-	left: 0;
-	top: 0;
-	width: 100%;
-}
-
-#service-selector .drag-target::after {
-	top: 75% !important;
-}
-
-*:focus {
-	outline-color: rgb(118, 93, 176);
-}
-
-#navigation button {
 		position: relative;
 		display: block;
 		width: var(--nav-width);
@@ -94,35 +44,51 @@ body {
 		background: transparent;
 
 		cursor: pointer;
-}
+		border-radius: 0;
 
-#navigation button:focus {
+		&:focus {
 			outline: none;
 			background: #fff3 !important;
 		}
 
-#navigation button img {
+		&:hover {
-	width: calc(var(--nav-width) / 2);
+			background-color: #fff3;
 		}
 
-#navigation button i {
+		i {
 			font-size: calc(var(--nav-width) / 2);
 		}
 
-#service-selector li {
+		img {
-	position: relative;
+			width: calc(var(--nav-width) / 2);
+		}
+	}
 }
 
-#service-selector li button,
+#service-selector {
-#navigation > button {
+	display: block;
+	margin: 0;
+	padding: 0;
+
+	list-style: none;
+
+	&::-webkit-scrollbar {
+		width: 6px;
+	}
+
+	li {
+		position: relative;
+
+		button {
 			border-radius: 0;
 		}
 
-#service-selector li.active button {
+		&.active button {
 			background-color: #fff2;
 		}
 
-#service-selector li.loaded button::before {
+		&.loading, &.loaded {
+			button::before {
 				content: "";
 				display: block;
 				position: absolute;
@@ -132,22 +98,59 @@ body {
 				height: 75%;
 				border-right: 4px solid #ffffff3e;
 			}
+		}
 
-/*#service-selector li.loaded::after {*/
+		&.loading button::before {
-/*    content: "";*/
+			animation: loading-button-after linear 500ms infinite alternate;
-/*    position: absolute;*/
+			height: 45%;
-/*    top: 50%;*/
-/*    right: 2px;*/
-/*    transform: translateY(-50%);*/
-/*    width: 4px;*/
-/*    height: 4px;*/
 
-/*    background-color: #fff;*/
+			@keyframes loading-button-after {
-/*    border-radius: 100%;*/
+				from {
-/*}*/
+					opacity: 0.1;
+				}
+				to {
+					opacity: 0.5;
+				}
+			}
+		}
+	}
 
-#navigation button:hover {
+	[draggable] {
-	background-color: #fff3;
+		user-select: none;
+		background-color: rgb(43, 43, 43);
+
+		img {
+			-webkit-user-drag: none;
+			user-drag: none;
+		}
+	}
+
+	.drag-target-self button::after {
+		height: var(--nav-width);
+		border: 1px dashed #fff;
+		transform: none;
+	}
+
+	.drag-target button::after {
+		position: absolute;
+		left: 0;
+		top: 0;
+		width: 100%;
+	}
+
+	.drag-target::after {
+		top: 75% !important;
+	}
+}
+
+#service-selector .drag-target button::after,
+#service-last-drag-position.drag-target {
+	content: "";
+	height: 4px;
+	transform: translateY(-50%);
+	border: 0;
+	box-sizing: border-box;
+	background: #fff9;
 }
 
 #history {

frontend/ts/index.ts

@@ -469,6 +469,7 @@ function loadService(serviceId: number, service: any) {
 
         document.querySelector('#services > .loader')?.classList.remove('hidden');
         service.view = document.createElement('webview');
+        updateNavigation(); // Start loading animation
         service.view.setAttribute('enableRemoteModule', 'false');
         service.view.setAttribute('partition', 'persist:service_' + service.partition);
         service.view.setAttribute('autosize', 'true');
@@ -653,10 +654,16 @@ function updateNavigation() {
     for (let i = 0; i < services.length; i++) {
         const service = services[i];
 
+        if (!service.li) continue;
+
         // Active?
         if (parseInt(selectedService) === i) service.li.classList.add('active');
         else service.li.classList.remove('active');
 
+        // Loading?
+        if (service.view && !service.viewReady) service.li.classList.add('loading');
+        else service.li.classList.remove('loading');
+
         // Loaded?
         if (service.viewReady) service.li.classList.add('loaded');
         else service.li.classList.remove('loaded');