feat(timeline): バックグラウンドに行った際、{noteId}.jsonの取得を休止し、復帰した際に直近10件を取得するように (MisskeyIO#944)

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>
 

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,12 +69,14 @@ 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;
 
+	if (!document.hidden) {
 		// チェックするプロパティはなんでも良い
 		// minimizeが有効でid以外が存在しない場合は取得する
 		if (!data.visibility) {
@@ -97,6 +99,13 @@ async function prepend(data) {
 		}
 
 		tlComponent.value.pagingComponent?.prepend(note);
+	} else {
+		notVisibleNoteData.push(data);
+
+		if (notVisibleNoteData.length > 10) {
+			notVisibleNoteData.shift();
+		}
+	}
 
 	emit('note');
 
@@ -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() {