enhance(frontend): MkDriveで自動でもっと見るを有効化 (#17037)

* enhance(frontend): MkDriveで自動でもっと見るを有効化

* Update Changelog

CHANGELOG.md

@@ -4,6 +4,7 @@
 -
 
 ### Client
+- Enhance: ドライブのファイル一覧で自動でもっと見るを利用可能に
 - Fix: ドライブクリーナーでファイルを削除しても画面に反映されない問題を修正 #16061
 
 ### Server

packages/frontend/src/components/MkDrive.vue

@@ -135,7 +135,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 				/>
 			</TransitionGroup>
 
-			<MkButton v-show="filesPaginator.canFetchOlder.value" :class="$style.loadMore" primary rounded @click="filesPaginator.fetchOlder()">{{ i18n.ts.loadMore }}</MkButton>
+			<MkButton
+				v-show="filesPaginator.canFetchOlder.value"
+				v-appear="shouldEnableInfiniteScroll ? filesPaginator.fetchOlder : null"
+				:class="$style.loadMore"
+				primary
+				rounded
+				@click="filesPaginator.fetchOlder()"
+			>{{ i18n.ts.loadMore }}</MkButton>
 
 			<div v-if="filesPaginator.items.value.length == 0 && foldersPaginator.items.value.length == 0 && !fetching" :class="$style.empty">
 				<div v-if="draghover">{{ i18n.ts.dropHereToUpload }}</div>
@@ -182,10 +189,12 @@ const props = withDefaults(defineProps<{
 	type?: string;
 	multiple?: boolean;
 	select?: 'file' | 'folder' | null;
+	forceDisableInfiniteScroll?: boolean;
 }>(), {
 	initialFolder: null,
 	multiple: false,
 	select: null,
+	forceDisableInfiniteScroll: false,
 });
 
 const emit = defineEmits<{
@@ -194,6 +203,10 @@ const emit = defineEmits<{
 	(ev: 'cd', v: Misskey.entities.DriveFolder | null): void;
 }>();
 
+const shouldEnableInfiniteScroll = computed(() => {
+	return prefer.r.enableInfiniteScroll.value && !props.forceDisableInfiniteScroll;
+});
+
 const folder = ref<Misskey.entities.DriveFolder | null>(null);
 const hierarchyFolders = ref<Misskey.entities.DriveFolder[]>([]);
 

packages/frontend/src/directives/appear.ts

@@ -16,7 +16,7 @@ export const appearDirective = {
 		const fn = binding.value;
 		if (fn == null) return;
 
-		const check = throttle<IntersectionObserverCallback>(1000, (entries) => {
+		const check = throttle<IntersectionObserverCallback>(500, (entries) => {
 			if (entries.some(entry => entry.isIntersecting)) {
 				fn();
 			}