Reduce deferred comments observer margin
This commit is contained in:
@@ -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()
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user