diff --git a/bootstrap/ssr/ssr.js b/bootstrap/ssr/ssr.js index d7f0c1dd..8da29eef 100644 --- a/bootstrap/ssr/ssr.js +++ b/bootstrap/ssr/ssr.js @@ -41501,7 +41501,7 @@ function ArtworkComments({ try { observer = new window.IntersectionObserver((entries) => { if (entries.some((entry) => entry.isIntersecting)) trigger(); - }, { rootMargin: "1000px 0px" }); + }, { rootMargin: "350px 0px" }); observer.observe(section); established = true; } catch { diff --git a/resources/js/components/artwork/ArtworkComments.jsx b/resources/js/components/artwork/ArtworkComments.jsx index 8e36173e..95005e90 100644 --- a/resources/js/components/artwork/ArtworkComments.jsx +++ b/resources/js/components/artwork/ArtworkComments.jsx @@ -536,7 +536,7 @@ export default function ArtworkComments({ try { observer = new window.IntersectionObserver((entries) => { if (entries.some((entry) => entry.isIntersecting)) trigger() - }, { rootMargin: '1000px 0px' }) + }, { rootMargin: '350px 0px' }) observer.observe(section) established = true } catch { diff --git a/resources/js/components/artwork/ArtworkComments.test.jsx b/resources/js/components/artwork/ArtworkComments.test.jsx index e98bb2e0..c54d5395 100644 --- a/resources/js/components/artwork/ArtworkComments.test.jsx +++ b/resources/js/components/artwork/ArtworkComments.test.jsx @@ -12,6 +12,7 @@ vi.mock('../../utils/emojiFlood', () => ({ isFlood: () => false })) describe('ArtworkComments deferred loading', () => { let observerCallback + let observerOptions beforeEach(() => { axios.get.mockResolvedValue({ @@ -20,8 +21,9 @@ describe('ArtworkComments deferred loading', () => { meta: { current_page: 1, last_page: 1, total: 1 }, }, }) - window.IntersectionObserver = vi.fn((callback) => { + window.IntersectionObserver = vi.fn((callback, options) => { observerCallback = callback + observerOptions = options 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 () => { render() + expect(observerOptions).toEqual(expect.objectContaining({ rootMargin: '350px 0px' })) + await new Promise((resolve) => setTimeout(resolve, 20)) expect(axios.get).not.toHaveBeenCalled()