wip

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>

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';

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';
 

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';

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';