Bug? If all items from initial batch fit to screen, loadMore is never triggered

[baobabKoodaa]

I just started tinkering with this, so sorry if I've missed something, but at least with my current setup I have this issue: If all items from initial batch fit to screen, scrolling bar doesn't exist and loadMore is never triggered. If I resize the window smaller to make the window scrollable, loadMore is triggered again.

[baobabKoodaa]

Created PR for this: #10

[baleeds]

I see your PR, but I'm still having this issue. Perhaps it's because of the conditional on threshold?

[baobabKoodaa]

Could you show a reproducible example of the issue? I could take a look tomorrow.

[baleeds]

Well, it was because the new version was never published to npm.

But there is another issue with your change, where I was getting duplicate keys. I was able to figure it out, it's because the function call in componentDidUpdate isn't using the throttled version of the scroll handler. But even with that fix, there's still issues with using componentDidMount in this case, I think because it's causing race conditions.

I wasn't sure how to get multiple loads other than to have onLoadMore return a promise and run checkWindowScroll on then.

Not sure what to do now though, since, Jared isn't publishing this package.

[baobabKoodaa]

Hmmh. Well, if you run out of ideas how to do it properly, one ugly way to do it would be to simply have a timer go off every 0.5 seconds or whatever and load more items if needed.

[baleeds]

I actually used a completely different solution, but I think it works well!

import React from 'react';
import InView from 'react-intersection-observer';

interface Props {
  onLoadMore?: () => void;
  loading?: boolean;
  hasNextPage?: boolean;
  offset?: number;
}

export const InfiniteScroll: React.FC<Props> = ({
  onLoadMore,
  loading,
  hasNextPage,
  offset = 1000,
}) => {
  const handleInView = (isInView: boolean) => {
    if (isInView && hasNextPage && !loading && onLoadMore) {
      onLoadMore();
    }
  };

  if (loading) return null;

  return (
    <InView rootMargin={`${offset}px`} onChange={handleInView}>
      {({ ref }) => <div ref={ref} />}
    </InView>
  );
};

[sakulstra]

Hayho i was just debugging this till i realized:

Well, it was because the new version was never published to npm.

is still true 😅

@jaredpalmer any chance of publishing a new version? 🤔