From 29e6dee60917f58fd8261818e5648183766883d4 Mon Sep 17 00:00:00 2001
From: Gregor Klevze <gregor@klevze.si>
Date: Sat, 29 Aug 2026 13:53:00 +0200
Subject: [PATCH] Reduce deferred comments observer margin

---
 bootstrap/ssr/ssr.js                                     | 2 +-
 resources/js/components/artwork/ArtworkComments.jsx      | 2 +-
 resources/js/components/artwork/ArtworkComments.test.jsx | 6 +++++-
 3 files changed, 7 insertions(+), 3 deletions(-)

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(<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()