From dc6c504016f1a807448ea36fe8eb14a22954f6c6 Mon Sep 17 00:00:00 2001
From: NoriDev <m1nthing2322@gmail.com>
Date: Fri, 13 Oct 2023 16:58:46 +0900
Subject: [PATCH] =?UTF-8?q?enhance(frontend):=20=E3=82=B9=E3=83=94?=
 =?UTF-8?q?=E3=83=8A=E3=83=BC=E3=81=AE=E3=83=87=E3=82=B6=E3=82=A4=E3=83=B3?=
 =?UTF-8?q?=E3=82=92=E5=A4=89=E6=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG_CHERRYPICK.md                       |  1 +
 packages/backend/src/server/web/style.css     | 30 +++++++----
 .../backend/src/server/web/views/base.pug     | 11 +---
 .../src/components/global/MkLoading.vue       | 52 +++++++++----------
 4 files changed, 49 insertions(+), 45 deletions(-)

diff --git a/CHANGELOG_CHERRYPICK.md b/CHANGELOG_CHERRYPICK.md
index e29884f691..ab5d648a17 100644
--- a/CHANGELOG_CHERRYPICK.md
+++ b/CHANGELOG_CHERRYPICK.md
@@ -50,6 +50,7 @@ Misskey의 전체 변경 사항을 확인하려면, [CHANGELOG.md#2023xx](CHANGE
 - Enhance: 그룹 대화에서 읽음 표시를 개선
 - Enhance: cli, bios 페이지 개선
 - Enhance: 서버와 연결이 끊겼을 때 stream indicator가 즉시 표시되지 않도록 (MisskeyIO/misskey#172)
+- Enhance: 스피너 디자인 변경
 - Fix: (Friendly) 길게 누르면 표시되는 계정 관리 다이얼로그의 UI 관련 오류 수정
 - Fix: 서브 노트 기능 오류
   - 서브 노트에서 더 보기 버튼을 사용할 수 없음
diff --git a/packages/backend/src/server/web/style.css b/packages/backend/src/server/web/style.css
index 5873487f89..90e68c9666 100644
--- a/packages/backend/src/server/web/style.css
+++ b/packages/backend/src/server/web/style.css
@@ -54,17 +54,12 @@ html {
 	left: 0;
 	width: 28px;
 	height: 28px;
-	fill-rule: evenodd;
-	clip-rule: evenodd;
+	animation: splashSpinner 2s linear infinite;
+}
+#splashSpinner > .spinner > .path {
+	stroke: var(--accent);
 	stroke-linecap: round;
-	stroke-linejoin: round;
-	stroke-miterlimit: 1.5;
-}
-#splashSpinner > .spinner.bg {
-	opacity: 0.275;
-}
-#splashSpinner > .spinner.fg {
-	animation: splashSpinner 0.5s linear infinite;
+	animation: dash 1.2s ease-in-out infinite;
 }
 
 @keyframes splashSpinner {
@@ -75,3 +70,18 @@ html {
 		transform: rotate(360deg);
 	}
 }
+
+@keyframes dash {
+	0% {
+		stroke-dasharray: 1, 150;
+		stroke-dashoffset: 0;
+	}
+	50% {
+		stroke-dasharray: 90, 150;
+		stroke-dashoffset: -35;
+	}
+	100% {
+		stroke-dasharray: 90, 150;
+		stroke-dashoffset: -124;
+	}
+}
diff --git a/packages/backend/src/server/web/views/base.pug b/packages/backend/src/server/web/views/base.pug
index 7653262dd4..904ab7c2d7 100644
--- a/packages/backend/src/server/web/views/base.pug
+++ b/packages/backend/src/server/web/views/base.pug
@@ -80,14 +80,7 @@ html
 		div#splash
 			img#splashIcon(src= icon || '/static-assets/splash.png')
 			div#splashSpinner
-				<svg class="spinner bg" viewBox="0 0 152 152" xmlns="http://www.w3.org/2000/svg">
-					<g transform="matrix(1,0,0,1,12,12)">
-						<circle cx="64" cy="64" r="64" style="fill:none;stroke:currentColor;stroke-width:24px;"/>
-					</g>
-				</svg>
-				<svg class="spinner fg" viewBox="0 0 152 152" xmlns="http://www.w3.org/2000/svg">
-					<g transform="matrix(1,0,0,1,12,12)">
-						<path d="M128,64C128,28.654 99.346,0 64,0C99.346,0 128,28.654 128,64Z" style="fill:none;stroke:currentColor;stroke-width:24px;"/>
-					</g>
+				<svg class="spinner" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
+					<circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="6px" style="fill: none; stroke: currentColor; stroke-width: 6px;"></circle>
 				</svg>
 		block content
diff --git a/packages/frontend/src/components/global/MkLoading.vue b/packages/frontend/src/components/global/MkLoading.vue
index 8460d1c631..998059f9d0 100644
--- a/packages/frontend/src/components/global/MkLoading.vue
+++ b/packages/frontend/src/components/global/MkLoading.vue
@@ -6,15 +6,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <div :class="[$style.root, { [$style.inline]: inline, [$style.colored]: colored, [$style.mini]: mini, [$style.em]: em }]">
 	<div :class="$style.container">
-		<svg :class="[$style.spinner, $style.bg]" viewBox="0 0 168 168" xmlns="http://www.w3.org/2000/svg">
-			<g transform="matrix(1.125,0,0,1.125,12,12)">
-				<circle cx="64" cy="64" r="64" style="fill:none;stroke:currentColor;stroke-width:21.33px;"/>
-			</g>
-		</svg>
-		<svg :class="[$style.spinner, $style.fg, { [$style.static]: static }]" viewBox="0 0 168 168" xmlns="http://www.w3.org/2000/svg">
-			<g transform="matrix(1.125,0,0,1.125,12,12)">
-				<path d="M128,64C128,28.654 99.346,0 64,0C99.346,0 128,28.654 128,64Z" style="fill:none;stroke:currentColor;stroke-width:21.33px;"/>
-			</g>
+		<svg :class="[$style.spinner]" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
+			<circle :class="[$style.path]" cx="25" cy="25" r="20" fill="none" stroke-width="6px" style="fill: none; stroke: currentColor; stroke-width: 6px;"></circle>
 		</svg>
 	</div>
 </div>
@@ -39,6 +32,8 @@ const props = withDefaults(defineProps<{
 </script>
 
 <style lang="scss" module>
+/* Credit to https://codepen.io/supah/pen/BjYLdW */
+
 @keyframes spinner {
 	0% {
 		transform: rotate(0deg);
@@ -48,12 +43,27 @@ const props = withDefaults(defineProps<{
 	}
 }
 
+@keyframes dash {
+	0% {
+		stroke-dasharray: 1, 150;
+		stroke-dashoffset: 0;
+	}
+	50% {
+		stroke-dasharray: 90, 150;
+		stroke-dashoffset: -35;
+	}
+	100% {
+		stroke-dasharray: 90, 150;
+		stroke-dashoffset: -124;
+	}
+}
+
 .root {
 	padding: 32px;
 	text-align: center;
 	cursor: wait;
 
-	--size: 38px;
+	--size: 40px;
 
 	&.colored {
 		color: var(--accent);
@@ -91,22 +101,12 @@ const props = withDefaults(defineProps<{
 	left: 0;
 	width: var(--size);
 	height: var(--size);
-	fill-rule: evenodd;
-	clip-rule: evenodd;
+	animation: spinner 2s linear infinite;
+}
+
+.path {
+	stroke: var(--accent);
 	stroke-linecap: round;
-	stroke-linejoin: round;
-	stroke-miterlimit: 1.5;
-}
-
-.bg {
-	opacity: 0.275;
-}
-
-.fg {
-	animation: spinner 0.5s linear infinite;
-
-	&.static {
-		animation-play-state: paused;
-	}
+	animation: dash 1.2s ease-in-out infinite;
 }
 </style>