From 08ff4926c7684a5f0c37ae4aec8bdb5b75721cc4 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Mon, 11 Apr 2022 23:11:11 +0900
Subject: [PATCH] enhance(client): show loading icon on splash screen

Close #8481
---
 CHANGELOG.md                                  |  1 +
 packages/backend/src/server/web/style.css     | 47 ++++++++++++++++++-
 .../backend/src/server/web/views/base.pug     |  3 +-
 3 files changed, 49 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index efd1c15ecc..f6fafad14c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,7 @@ You should also include the user name that made the change.
 
 ### Improvements
 - Improve webhook @syuilo
+- Client: Show loading icon on splash screen @syuilo
 
 ### Bugfixes
 - API: parameter validation of users/show was wrong
diff --git a/packages/backend/src/server/web/style.css b/packages/backend/src/server/web/style.css
index 43fbe1ab06..9c4cd4b9bf 100644
--- a/packages/backend/src/server/web/style.css
+++ b/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);
+	}
+}
diff --git a/packages/backend/src/server/web/views/base.pug b/packages/backend/src/server/web/views/base.pug
index abacb1ccfc..1513208310 100644
--- a/packages/backend/src/server/web/views/base.pug
+++ b/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