From 9f4df717e8431e35356388ed497ae8444fa9b0a5 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Tue, 25 Jul 2023 10:47:31 +0000
Subject: [PATCH] =?UTF-8?q?denyMoveTransition=E3=82=92=E5=BE=A9=E6=B4=BB?=
 =?UTF-8?q?=E3=81=95=E3=81=9B=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/frontend/src/components/MkNotes.vue         |  3 ++-
 packages/frontend/src/components/MkNotifications.vue |  4 ++--
 packages/frontend/src/components/MkPagination.vue    | 10 ++++++++--
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/packages/frontend/src/components/MkNotes.vue b/packages/frontend/src/components/MkNotes.vue
index b49c8fa8b7..9c2935d62b 100644
--- a/packages/frontend/src/components/MkNotes.vue
+++ b/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"
@@ -18,6 +18,7 @@
 				:noGap="noGap"
 				:ad="true"
 				:class="$style.notes"
+				:denyMoveTransition="denyMoveTransition"
 			>
 				<MkNote :key="note._featuredId_ || note._prId_ || note.id" :class="$style.note" :note="note"/>
 			</MkDateSeparatedList>
diff --git a/packages/frontend/src/components/MkNotifications.vue b/packages/frontend/src/components/MkNotifications.vue
index 4498f0f113..019890801e 100644
--- a/packages/frontend/src/components/MkNotifications.vue
+++ b/packages/frontend/src/components/MkNotifications.vue
@@ -7,8 +7,8 @@
 		</div>
 	</template>
 
-	<template #default="{ items: notifications }">
-		<MkDateSeparatedList v-slot="{ item: notification }" :class="$style.list" :items="notifications" :noGap="true">
+	<template #default="{ items: notifications, denyMoveTransition }">
+		<MkDateSeparatedList v-slot="{ item: notification }" :class="$style.list" :items="notifications" :noGap="true" :denyMoveTransition="denyMoveTransition">
 			<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>
diff --git a/packages/frontend/src/components/MkPagination.vue b/packages/frontend/src/components/MkPagination.vue
index 27cd9ebda2..b726280c00 100644
--- a/packages/frontend/src/components/MkPagination.vue
+++ b/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 }}
@@ -163,6 +163,7 @@ const scrollableElementOrHtml = $computed(() => scrollableElement ?? document.ge
 const visibility = useDocumentVisibility();
 
 const isPausingUpdateByExecutingQueue = ref(false);
+const denyMoveTransition = ref(false);
 
 //#region scrolling
 const checkFn = props.pagination.reversed ? isBottomVisible : isTopVisible;
@@ -265,6 +266,7 @@ async function adjustScroll(fn: () => void): Promise<void> {
 	} catch (err) {
 		console.error(err, { scrollableElementOrHtml });
 	}
+	denyMoveTransition.value = true;
 	fn();
 	return await nextTick(() => {
 		try {
@@ -276,7 +278,8 @@ async function adjustScroll(fn: () => void): Promise<void> {
 		} catch (err) {
 			console.error(err, { scrollableElementOrHtml });
 		}
-		return nextTick();
+	}).then(() => nextTick()).finally(() => {
+		denyMoveTransition.value = false;
 	});
 }
 //#endregion
@@ -548,17 +551,20 @@ async function executeQueue() {
 		// Safariでは描画が微妙になるので一定程度スクロールするだけ
 		scrollBy(scrollableElement, { top: TOLERANCE + 4, behavior: 'instant' });
 		backed = true;
+		denyMoveTransition.value = true;
 		await nextTick();
 		unshiftItems(newItems, Infinity);
 		await nextTick();
 	} else {
 		await adjustScroll(() => unshiftItems(newItems, Infinity));
 		backed = true;
+		denyMoveTransition.value = true;
 	}
 
 	items.value = new Map([...items.value].slice(0, displayLimit.value));
 	await nextTick();
 	isPausingUpdateByExecutingQueue.value = false;
+	denyMoveTransition.value = false;
 }
 
 function prependQueue(newItem: MisskeyEntity) {