From 974f7c13d31ae010896299c5be7ab43e36ba3be5 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Thu, 13 Jul 2023 03:53:48 +0000
Subject: [PATCH] :v:

---
 .../frontend/src/components/MkPagination.vue  | 32 +++++++++++++++++--
 1 file changed, 29 insertions(+), 3 deletions(-)

diff --git a/packages/frontend/src/components/MkPagination.vue b/packages/frontend/src/components/MkPagination.vue
index 54a1980c53..335e82473e 100644
--- a/packages/frontend/src/components/MkPagination.vue
+++ b/packages/frontend/src/components/MkPagination.vue
@@ -226,6 +226,25 @@ watch([$$(weakBacked), $$(contentEl)], () => {
 		return removeListener;
 	})();
 });
+
+/**
+ * アイテムを上に追加した場合に追加分だけスクロールを下にずらす
+ * @param fn DOM操作(unshiftItemsなどで)
+ */
+function adjustScroll(fn: () => void) {
+	const oldHeight = scrollableElement.scrollHeight;
+	const oldScroll = scrollableElement.scrollTop;
+	fn();
+	return nextTick(() => {
+		const top = oldScroll + (scrollableElement.scrollHeight - oldHeight);
+		scroll(scrollableElement, { top, behavior: 'instant' });
+		if (top > TOLERANCE) {
+			weakBacked = true;
+			backed = true;
+		}
+		return nextTick();
+	});
+}
 //#endregion
 
 /**
@@ -493,7 +512,7 @@ function unshiftItems(newItems: MisskeyEntity[], limit = displayLimit.value) {
 	const length = newItems.length + items.value.size;
 	items.value = new Map([...arrayToEntries(newItems), ...items.value].slice(0, limit));
 
-	if (length >= displayLimit.value) more.value = true;
+	if (length >= limit) more.value = true;
 }
 
 /**
@@ -507,9 +526,16 @@ function concatItems(oldItems: MisskeyEntity[]) {
 	if (length >= displayLimit.value) more.value = true;
 }
 
-function executeQueue() {
+async function executeQueue() {
 	const queueArr = Array.from(queue.value.entries());
-	unshiftItems(queueArr.slice(0, props.pagination.limit).map(v => v[1]).reverse());
+	adjustScroll(() => {
+		unshiftItems(
+			queueArr.slice(0, props.pagination.limit).map(v => v[1]).reverse(),
+			Infinity,
+		);
+	}).then(() => {
+		items.value = new Map([...items.value].slice(0, displayLimit.value));
+	});
 	queue.value = new Map(queueArr.slice(props.pagination.limit));
 }