From 0960d61ce2aec659328fe3fede01cd8fbff9370e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Acid=20Chicken=20=28=E7=A1=AB=E9=85=B8=E9=B6=8F=29?=
 <root@acid-chicken.com>
Date: Sat, 1 Apr 2023 16:31:55 +0900
Subject: [PATCH] chore: add static option to `MkLoading`

---
 .../src/components/global/MkLoading.stories.impl.ts       | 1 +
 packages/frontend/src/components/global/MkLoading.vue     | 8 +++++++-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/frontend/src/components/global/MkLoading.stories.impl.ts b/packages/frontend/src/components/global/MkLoading.stories.impl.ts
index dd22f9245..d240e6566 100644
--- a/packages/frontend/src/components/global/MkLoading.stories.impl.ts
+++ b/packages/frontend/src/components/global/MkLoading.stories.impl.ts
@@ -23,6 +23,7 @@ export const Default = {
 		};
 	},
 	args: {
+		static: true,
 	},
 	parameters: {
 		layout: 'centered',
diff --git a/packages/frontend/src/components/global/MkLoading.vue b/packages/frontend/src/components/global/MkLoading.vue
index 64e12e3b4..4311f9fe8 100644
--- a/packages/frontend/src/components/global/MkLoading.vue
+++ b/packages/frontend/src/components/global/MkLoading.vue
@@ -6,7 +6,7 @@
 				<circle cx="64" cy="64" r="64" style="fill:none;stroke:currentColor;stroke-width:21.33px;"/>
 			</g>
 		</svg>
-		<svg :class="[$style.spinner, $style.fg]" viewBox="0 0 168 168" xmlns="http://www.w3.org/2000/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>
@@ -19,11 +19,13 @@
 import { } from 'vue';
 
 const props = withDefaults(defineProps<{
+	static?: boolean;
 	inline?: boolean;
 	colored?: boolean;
 	mini?: boolean;
 	em?: boolean;
 }>(), {
+	static: false,
 	inline: false,
 	colored: true,
 	mini: false,
@@ -97,5 +99,9 @@ const props = withDefaults(defineProps<{
 
 .fg {
 	animation: spinner 0.5s linear infinite;
+
+	&.static {
+		animation-play-state: paused;
+	}
 }
 </style>