bvandeusen
8979e0e377
The IntersectionObserver-on-a-sentinel infinite-scroll pattern was copy- pasted in 7 places. New composables/useInfiniteScroll(sentinelRef, cb) owns the observer lifecycle (attach on mount, re-attach when the ref changes, disconnect on unmount). Migrated GalleryGrid, MasonryGrid (gallery+showcase), ArtistPostsTab, ArtistsView, TagsView, SeriesManageView. PostsView left manual on purpose — its anchored mode does bidirectional scroll-position preservation that doesn't fit the simple composable. I4(a) (timestamps) is effectively already done: the UTC displays were converted earlier; the remaining toLocaleString uses already render local time, so they're left as-is rather than churned for format-only consistency. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
29 lines
967 B
JavaScript
29 lines
967 B
JavaScript
import { onMounted, onUnmounted, watch } from 'vue'
|
|
|
|
// Shared IntersectionObserver-on-a-sentinel infinite-scroll lifecycle.
|
|
// Pass a ref to the sentinel element and a callback to fire when it scrolls
|
|
// into view; the callback owns its own guard (e.g. `if (store.hasMore &&
|
|
// !store.loading) store.loadMore()`). Re-attaches if the sentinel ref
|
|
// changes (e.g. it's behind a v-if) and disconnects on unmount.
|
|
export function useInfiniteScroll (sentinelRef, onIntersect, { rootMargin = '600px' } = {}) {
|
|
let observer = null
|
|
|
|
function teardown () {
|
|
if (observer) { observer.disconnect(); observer = null }
|
|
}
|
|
function attach () {
|
|
teardown()
|
|
if (!sentinelRef.value) return
|
|
observer = new IntersectionObserver(([entry]) => {
|
|
if (entry.isIntersecting) onIntersect()
|
|
}, { rootMargin })
|
|
observer.observe(sentinelRef.value)
|
|
}
|
|
|
|
onMounted(attach)
|
|
watch(sentinelRef, attach)
|
|
onUnmounted(teardown)
|
|
|
|
return { attach, teardown }
|
|
}
|