ash/iceshrimp
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

[client] Use defaultStore instead of $store, debounce fetches

Browse source
This commit is contained in:
Laura Hausmann 2023-11-23 18:44:31 +01:00
parent 9a34c38d0b
commit 248bf22b94
No known key found for this signature in database
GPG key ID: D044E84C5BE01605
2 changed files with 13 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
packages/client/src/components/MkNotes.vue
View file

@ -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() {

3
packages/client/src/components/MkPagination.vue
View file

@ -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();
}