✌️

packages/frontend/src/components/MkNotes.vue

@@ -7,7 +7,7 @@
 		</div>
 	</template>
 
-	<template #default="{ items: notes }">
+	<template #default="{ items: notes, denyMoveTransition }">
 		<div :class="[$style.root, { [$style.noGap]: noGap }]">
 			<MkDateSeparatedList
 				ref="notes"
@@ -17,7 +17,10 @@
 				:reversed="pagination.reversed"
 				:noGap="noGap"
 				:ad="true"
-				:class="$style.notes"
+				:class="{
+					[$style.notes]: true,
+					'deny-move-transition': denyMoveTransition,
+				}"
 			>
 				<MkNote :key="note._featuredId_ || note._prId_ || note.id" :class="$style.note" :note="note"/>
 			</MkDateSeparatedList>

packages/frontend/src/components/MkNotifications.vue

@@ -7,9 +7,9 @@
 		</div>
 	</template>
 
-	<template #default="{ items: notifications }">
+	<template #default="{ items: notifications, denyMoveTransition }">
-		<MkDateSeparatedList v-slot="{ item: notification }" :class="$style.list" :items="notifications" :noGap="true">
+		<MkDateSeparatedList v-slot="{ item: notification }" :class="{ [$style.list]: true, 'deny-move-transition': denyMoveTransition }" :items="notifications" :noGap="true">
-			<MkNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :key="notification.id" :note="notification.note"/>
+			<MkNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :key="`showNotificationAsNote:${notification.id}`" :note="notification.note"/>
 			<XNotification v-else :key="notification.id" :notification="notification" :withTime="true" :full="true" class="_panel notification"/>
 		</MkDateSeparatedList>
 	</template>

packages/frontend/src/components/MkPagination.vue

@@ -26,7 +26,7 @@
 			</MkButton>
 			<MkLoading v-else class="loading"/>
 		</div>
-		<slot :items="Array.from(items.values())" :fetching="fetching || moreFetching"></slot>
+		<slot :items="Array.from(items.values())" :fetching="fetching || moreFetching" :denyMoveTransition="denyMoveTransition"></slot>
 		<div v-show="!pagination.reversed && more" key="_more_" class="_margin">
 			<MkButton v-if="!moreFetching" v-appear="(enableInfiniteScroll && !props.disableAutoLoad) ? appearFetchMore : null" :class="$style.more" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" primary rounded @click="fetchMore">
 				{{ i18n.ts.loadMore }}
@@ -144,6 +144,7 @@ const preventAppearFetchMore = ref(false);
 const preventAppearFetchMoreTimer = ref<number | null>(null);
 const empty = computed(() => items.value.size === 0);
 const error = ref(false);
+const denyMoveTransition = ref(false);
 const {
 	enableInfiniteScroll,
 } = defaultStore.reactiveState;
@@ -156,8 +157,8 @@ const scrollableElementOrHtml = $computed(() => scrollableElement ?? document.ge
 
 const visibility = useDocumentVisibility();
 
-let isPausingUpdate = false;
+const isPausingUpdate = ref(false);
-let timerForSetPause: number | null = null;
+const timerForSetPause = ref<number | null>(null);
 const BACKGROUND_PAUSE_WAIT_SEC = 10;
 
 //#region scrolling
@@ -254,6 +255,8 @@ function adjustScroll(fn: () => void): Promise<void> {
 		console.error(err, { scrollableElementOrHtml });
 	}
 
+	denyMoveTransition.value = true;
+
 	fn();
 
 	return nextTick(() => {
@@ -267,6 +270,7 @@ function adjustScroll(fn: () => void): Promise<void> {
 		} catch (err) {
 			console.error(err, { scrollableElementOrHtml });
 		}
+		denyMoveTransition.value = false;
 		return nextTick();
 	});
 }
@@ -459,18 +463,18 @@ const appearFetchMoreAhead = async (): Promise<void> => {
 
 function visibilityChange() {
 	if (visibility.value === 'hidden') {
-		timerForSetPause = window.setTimeout(() => {
+		timerForSetPause.value = window.setTimeout(() => {
-			isPausingUpdate = true;
+			isPausingUpdate.value = true;
-			timerForSetPause = null;
+			timerForSetPause.value = null;
 		},
 		BACKGROUND_PAUSE_WAIT_SEC * 1000);
 	} else { // 'visible'
-		if (timerForSetPause) {
+		if (timerForSetPause.value) {
-			clearTimeout(timerForSetPause);
+			clearTimeout(timerForSetPause.value);
-			timerForSetPause = null;
+			timerForSetPause.value = null;
 		} else {
 			console.log('visibilityChange: executeQueue', 'backed', backed, 'active', active.value);
-			isPausingUpdate = false;
+			isPausingUpdate.value = false;
 			if (!backed && active.value) {
 				executeQueue();
 			}
@@ -506,7 +510,7 @@ const prepend = (item: MisskeyEntity): void => {
 	if (
 		queueSize.value === 0 && // キューに残っている場合はキューに追加する
 		!backed && // 先頭に表示されていない時はキューに追加する
-		!isPausingUpdate && // タブがバックグラウンドの時/スクロール調整中はキューに追加する
+		!isPausingUpdate.value && // タブがバックグラウンドの時/スクロール調整中はキューに追加する
 		active.value // keepAliveで隠されている間はキューに追加する
 	) {
 		if (items.value.has(item.id)) return; // 既にタイムラインにある場合は何もしない
@@ -544,7 +548,7 @@ async function executeQueue() {
 	if (queue.value.size === 0) return;
 	const queueArr = Array.from(queue.value.entries());
 	queue.value = new Map(queueArr.slice(props.pagination.limit));
-	isPausingUpdate = true;
+	isPausingUpdate.value = true;
 	try {
 		await adjustScroll(() => {
 			unshiftItems(
@@ -552,11 +556,17 @@ async function executeQueue() {
 				Infinity,
 			);
 		});
+
+		// 念の為backedを再チェック
 		weakBacked = !checkTop();
+
+		// adjustScrollが終わり次第タイムラインの下側を切り捨てる
+		denyMoveTransition.value = true;
 		items.value = new Map([...items.value].slice(0, displayLimit.value));
 		await nextTick();
 	} finally {
-		isPausingUpdate = false;
+		isPausingUpdate.value = false;
+		denyMoveTransition.value = false;
 	}
 }
 
@@ -592,9 +602,9 @@ onMounted(() => {
 });
 
 onBeforeUnmount(() => {
-	if (timerForSetPause) {
+	if (timerForSetPause.value) {
-		clearTimeout(timerForSetPause);
+		clearTimeout(timerForSetPause.value);
-		timerForSetPause = null;
+		timerForSetPause.value = null;
 	}
 	if (preventAppearFetchMoreTimer.value) {
 		clearTimeout(preventAppearFetchMoreTimer.value);