From 248bf22b94f371d06a458875e621745c640ef996 Mon Sep 17 00:00:00 2001
From: Laura Hausmann <laura@hausmann.dev>
Date: Thu, 23 Nov 2023 18:44:31 +0100
Subject: [PATCH] [client] Use defaultStore instead of $store, debounce fetches

---
 packages/client/src/components/MkNotes.vue    | 19 +++++++++++--------
 .../client/src/components/MkPagination.vue    |  3 ++-
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/packages/client/src/components/MkNotes.vue b/packages/client/src/components/MkNotes.vue
index d07cab07c..4fc03a6e0 100644
--- a/packages/client/src/components/MkNotes.vue
+++ b/packages/client/src/components/MkNotes.vue
@@ -42,6 +42,7 @@ import MkPagination from "@/components/MkPagination.vue";
 import { i18n } from "@/i18n";
 import { scroll } from "@/scripts/scroll";
 import {instance} from "@/instance";
+import { defaultStore } from "@/store.js";
 
 const tlEl = ref<HTMLElement>();
 
@@ -53,20 +54,22 @@ const props = defineProps<{
 const pagingComponent = ref<InstanceType<typeof MkPagination>>();
 
 const interval = ref<NodeJS.Timer>();
+const lastFetchScrollTop = ref(0);
 
 function scrollTop() {
 	if (!tlEl.value) return;
 	scroll(tlEl.value, { top: 0, behavior: "smooth" });
 }
 
-const 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 setTimer() {
+	if (interval.value || !defaultStore.state.enableInfiniteScroll) return;
+	interval.value = setInterval(() => {
+		const viewport = document.documentElement.clientHeight;
+		const left = document.documentElement.scrollHeight - document.documentElement.scrollTop;
+		if (left > viewport * 3 || document.documentElement.scrollTop - lastFetchScrollTop.value < viewport) return;
+		pagingComponent.value.prefetchMore();
+		lastFetchScrollTop.value = document.documentElement.scrollTop;
+	}, 100);
 }
 
 function clearTimer() {
diff --git a/packages/client/src/components/MkPagination.vue b/packages/client/src/components/MkPagination.vue
index 585ceebc6..977e1fb02 100644
--- a/packages/client/src/components/MkPagination.vue
+++ b/packages/client/src/components/MkPagination.vue
@@ -83,6 +83,7 @@ import {
 import MkButton from "@/components/MkButton.vue";
 import { i18n } from "@/i18n";
 import {instance} from "@/instance";
+import { defaultStore } from "@/store.js";
 
 export type Paging<
 	E extends keyof misskey.Endpoints = keyof misskey.Endpoints,
@@ -242,7 +243,7 @@ const refresh = async (): void => {
 };
 
 const prefetchMore = async (): Promise<void> => {
-	if (props.disableAutoLoad || !$store.state.enableInfiniteScroll) return;
+	if (props.disableAutoLoad || !defaultStore.state.enableInfiniteScroll) return;
 	await fetchMore();
 }