From b0dd914576081005ea90be6e49f65fb272ce4df2 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 5 Mar 2021 13:51:22 +0900
Subject: [PATCH] Splash screen :sparkles:

---
 gulpfile.ts                   |  4 +++-
 src/client/init.ts            | 16 ++++++++++++++--
 src/server/web/style.css      | 22 +++++++---------------
 src/server/web/views/base.pug |  6 ++----
 4 files changed, 26 insertions(+), 22 deletions(-)

diff --git a/gulpfile.ts b/gulpfile.ts
index b394e4f44..7d20aba4e 100644
--- a/gulpfile.ts
+++ b/gulpfile.ts
@@ -56,7 +56,9 @@ gulp.task('build:client:script', () => {
 
 gulp.task('build:client:style', () => {
 	return gulp.src(['./src/server/web/style.css', './src/server/web/bios.css', './src/server/web/cli.css'])
-		.pipe(cssnano())
+		.pipe(cssnano({
+			zindex: false
+		}))
 		.pipe(gulp.dest('./built/server/web/'));
 });
 
diff --git a/src/client/init.ts b/src/client/init.ts
index 596312ff7..1c44e7f23 100644
--- a/src/client/init.ts
+++ b/src/client/init.ts
@@ -220,11 +220,23 @@ components(app);
 
 await router.isReady();
 
-//document.body.innerHTML = '<div id="app"></div>';
+const splash = document.getElementById('splash');
+// 念のためnullチェック(HTMLが古い場合があるため(そのうち消す))
+if (splash) splash.addEventListener('transitionend', () => {
+	splash.remove();
+});
+
+const rootEl = document.createElement('div');
+document.body.appendChild(rootEl);
+app.mount(rootEl);
 
-app.mount('body');
 reactionPicker.init();
 
+if (splash) {
+	splash.style.opacity = '0';
+	splash.style.pointerEvents = 'none';
+}
+
 watch(defaultStore.reactiveState.darkMode, (darkMode) => {
 	import('@/scripts/theme').then(({ builtinThemes }) => {
 		const themes = builtinThemes.concat(getThemes());
diff --git a/src/server/web/style.css b/src/server/web/style.css
index 6ab2c2154..acf8e083d 100644
--- a/src/server/web/style.css
+++ b/src/server/web/style.css
@@ -3,17 +3,20 @@ html {
 	color: var(--fg);
 }
 
-#ini {
+#splash {
 	position: fixed;
-	z-index: 1;
+	z-index: 10000;
 	top: 0;
 	left: 0;
 	width: 100%;
 	height: 100%;
 	cursor: wait;
+	background-color: var(--bg);
+	opacity: 1;
+	transition: opacity 0.5s ease;
 }
 
-#ini > svg {
+#splash > img {
 	position: absolute;
 	top: 0;
 	right: 0;
@@ -22,16 +25,5 @@ html {
 	margin: auto;
 	width: 64px;
 	height: 64px;
-	animation: ini 0.6s infinite linear;
-	color: var(--accent);
-	fill: currentColor;
-}
-
-@keyframes ini {
-	from {
-		transform: rotate(0deg);
-	}
-	to {
-		transform: rotate(360deg);
-	}
+	pointer-events: none;
 }
diff --git a/src/server/web/views/base.pug b/src/server/web/views/base.pug
index 1b053438d..9a5c67424 100644
--- a/src/server/web/views/base.pug
+++ b/src/server/web/views/base.pug
@@ -44,8 +44,6 @@ html
 			| JavaScriptを有効にしてください
 			br
 			| Please turn on your JavaScript
-		div#ini.
-			<svg viewBox="0 0 50 50">
-				<path d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z" />
-			</svg>
+		div#splash
+			img(src='/favicon.ico')
 		block content