enhance(client): show loading icon on splash screen

Close #8481

packages/backend/src/server/web/style.css

@@ -16,7 +16,7 @@ html {
 	transition: opacity 0.5s ease;
 }
 
-#splash > img {
+#splashIcon {
 	position: absolute;
 	top: 0;
 	right: 0;
@@ -27,3 +27,48 @@ html {
 	height: 64px;
 	pointer-events: none;
 }
+
+#splashSpinner {
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	margin: auto;
+	display: inline-block;
+	width: 28px;
+	height: 28px;
+	transform: translateY(70px);
+}
+
+#splashSpinner:before,
+#splashSpinner:after {
+	content: " ";
+	display: block;
+	box-sizing: border-box;
+	width: 28px;
+	height: 28px;
+	border-radius: 50%;
+	border: solid 4px;
+}
+
+#splashSpinner:before {
+	border-color: currentColor;
+	opacity: 0.3;
+}
+
+#splashSpinner:after {
+	position: absolute;
+	top: 0;
+	border-color: currentColor transparent transparent transparent;
+	animation: splashSpinner 0.5s linear infinite;
+}
+
+@keyframes splashSpinner {
+	0% {
+		transform: rotate(0deg);
+	}
+	100% {
+		transform: rotate(360deg);
+	}
+}

packages/backend/src/server/web/views/base.pug

@@ -59,5 +59,6 @@ html
 			br
 			| Please turn on your JavaScript
 		div#splash
-			img(src= icon || '/static-assets/splash.png')
+			img#splashIcon(src= icon || '/static-assets/splash.png')
+			div#splashSpinner
 		block content