From 38c4b9d1a420f9adaaf56158af0df9f435908723 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=81=BE=E3=81=A3=E3=81=A1=E3=82=83=E3=81=A6=E3=81=83?=
 =?UTF-8?q?=E3=83=BC=E3=80=82?=
 <56515516+mattyatea@users.noreply.github.com>
Date: Sat, 29 Mar 2025 02:31:35 +0900
Subject: [PATCH] =?UTF-8?q?feat(timeline):=20=E3=83=90=E3=83=83=E3=82=AF?=
 =?UTF-8?q?=E3=82=B0=E3=83=A9=E3=82=A6=E3=83=B3=E3=83=89=E3=81=AB=E8=A1=8C?=
 =?UTF-8?q?=E3=81=A3=E3=81=9F=E9=9A=9B=E3=80=81{noteId}.json=E3=81=AE?=
 =?UTF-8?q?=E5=8F=96=E5=BE=97=E3=82=92=E4=BC=91=E6=AD=A2=E3=81=97=E3=80=81?=
 =?UTF-8?q?=E5=BE=A9=E5=B8=B0=E3=81=97=E3=81=9F=E9=9A=9B=E3=81=AB=E7=9B=B4?=
 =?UTF-8?q?=E8=BF=9110=E4=BB=B6=E3=82=92=E5=8F=96=E5=BE=97=E3=81=99?=
 =?UTF-8?q?=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB=20(MisskeyIO#944)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../frontend/src/components/MkPagination.vue  | 11 +++
 .../frontend/src/components/MkTimeline.vue    | 75 +++++++++++++------
 2 files changed, 64 insertions(+), 22 deletions(-)

diff --git a/packages/frontend/src/components/MkPagination.vue b/packages/frontend/src/components/MkPagination.vue
index 4f3eb079f..d5f69f2d2 100644
--- a/packages/frontend/src/components/MkPagination.vue
+++ b/packages/frontend/src/components/MkPagination.vue
@@ -209,6 +209,10 @@ const reload = (): Promise<void> => {
 	return init();
 };
 
+const deleteItem = () => {
+	items.value = [];
+};
+
 const fetchMore = async (): Promise<void> => {
 	if (!more.value || fetching.value || moreFetching.value || items.value.length === 0) return;
 	moreFetching.value = true;
@@ -414,9 +418,16 @@ defineExpose({
 	more,
 	reload,
 	prepend,
+	deleteItem,
 	append: appendItem,
 	removeItem,
 	updateItem,
+	stopFetch: () => {
+		more.value = false;
+	},
+	startFetch: () => {
+		more.value = true;
+	},
 });
 </script>
 
diff --git a/packages/frontend/src/components/MkTimeline.vue b/packages/frontend/src/components/MkTimeline.vue
index daf0becde..f64046d52 100644
--- a/packages/frontend/src/components/MkTimeline.vue
+++ b/packages/frontend/src/components/MkTimeline.vue
@@ -17,7 +17,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { computed, watch, onUnmounted, provide, shallowRef } from 'vue';
+import { computed, watch, onUnmounted, provide, shallowRef, onMounted } from 'vue';
 import * as Misskey from 'misskey-js';
 import MkNotes from '@/components/MkNotes.vue';
 import MkPullToRefresh from '@/components/MkPullToRefresh.vue';
@@ -69,35 +69,44 @@ const prComponent = shallowRef<InstanceType<typeof MkPullToRefresh>>();
 const tlComponent = shallowRef<InstanceType<typeof MkNotes>>();
 
 let tlNotesCount = 0;
+const notVisibleNoteData = new Array<object>();
 
 async function prepend(data) {
 	if (tlComponent.value == null) return;
 
 	let note = data;
 
-	// チェックするプロパティはなんでも良い
-	// minimizeが有効でid以外が存在しない場合は取得する
-	if (!data.visibility) {
-		const res = await window.fetch(`/notes/${data.id}.json`, {
-			method: 'GET',
-			credentials: 'omit',
-			headers: {
-				'Authorization': 'anonymous',
-				'X-Client-Transaction-Id': generateClientTransactionId('misskey'),
-			},
-		});
-		if (!res.ok) return;
-		note = deepMerge(data, await res.json());
+	if (!document.hidden) {
+		// チェックするプロパティはなんでも良い
+		// minimizeが有効でid以外が存在しない場合は取得する
+		if (!data.visibility) {
+			const res = await window.fetch(`/notes/${data.id}.json`, {
+				method: 'GET',
+				credentials: 'omit',
+				headers: {
+					'Authorization': 'anonymous',
+					'X-Client-Transaction-Id': generateClientTransactionId('misskey'),
+				},
+			});
+			if (!res.ok) return;
+			note = deepMerge(data, await res.json());
+		}
+
+		tlNotesCount++;
+
+		if (instance.notesPerOneAd > 0 && tlNotesCount % instance.notesPerOneAd === 0) {
+			note._shouldInsertAd_ = true;
+		}
+
+		tlComponent.value.pagingComponent?.prepend(note);
+	} else {
+		notVisibleNoteData.push(data);
+
+		if (notVisibleNoteData.length > 10) {
+			notVisibleNoteData.shift();
+		}
 	}
 
-	tlNotesCount++;
-
-	if (instance.notesPerOneAd > 0 && tlNotesCount % instance.notesPerOneAd === 0) {
-		note._shouldInsertAd_ = true;
-	}
-
-	tlComponent.value.pagingComponent?.prepend(note);
-
 	emit('note');
 
 	if (props.sound) {
@@ -105,6 +114,23 @@ async function prepend(data) {
 	}
 }
 
+async function loadUnloadedNotes() {
+	if (document.hidden) return;
+	if (tlComponent.value == null) return;
+	if (notVisibleNoteData.length === 0) return;
+
+	if (notVisibleNoteData.length >= 10) {
+		tlComponent.value.pagingComponent?.deleteItem();
+		tlComponent.value.pagingComponent?.stopFetch();
+	}
+
+	while (notVisibleNoteData.length > 0) {
+		await prepend(notVisibleNoteData.shift());
+	}
+
+	tlComponent.value.pagingComponent?.startFetch();
+}
+
 let connection: Misskey.ChannelConnection | null = null;
 let connection2: Misskey.ChannelConnection | null = null;
 let paginationQuery: Paging | null = null;
@@ -291,8 +317,13 @@ watch(() => [props.list, props.antenna, props.channel, props.role, props.withRen
 // 初回表示用
 refreshEndpointAndChannel();
 
+onMounted(() => {
+	document.addEventListener('visibilitychange', loadUnloadedNotes);
+});
+
 onUnmounted(() => {
 	disconnectChannel();
+	document.removeEventListener('visibilitychange', loadUnloadedNotes);
 });
 
 function reloadTimeline() {