Intersection observer on Safari

[apenab]

Hi guys, nice lib!!
I've the following problem: I'm implementing an InfiniteScroll component, I've the following implementation:

export function InfiniteScroll({loadMore, hasMore, isLoading, children}) {
  const {ref, inView} = useInView({
    threshold: 0.9,
  });

  React.useEffect(() => {
    if (inView && !isLoading && hasMore) {
      loadMore();
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [inView]);

  return (
    <Box>
      {children}
      {!isLoading && (
        // Trick to fix IntersectionObserver not working in Safari when component is empty
        <span ref={ref} style={{color: "white"}}>
          a
        </span>
      )}
    </Box>
  );
}

I've to use the following "Hack" because on Safari when the component is empty the IntersectionObserver API doesn't work properly.

......
{!isLoading && (
     // Trick to fix IntersectionObserver not working in Safari when component is empty
    <span ref={ref} style={{color: "white"}}>
          a
    </span>
)}
........

Any suggestions?

[thebuilder]

Can you define "not working in Safari"? How are you intending to use the ref from useInView? Seems like you just have it on the <span> right now?

[apenab]

Can you define "not working in Safari"?

If I use an implementation(IMO the right implementation) like the following, inView is never true in Safari. Note here that I'm not using any more the span with color or with a children

export function InfiniteScroll({loadMore, hasMore, isLoading, children}) {
  const {ref, inView} = useInView({
    threshold: 0.9,
  });

  React.useEffect(() => {
    if (inView && !isLoading && hasMore) {
      loadMore();
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [inView]);

  return (
    <Box>
      {children}
      {!isLoading && (
        <span ref={ref} />
      )}
    </Box>
  );
}

[thebuilder]

My guess would be it never triggers because the <span> is empty.

• Have you tried with threshold: 0?
• Make it a <div>?
• Give it a height?

It might also make sense for you to use the new onChange option - It would allow you to remove the useEffect:
https://github.com/thebuilder/react-intersection-observer#options

[apenab]

Hey @thebuilder, Thx for the advices, I was left with a solution like this:

export function InfiniteScroll({loadMore, hasMore, isLoading, children}) {
  const {ref, inView} = useInView({
    threshold: 0.9,
    onChange: (inView) => {
      if (inView && !isLoading && hasMore) {
        loadMore();
      }
    },
  });

  return (
    <Box>
      {children}
      {!isLoading && (
        <span ref={ref}>
            &nbsp;
        </span>
      )}
    </Box>
  );
}

All work well on Safari!!