From 45bf2b1b4744554bd57af7e921dd2276a9224ed8 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Mon, 26 Aug 2024 11:44:19 +0900
Subject: [PATCH] wip

---
 .../src/components/EmLoading.vue              | 112 ++++++++++++++++++
 packages/frontend-embed/src/pages/clip.vue    |   4 +-
 packages/frontend-embed/src/pages/note.vue    |   5 +-
 packages/frontend-embed/src/pages/tag.vue     |   4 +-
 .../src/pages/user-timeline.vue               |   4 +-
 5 files changed, 121 insertions(+), 8 deletions(-)
 create mode 100644 packages/frontend-embed/src/components/EmLoading.vue

diff --git a/packages/frontend-embed/src/components/EmLoading.vue b/packages/frontend-embed/src/components/EmLoading.vue
new file mode 100644
index 0000000000..49d8ace37b
--- /dev/null
+++ b/packages/frontend-embed/src/components/EmLoading.vue
@@ -0,0 +1,112 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+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>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+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,
+	em: false,
+});
+</script>
+
+<style lang="scss" module>
+@keyframes spinner {
+	0% {
+		transform: rotate(0deg);
+	}
+	100% {
+		transform: rotate(360deg);
+	}
+}
+
+.root {
+	padding: 32px;
+	text-align: center;
+	cursor: wait;
+
+	--size: 38px;
+
+	&.colored {
+		color: var(--accent);
+	}
+
+	&.inline {
+		display: inline;
+		padding: 0;
+		--size: 32px;
+	}
+
+	&.mini {
+		padding: 16px;
+		--size: 32px;
+	}
+
+	&.em {
+		display: inline-block;
+		vertical-align: middle;
+		padding: 0;
+		--size: 1em;
+	}
+}
+
+.container {
+	position: relative;
+	width: var(--size);
+	height: var(--size);
+	margin: 0 auto;
+}
+
+.spinner {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: var(--size);
+	height: var(--size);
+	fill-rule: evenodd;
+	clip-rule: evenodd;
+	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;
+	}
+}
+</style>
diff --git a/packages/frontend-embed/src/pages/clip.vue b/packages/frontend-embed/src/pages/clip.vue
index 3c5e708714..8cbbf16d1a 100644
--- a/packages/frontend-embed/src/pages/clip.vue
+++ b/packages/frontend-embed/src/pages/clip.vue
@@ -43,9 +43,9 @@ import { ref, computed, shallowRef, inject, onActivated } from 'vue';
 import * as Misskey from 'misskey-js';
 import type { Paging } from '@/components/MkPagination.vue';
 import type { ParsedEmbedParams } from '@/embed-page.js';
-import EmNotes from '@/embed/components/EmNotes.vue';
+import EmNotes from '@/components/EmNotes.vue';
 import XNotFound from '@/pages/not-found.vue';
-import EmTimelineContainer from '@/embed/components/EmTimelineContainer.vue';
+import EmTimelineContainer from '@/components/EmTimelineContainer.vue';
 import { misskeyApi } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
 import { instance } from '@/instance.js';
diff --git a/packages/frontend-embed/src/pages/note.vue b/packages/frontend-embed/src/pages/note.vue
index 6136c23937..b40edcdc97 100644
--- a/packages/frontend-embed/src/pages/note.vue
+++ b/packages/frontend-embed/src/pages/note.vue
@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div :class="$style.noteEmbedRoot">
-	<MkLoading v-if="loading"/>
+	<EmLoading v-if="loading"/>
 	<EmNoteDetailed v-else-if="note" :note="note"/>
 	<XNotFound v-else/>
 </div>
@@ -14,7 +14,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script setup lang="ts">
 import { ref, provide, inject, onActivated } from 'vue';
 import * as Misskey from 'misskey-js';
-import EmNoteDetailed from '@/embed/components/EmNoteDetailed.vue';
+import EmNoteDetailed from '@/components/EmNoteDetailed.vue';
+import EmLoading from '@/components/EmLoading.vue';
 import XNotFound from '@/pages/not-found.vue';
 import { misskeyApi } from '@/misskey-api.js';
 
diff --git a/packages/frontend-embed/src/pages/tag.vue b/packages/frontend-embed/src/pages/tag.vue
index 3d1adf4ccb..527f96626e 100644
--- a/packages/frontend-embed/src/pages/tag.vue
+++ b/packages/frontend-embed/src/pages/tag.vue
@@ -41,9 +41,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { computed, shallowRef, inject, onActivated } from 'vue';
 import type { Paging } from '@/components/MkPagination.vue';
 import type { ParsedEmbedParams } from '@/embed-page.js';
-import EmNotes from '@/embed/components/EmNotes.vue';
+import EmNotes from '@/components/EmNotes.vue';
 import XNotFound from '@/pages/not-found.vue';
-import EmTimelineContainer from '@/embed/components/EmTimelineContainer.vue';
+import EmTimelineContainer from '@/components/EmTimelineContainer.vue';
 import { i18n } from '@/i18n.js';
 import { instance } from '@/instance.js';
 import { url, instanceName } from '@/config.js';
diff --git a/packages/frontend-embed/src/pages/user-timeline.vue b/packages/frontend-embed/src/pages/user-timeline.vue
index 33da48a895..8a3f5ca00c 100644
--- a/packages/frontend-embed/src/pages/user-timeline.vue
+++ b/packages/frontend-embed/src/pages/user-timeline.vue
@@ -50,9 +50,9 @@ import { ref, computed, shallowRef, inject, onActivated } from 'vue';
 import * as Misskey from 'misskey-js';
 import type { Paging } from '@/components/MkPagination.vue';
 import type { ParsedEmbedParams } from '@/embed-page.js';
-import EmNotes from '@/embed/components/EmNotes.vue';
+import EmNotes from '@/components/EmNotes.vue';
 import XNotFound from '@/pages/not-found.vue';
-import EmTimelineContainer from '@/embed/components/EmTimelineContainer.vue';
+import EmTimelineContainer from '@/components/EmTimelineContainer.vue';
 import { misskeyApi } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
 import { instance } from '@/instance.js';