holm/fediwall
1
1
Fork 0
forked from extern/fediwall
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Pause updates if scrolled down

Browse Source
This commit is contained in:
Marcel Hellkamp 2023-12-27 17:36:38 +01:00
parent a58dda32b7
commit 0e75562205
1 changed files with 15 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/App.vue
View File

@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed, inject, onBeforeUnmount, onMounted, onUpdated, provide, ref, watch } from 'vue'; import { computed, inject, onBeforeUnmount, onMounted, onUpdated, provide, ref, watch } from 'vue';
import { createFilterWrapper, debounceFilter, useDocumentVisibility, usePreferredDark, useWindowSize } from '@vueuse/core' import { createFilterWrapper, debounceFilter, useDocumentVisibility, usePreferredDark, useWindowScroll, useWindowSize } from '@vueuse/core'
import { type Config, type Post } from '@/types'; import { type Config, type Post } from '@/types';
import { loadConfig } from '@/config'; import { loadConfig } from '@/config';
@ -32,13 +32,23 @@ onBeforeUnmount(() => {
stopUpdates() stopUpdates()
}) })
// Pause updates while tab/window is hidden // Pause updates while tab/window is hidden or window is scrolled down
const visibilityState = useDocumentVisibility() const visibilityState = useDocumentVisibility()
watch(visibilityState, () => { const scrollState = useWindowScroll()
if (visibilityState.value === "hidden") const updatePaused = computed(() => {
const ypos = scrollState.y.value;
const hidden = visibilityState.value === "hidden";
return ypos > 256 || hidden
})
watch(updatePaused, () => {
if (updatePaused.value) {
console.debug("Updates paused")
stopUpdates() stopUpdates()
else } else {
console.debug("Updates resumed")
restartUpdates() restartUpdates()
}
}) })
// Fix Masonry layout on updates, config changes or window resize events // Fix Masonry layout on updates, config changes or window resize events