perf(client): ウェルカムページを最適化 (#9960)

* perf(client): ウェルカムページの最適化

* remove max

packages/backend/src/server/api/endpoints/federation/instances.ts

@@ -10,6 +10,8 @@ export const meta = {
 	tags: ['federation'],
 
 	requireCredential: false,
+	allowGet: true,
+	cacheSec: 3600,
 
 	res: {
 		type: 'array',

packages/backend/src/server/api/endpoints/notes/featured.ts

@@ -9,6 +9,8 @@ export const meta = {
 	tags: ['notes'],
 
 	requireCredential: false,
+	allowGet: true,
+	cacheSec: 3600,
 
 	res: {
 		type: 'array',
@@ -41,7 +43,6 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 		private queryService: QueryService,
 	) {
 		super(meta, paramDef, async (ps, me) => {
-			const max = 30;
 			const day = 1000 * 60 * 60 * 24 * 3; // 3日前まで
 
 			const query = this.notesRepository.createQueryBuilder('note')
@@ -67,7 +68,7 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 
 			let notes = await query
 				.orderBy('note.score', 'DESC')
-				.take(max)
+				.take(ps.limit)
 				.getMany();
 
 			notes.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());

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

@@ -32,7 +32,7 @@
 				</div>
 			</div>
 		</div>
-		<div v-if="instances" class="federation">
+		<div v-if="instances && instances.length > 0" class="federation">
 			<MarqueeText :duration="40">
 				<MkA v-for="instance in instances" :key="instance.id" :class="$style.federationInstance" :to="`/instance-info/${instance.host}`" behavior="window">
 					<!--<MkInstanceCardMini :instance="instance"/>-->
@@ -56,33 +56,16 @@ import MkFeaturedPhotos from '@/components/MkFeaturedPhotos.vue';
 import { instanceName } from '@/config';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
+import { Instance } from 'misskey-js/built/entities';
 
-let meta = $ref();
+let meta = $ref<Instance>();
-let stats = $ref();
+let instances = $ref<any[]>();
-let tags = $ref();
-let onlineUsersCount = $ref();
-let instances = $ref();
 
 os.api('meta', { detail: true }).then(_meta => {
 	meta = _meta;
 });
 
-os.api('stats').then(_stats => {
+os.apiGet('federation/instances', {
-	stats = _stats;
-});
-
-os.api('get-online-users-count').then(res => {
-	onlineUsersCount = res.count;
-});
-
-os.api('hashtags/list', {
-	sort: '+mentionedLocalUsers',
-	limit: 8,
-}).then(_tags => {
-	tags = _tags;
-});
-
-os.api('federation/instances', {
 	sort: '+pubSub',
 	limit: 20,
 }).then(_instances => {
@@ -147,8 +130,9 @@ function showMenu(ev) {
 			bottom: 0;
 			right: 64px;
 			margin: auto;
+			padding: 128px 0;
 			width: 500px;
-			height: calc(100% - 128px);
+			height: calc(100% - 256px);
 			overflow: hidden;
 			-webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 128px, rgba(0,0,0,1) calc(100% - 128px), rgba(0,0,0,0) 100%);
 			mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 128px, rgba(0,0,0,1) calc(100% - 128px), rgba(0,0,0,0) 100%);

packages/frontend/src/pages/welcome.timeline.vue

@@ -1,62 +1,54 @@
 <template>
-<div class="civpbkhh">
+<div :class="$style.root">
-	<div ref="scroll" class="scrollbox" v-bind:class="{ scroll: isScrolling }">
+	<div ref="scrollEl" :class="[$style.scrollbox, { [$style.scroll]: isScrolling }]">
-		<div v-for="note in notes" class="note">
+		<div v-for="note in notes" :key="note.id" :class="$style.note">
-			<div class="content _panel">
+			<div class="_panel" :class="$style.content">
-				<div class="body">
+				<div :class="$style.body">
 					<MkA v-if="note.replyId" class="reply" :to="`/notes/${note.replyId}`"><i class="ti ti-arrow-back-up"></i></MkA>
-					<Mfm v-if="note.text" :text="note.text" :author="note.user" :i="$i"/>
+					<Mfm v-if="note.text" :text="note.text" :author="note.user" :i="$i" />
 					<MkA v-if="note.renoteId" class="rp" :to="`/notes/${note.renoteId}`">RN: ...</MkA>
 				</div>
-				<div v-if="note.files.length > 0" class="richcontent">
+				<div v-if="note.files.length > 0" :class="$style.richcontent">
-					<MkMediaList :media-list="note.files"/>
+					<MkMediaList :media-list="note.files" />
 				</div>
 				<div v-if="note.poll">
-					<MkPoll :note="note" :readOnly="true"/>
+					<MkPoll :note="note" :readOnly="true" />
 				</div>
 			</div>
-			<MkReactionsViewer ref="reactionsViewer" :note="note"/>
+			<MkReactionsViewer ref="reactionsViewer" :note="note" />
 		</div>
 	</div>
 </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent } from 'vue';
 import MkReactionsViewer from '@/components/MkReactionsViewer.vue';
 import MkMediaList from '@/components/MkMediaList.vue';
 import MkPoll from '@/components/MkPoll.vue';
 import * as os from '@/os';
+import { Note } from 'misskey-js/built/entities';
+import { onUpdated } from 'vue';
+import { getScrollContainer } from '@/scripts/scroll';
 
-export default defineComponent({
+let notes = $ref<Note[]>([]);
-	components: {
+let isScrolling = $ref(false);
-		MkReactionsViewer,
+let scrollEl = $ref<HTMLElement>();
-		MkMediaList,
-		MkPoll,
-	},
 
-	data() {
+os.apiGet('notes/featured').then(_notes => {
-		return {
+	notes = _notes;
-			notes: [],
+});
-			isScrolling: false,
-		};
-	},
 
-	created() {
+onUpdated(() => {
-		os.api('notes/featured').then(notes => {
+	if (!scrollEl) return;
-			this.notes = notes;
+	const container = getScrollContainer(scrollEl);
-		});
+	const containerHeight = container ? container.clientHeight : window.innerHeight;
-	},
+	if (scrollEl.offsetHeight > containerHeight) {
-
+		isScrolling = true;
-	updated() {
-		if (this.$refs.scroll.clientHeight > window.innerHeight) {
-			this.isScrolling = true;
 	}
-	},
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" module>
 @keyframes scroll {
 	0% {
 		transform: translate3d(0, 0, 0);
@@ -72,28 +64,28 @@ export default defineComponent({
 	}
 }
 
-.civpbkhh {
+.root {
 	text-align: right;
+}
 
-	> .scrollbox {
+.scrollbox {
 	&.scroll {
 		animation: scroll 45s linear infinite;
 	}
+}
 
-		> .note {
+.note {
 	margin: 16px 0 16px auto;
+}
 
-			> .content {
+.content {
 	padding: 16px;
 	margin: 0 0 0 auto;
 	max-width: max-content;
 	border-radius: 16px;
+}
 
-				> .richcontent {
+.richcontent {
 	min-width: 250px;
-				}
-			}
-		}
-	}
 }
 </style>