mirror of https://github.com/langgenius/dify.git
fix: improve infinite scroll observer responsiveness (#27546)
Co-authored-by: crazywoola <100913391+crazywoola@users.noreply.github.com> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
This commit is contained in:
parent
7f48c57edf
commit
471cd760d7
|
|
@ -144,15 +144,23 @@ const List = () => {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
if (anchorRef.current) {
|
if (anchorRef.current && containerRef.current) {
|
||||||
|
// Calculate dynamic rootMargin: clamps to 100-200px range, using 20% of container height as the base value for better responsiveness
|
||||||
|
const containerHeight = containerRef.current.clientHeight
|
||||||
|
const dynamicMargin = Math.max(100, Math.min(containerHeight * 0.2, 200)) // Clamps to 100-200px range, using 20% of container height as the base value
|
||||||
|
|
||||||
observer = new IntersectionObserver((entries) => {
|
observer = new IntersectionObserver((entries) => {
|
||||||
if (entries[0].isIntersecting && !isLoading && !error && hasMore)
|
if (entries[0].isIntersecting && !isLoading && !error && hasMore)
|
||||||
setSize((size: number) => size + 1)
|
setSize((size: number) => size + 1)
|
||||||
}, { rootMargin: '100px' })
|
}, {
|
||||||
|
root: containerRef.current,
|
||||||
|
rootMargin: `${dynamicMargin}px`,
|
||||||
|
threshold: 0.1, // Trigger when 10% of the anchor element is visible
|
||||||
|
})
|
||||||
observer.observe(anchorRef.current)
|
observer.observe(anchorRef.current)
|
||||||
}
|
}
|
||||||
return () => observer?.disconnect()
|
return () => observer?.disconnect()
|
||||||
}, [isLoading, setSize, anchorRef, mutate, data, error])
|
}, [isLoading, setSize, data, error])
|
||||||
|
|
||||||
const { run: handleSearch } = useDebounceFn(() => {
|
const { run: handleSearch } = useDebounceFn(() => {
|
||||||
setSearchKeywords(keywords)
|
setSearchKeywords(keywords)
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue