Reduce deferred comments observer margin

This commit is contained in:
2026-08-29 13:53:00 +02:00
parent 2f8f7472ca
commit 29e6dee609
3 changed files with 7 additions and 3 deletions
+1 -1
View File
@@ -41501,7 +41501,7 @@ function ArtworkComments({
try { try {
observer = new window.IntersectionObserver((entries) => { observer = new window.IntersectionObserver((entries) => {
if (entries.some((entry) => entry.isIntersecting)) trigger(); if (entries.some((entry) => entry.isIntersecting)) trigger();
}, { rootMargin: "1000px 0px" }); }, { rootMargin: "350px 0px" });
observer.observe(section); observer.observe(section);
established = true; established = true;
} catch { } catch {
@@ -536,7 +536,7 @@ export default function ArtworkComments({
try { try {
observer = new window.IntersectionObserver((entries) => { observer = new window.IntersectionObserver((entries) => {
if (entries.some((entry) => entry.isIntersecting)) trigger() if (entries.some((entry) => entry.isIntersecting)) trigger()
}, { rootMargin: '1000px 0px' }) }, { rootMargin: '350px 0px' })
observer.observe(section) observer.observe(section)
established = true established = true
} catch { } catch {
@@ -12,6 +12,7 @@ vi.mock('../../utils/emojiFlood', () => ({ isFlood: () => false }))
describe('ArtworkComments deferred loading', () => { describe('ArtworkComments deferred loading', () => {
let observerCallback let observerCallback
let observerOptions
beforeEach(() => { beforeEach(() => {
axios.get.mockResolvedValue({ axios.get.mockResolvedValue({
@@ -20,8 +21,9 @@ describe('ArtworkComments deferred loading', () => {
meta: { current_page: 1, last_page: 1, total: 1 }, meta: { current_page: 1, last_page: 1, total: 1 },
}, },
}) })
window.IntersectionObserver = vi.fn((callback) => { window.IntersectionObserver = vi.fn((callback, options) => {
observerCallback = callback observerCallback = callback
observerOptions = options
return { observe: vi.fn(), disconnect: vi.fn() } return { observe: vi.fn(), disconnect: vi.fn() }
}) })
}) })
@@ -35,6 +37,8 @@ describe('ArtworkComments deferred loading', () => {
it('does not fetch until the comments section approaches the viewport', async () => { it('does not fetch until the comments section approaches the viewport', async () => {
render(<ArtworkComments artworkId={9357} isLoggedIn={false} />) render(<ArtworkComments artworkId={9357} isLoggedIn={false} />)
expect(observerOptions).toEqual(expect.objectContaining({ rootMargin: '350px 0px' }))
await new Promise((resolve) => setTimeout(resolve, 20)) await new Promise((resolve) => setTimeout(resolve, 20))
expect(axios.get).not.toHaveBeenCalled() expect(axios.get).not.toHaveBeenCalled()