Reduce deferred comments observer margin

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 {

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 {

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(<ArtworkComments artworkId={9357} isLoggedIn={false} />)
 
+    expect(observerOptions).toEqual(expect.objectContaining({ rootMargin: '350px 0px' }))
+
     await new Promise((resolve) => setTimeout(resolve, 20))
     expect(axios.get).not.toHaveBeenCalled()