[Content] Lazy load comments api call

[finnar-bin]

Only perform the api call to fetch comment by resource item when the component is in view to prevent firing off multiple api requests once a content item is loaded
Resolves #3897

Screencast_20251119_115912.webm

[shrunyan]

I like the general idea. Would this be better implemented as a custom hook? this way we could apply the technique elsewhere?

[finnar-bin]

@shrunyan yeah, that makes sense. I'll do just that.

[finnar-bin]

@shrunyan converted to a hook as suggested

[agalin920]

@finnar-bin https://github.com/streamich/react-use/blob/master/src/useIntersection.ts

[finnar-bin]

@finnar-bin https://github.com/streamich/react-use/blob/master/src/useIntersection.ts

@agalin920 I've updated the code to make use of the already existing intersection hook from react-use. I tried making eratic and fast scrolls and wasn't able to see any major slow downs on the app despite the button being re-rendered everytime due to the intersection observer.