Element is in view port but still not rendered

[rmoghariya7]

I am working in a chat application and also implemented the infinite scrolling both side, But when multiple request of the messages take place then some glitch happen.
problem : the element is visible in viewport but its doesn't render its content instead showing the placeholder
@GusRuss89 @jasononeil @daleperforce
Attaching a image for reference : )

[dimatima13]

I have the same issue...

[Lenur29]

@rmoghariya7 @Dimatymoshchenko Hi, Have you found some solution for the issue described above? If yes, could you please share your approach. And there is one more thing in my case. I have chat messages with different heights and that's why when I scroll over messages for the first time it looks a bit awkward, because scroll tries to adapt according to real heights of messages.

[dimatima13]

@Lenur29 No ;(

[bytemain]

https://github.com/thebuilder/react-intersection-observer

For those who also encountered this issue, I have switched to this package and it has been performing well.

[theopolis]

I trialed the react-intersection-observer library and found this one here is much simpler and can work well with fixups. It's easy to inline, which is what I am doing.

I believe this issue is because the observer callback is only inspecting the first entry, and the browser might batch events together. If two events are batched then the latter (more recent) might have the element in the viewport. This happened to me when triggering a resort of the elements.

Here is a fix:

    // Set visibility with intersection observer
    useEffect(() => {
        if (!intersectionRef.current) {
            return;
        }
        const localRef = intersectionRef.current;
        const observer = new IntersectionObserver(
            entries => {
                let mostRecentEntryTime = -1;
                let mostRecentEntry: IntersectionObserverEntry | null = null;
                for (const entry of entries) {
                    if (entry.time > mostRecentEntryTime) {
                        mostRecentEntryTime = entry.time;
                        mostRecentEntry = entry;
                    }
                }
                if (!mostRecentEntry) {
                    return;
                }
                if (mostRecentEntry.isIntersecting) {
                    setIsVisible(true);
                } else {
                    setIsVisible(false);
                }
            },
            { root, rootMargin: `${visibleOffset}px 0px ${visibleOffset}px 0px` }
        );

        observer.observe(localRef);
        return () => {
            observer.unobserve(localRef);
        };
    }, [root, visibleOffset]);

In this example, when entries are batched then only the last most recent intersecting decision is considered.