enhance(frontend): metaタグを調整 (#130)

locales/index.d.ts

@@ -10789,6 +10789,10 @@ export interface Locale extends ILocale {
          * {x}で見る
          */
         "showOnX": ParameterizedString<"x">;
+        /**
+         * 読み込みに時間がかかっています。
+         */
+        "takingTooLongToLoad": string;
         "_inDevelopment": {
             /**
              * この機能は開発中です

locales/ja-JP.yml

@@ -2877,6 +2877,7 @@ _hana:
   flowerEffect: "いつでも花びらを降らせる"
   searchIsInBeta: "独自検索エンジンは現在開発中です。今ご利用いただけるのは通常のMisskeyと同じ検索エンジン（Meilisearch）です。今後の進化にご期待ください！"
   showOnX: "{x}で見る"
+  takingTooLongToLoad: "読み込みに時間がかかっています。"
   _inDevelopment:
     title: "この機能は開発中です"
     description: "はなみすきーは新規機能盛りだくさんで鋭意開発中です！\nどんな機能が実装されるかはお楽しみ。"

packages/backend/src/server/web/views/base.pug

@@ -40,6 +40,9 @@ html
 		link(rel='modulepreload' href=`/vite/${entry.file}`)
 
 		link(rel='preconnect' href='https://static-assets.misskey.flowers')
+		link(rel='preconnect' href='https://frame-static-assets.misskey.flowers')
+		link(rel='dns-prefetch' href='https://saize-static-assets.misskey.flowers')
+
 		link(rel='preconnect' href='https://fonts.googleapis.com')
 		link(rel='preconnect' href='https://fonts.gstatic.com' crossorigin)
 		link(rel='stylesheet' href='https://static-assets.misskey.flowers/fonts/hana-icons/font.css')

packages/frontend/src/pages/welcome.entrance.hana.vue

@@ -10,18 +10,41 @@
 		:class="$style.frame"
 		@load="onFrameLoad"
 	></iframe>
+	<Transition
+		:enterActiveClass="$style.transition_x_enterActive"
+		:leaveActiveClass="$style.transition_x_leaveActive"
+		:enterFromClass="$style.transition_x_enterFrom"
+		:leaveToClass="$style.transition_x_leaveTo"
+	>
+		<div v-if="!isTest && !iframeLoaded" :class="$style.loader">
+			<div :class="$style.loaderInner" class="_gaps">
+				<MkLoading/>
+				<div
+					class="_gaps"
+					:class="[$style.fallback, { [$style.fallbackShow]: isTakingTooLong }]"
+				>
+					<div>{{ i18n.ts._hana.takingTooLongToLoad }}</div>
+					<div class="_buttonsCenter">
+						<MkButton rounded gradate @click="signup">{{ i18n.ts.joinThisServer }}</MkButton>
+						<MkButton rounded @click="signin">{{ i18n.ts.login }}</MkButton>
+					</div>
+				</div>
+			</div>
+		</div>
+	</Transition>
 </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted, onUnmounted, useTemplateRef, watch } from 'vue';
+import { onMounted, onUnmounted, useTemplateRef, ref, watch } from 'vue';
 import { instance } from '@/instance.js';
 import { miLocalStorage } from '@/local-storage.js';
 import { defaultStore } from '@/store.js';
 import { i18n } from '@/i18n.js';
 import { useRouter } from '@/router/supplier.js';
 import * as os from '@/os.js';
 
+import MkButton from '@/components/MkButton.vue';
 import XSigninDialog from '@/components/MkSigninDialog.vue';
 import XSignupDialog from '@/components/MkSignupDialog.vue';
 
@@ -38,14 +61,14 @@ const frameUrl = `https://frame-static-assets.misskey.flowers/${lang}/${dev}`;
 
 const frameEl = useTemplateRef('frameEl');
 
-let iframeLoaded = false;
+const iframeLoaded = ref(false);
 
 function onFrameLoad() {
-	if (!iframeLoaded) {
-		iframeLoaded = true;
+	if (!iframeLoaded.value) {
+		iframeLoaded.value = true;
 	} else if (frameEl.value) {
 		frameEl.value.src = frameUrl;
-		iframeLoaded = false;
+		iframeLoaded.value = false;
 	}
 	frameEl.value?.contentWindow?.postMessage({
 		type: 'hanamisskey:meta',
@@ -56,6 +79,25 @@ function onFrameLoad() {
 	}, 'https://frame-static-assets.misskey.flowers');
 }
 
+const isTakingTooLong = ref(false);
+let timeoutId: number | null = null;
+watch(iframeLoaded, (to) => {
+	if (!to) {
+		if (timeoutId) {
+			clearTimeout(timeoutId);
+		}
+		timeoutId = window.setTimeout(() => {
+			isTakingTooLong.value = true;
+		}, 5000);
+	} else {
+		if (timeoutId) {
+			clearTimeout(timeoutId);
+			timeoutId = null;
+		}
+		isTakingTooLong.value = false;
+	}
+}, { immediate: true });
+
 watch(defaultStore.reactiveState.darkMode, (to) => {
 	console.log('darkMode changed');
 	frameEl.value?.contentWindow?.postMessage({
@@ -121,6 +163,7 @@ onUnmounted(() => {
 
 <style lang="scss" module>
 .root {
+	position: relative;
 	height: 100dvh;
 	overflow: hidden;
 	overflow: clip;
@@ -131,4 +174,42 @@ onUnmounted(() => {
 	height: 100dvh;
 	border: none;
 }
+
+.transition_x_enterActive,
+.transition_x_leaveActive {
+	transition: opacity 0.3s ease;
+}
+
+.transition_x_enterFrom,
+.transition_x_leaveTo {
+	opacity: 0;
+}
+
+.loader {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100dvw;
+	height: 100dvh;
+	background: var(--MI_THEME-bg);
+	display: flex;
+	align-items: center;
+}
+
+.loaderInner {
+	margin: 0 auto;
+	padding: 24px;
+	text-align: center;
+}
+
+.fallback {
+	visibility: hidden;
+	opacity: 0;
+	transition: visibility 0s, opacity 0.3s ease;
+}
+
+.fallbackShow {
+	visibility: visible;
+	opacity: 1;
+}
 </style>