161sh/iceshrimp-161sh
1
0
Fork 0
mirror of https://iceshrimp.dev/crimekillz/iceshrimp-161sh.git synced 2024-11-24 21:19:07 +01:00
Code Issues Packages Projects Releases Wiki Activity

[client] Smarter timeline fetching

Browse Source
This commit is contained in:
Laura Hausmann 2023-11-23 17:19:02 +01:00
parent c347eca737
commit 151e7499c3
No known key found for this signature in database
GPG Key ID: D044E84C5BE01605
2 changed files with 37 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
packages/client/src/components/MkNotes.vue
View File

@ -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,

20
packages/client/src/components/MkPagination.vue
View File

@ -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>