enhance(frontend): improve enableInfiniteScroll stability

Close misskey-dev#16318

Author: syuilo

CHANGELOG.md

@@ -33,6 +33,7 @@
 		- URLに`?safemode=true`を付ける
 		- PWAのショートカットで Safemode を選択して起動する
 - Feat: ページのタブバーを下部に表示できるように
+- Enhance: 「自動でもっと見る」オプションが有効になり、安定性が向上しました
 - Enhance: コントロールパネルを検索できるように
 - Enhance: トルコ語 (tr-TR) に対応
 - Enhance: 不必要な翻訳データを読み込まなくなり、パフォーマンスが向上しました

packages/frontend/src/components/MkStreamingNotesTimeline.vue

@@ -47,7 +47,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<MkNote v-else :class="$style.note" :note="note" :withHardMute="true" :data-scroll-anchor="note.id"/>
 			</template>
 		</component>
-		<button v-show="paginator.canFetchOlder.value" key="_more_" :disabled="paginator.fetchingOlder.value" class="_button" :class="$style.more" @click="paginator.fetchOlder">
+		<button v-show="paginator.canFetchOlder.value" key="_more_" v-appear="prefer.s.enableInfiniteScroll ? paginator.fetchOlder : null" :disabled="paginator.fetchingOlder.value" class="_button" :class="$style.more" @click="paginator.fetchOlder">
 			<div v-if="!paginator.fetchingOlder.value">{{ i18n.ts.loadMore }}</div>
 			<MkLoading v-else :inline="true"/>
 		</button>

packages/frontend/src/components/MkStreamingNotificationsTimeline.vue

@@ -33,7 +33,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<XNotification v-else :class="$style.content" :notification="notification" :withTime="true" :full="true"/>
 			</div>
 		</component>
-		<button v-show="paginator.canFetchOlder.value" key="_more_" :disabled="paginator.fetchingOlder.value" class="_button" :class="$style.more" @click="paginator.fetchOlder">
+		<button v-show="paginator.canFetchOlder.value" key="_more_" v-appear="prefer.s.enableInfiniteScroll ? paginator.fetchOlder : null" :disabled="paginator.fetchingOlder.value" class="_button" :class="$style.more" @click="paginator.fetchOlder">
 			<div v-if="!paginator.fetchingOlder.value">{{ i18n.ts.loadMore }}</div>
 			<MkLoading v-else/>
 		</button>

packages/frontend/src/directives/appear.ts

@@ -3,19 +3,22 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
+import { throttle } from 'throttle-debounce';
 import type { Directive } from 'vue';
 
 export default {
 	mounted(src, binding, vn) {
 		const fn = binding.value;
 		if (fn == null) return;
 
-		const observer = new IntersectionObserver(entries => {
+		const check = throttle(1000, (entries) => {
 			if (entries.some(entry => entry.isIntersecting)) {
 				fn();
 			}
 		});
 
+		const observer = new IntersectionObserver(check);
+
 		observer.observe(src);
 
 		src._observer_ = observer;