[client] Smarter timeline fetching

packages/client/src/components/MkNotes.vue

@@ -34,7 +34,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from "vue";
+import { onActivated, onDeactivated, onMounted, onUnmounted, ref } from "vue";
 import type { Paging } from "@/components/MkPagination.vue";
 import XNote from "@/components/MkNote.vue";
 import XList from "@/components/MkDateSeparatedList.vue";
@@ -52,10 +52,34 @@ const props = defineProps<{
 
 const pagingComponent = ref<InstanceType<typeof MkPagination>>();
 
+const interval = ref<NodeJS.Timer>();
+
 function scrollTop() {
+	if (!tlEl.value) return;
 	scroll(tlEl.value, { top: 0, behavior: "smooth" });
 }
 
+function setTimer() {
+	if ($store.state.enableInfiniteScroll && !interval.value) {
+		interval.value = setInterval(() => {
+			const viewport = document.documentElement.clientHeight;
+			const left = document.documentElement.scrollHeight - document.documentElement.scrollTop;
+			if (left <= viewport * 3) pagingComponent.value.prefetchMore();
+		}, 100);
+	}
+}
+
+function clearTimer() {
+	if (!interval.value) return;
+	clearInterval(interval.value);
+	interval.value = undefined;
+}
+
+onMounted(setTimer);
+onActivated(setTimer);
+onUnmounted(clearTimer);
+onDeactivated(clearTimer);
+
 defineExpose({
 	pagingComponent,
 	scrollTop,

packages/client/src/components/MkPagination.vue

@@ -41,13 +41,11 @@
 				key="_more_"
 				class="cxiknjgy _gap"
 			>
+				<div
+					v-appear="$store.state.enableInfiniteScroll && !disableAutoLoad ? fetchMore : null"
+				/>
 				<MkButton
-					v-if="!moreFetching"
-					v-appear="
-						$store.state.enableInfiniteScroll && !disableAutoLoad
-							? fetchMore
-							: null
-					"
+					v-if="!moreFetching && !$store.state.enableInfiniteScroll && !disableAutoLoad"
 					class="button"
 					:disabled="moreFetching"
 					:style="{ cursor: moreFetching ? 'wait' : 'pointer' }"
@@ -109,7 +107,7 @@ export type Paging<
 	offsetMode?: boolean;
 };
 
-const SECOND_FETCH_LIMIT = 30;
+const SECOND_FETCH_LIMIT = 15;
 
 const props = withDefaults(
 	defineProps<{
@@ -118,7 +116,7 @@ const props = withDefaults(
 		displayLimit?: number;
 	}>(),
 	{
-		displayLimit: 30,
+		displayLimit: 15,
 	},
 );
 
@@ -243,6 +241,11 @@ const refresh = async (): void => {
 		);
 };
 
+const prefetchMore = async (): Promise<void> => {
+	if (props.disableAutoLoad || !$store.state.enableInfiniteScroll) return;
+	await fetchMore();
+}
+
 const fetchMore = async (): Promise<void> => {
 	if (
 		!more.value ||
@@ -498,6 +501,7 @@ defineExpose({
 	append,
 	removeItem,
 	updateItem,
+	prefetchMore,
 });
 </script>