Infinite Scroll using an intersection observer?

[gmcamposano]

I have been looking around for examples using the infinite scroll using an intersection observer, but I cant seem to find find one. Can anyone please share an example?

[harvestnide]

That's how I approached this issue (using SWR with graphql-request as fetcher)

1. I introduced reusable hook for all of my infinite hooks, which adds isLoading to each hook (still don't understand why it is not included by default) and adds state to deduplicate onClick / onScroll events - I don't want to trigger loading of next page, while current is still loading.
   Note on onClick and onScroll - I allow both, intersection observer is not consistent enough - it's triggered based on browser frame rate and does not handle fast scrolling in some cases. User is able to just click the button, when something goes wrong

import { useState, useEffect } from 'react';

import type { ClientError } from 'graphql-request/dist/types';

export type UsePaginationLoadingStateReturn = {
  isLoading: boolean;
  handleLoadEvent: () => void;
};

type UsePaginationLoadingState = (
  swrHookRes: {
    data?: Array<unknown | undefined> | undefined;
    error?: ClientError;
    size: number;
    setSize: (callback: (size: number) => number) => void;
  },
  hasNextPage: boolean,
) => UsePaginationLoadingStateReturn;

const usePaginationLoadingState: UsePaginationLoadingState = (
  { data, setSize, size, error },
  hasNextPage,
) => {
  const isLoading =
    (!data && !error) || // initial load.
    (size > 0 && data && typeof data[size - 1] === 'undefined') || // next page load triggered.
    false; // ready otherwise.

  const [shouldTriggerLoading, setShouldTriggerLoading] = useState(false);
  useEffect(() => {
    if (!hasNextPage || isLoading || !shouldTriggerLoading) return;

    void setSize((size) => size + 1);
    setShouldTriggerLoading(false);
  }, [shouldTriggerLoading, isLoading, setSize, hasNextPage]);

  return { isLoading, handleLoadEvent: () => setShouldTriggerLoading(true) };
};

2. Button components. First one is regular button with onClick, second - wraps same button with InView component from react-intersection-observer.
   In addition to isLoading and handleLoadEvent from hook above - it uses hasMoreData prop to hide button, when user reached the end of feed.

import { InView } from 'react-intersection-observer';

export type LoadMoreProps = {
  /** Disables button until loading state changes. */
  isLoading?: boolean;
  /** Hides button, if no more data is available. */
  hasMoreData: boolean;
  /** Action callback - triggered on click and on scroll event. */
  handleLoadEvent: () => void;
};

// Regular button which handles onClick event. 
export const LoadMore: FC<LoadMoreProps> = ({
  isLoading,
  hasMoreData,
  handleLoadEvent,
}) =>
  hasMoreData ? ( // hides button if on last page
    <div>
      <Button
        type="button"
        onClick={handleLoadEvent}
        active
        disabled={isLoading ?? false}>
        {loading ? 'Loading...' : 'Load More'}
      </Button>
    </div>
  ) : null;

type LoadMoreInfProps = LoadMoreProps & {
  /** Offset for scroll event - counted from current viewport down. */
  triggerMargin?: number;
};

// Same Button from above, wrapped in InView.
export const LoadMoreInf: FC<LoadMoreInfProps> = ({
  hasMoreData,
  handleLoadEvent,
  isLoading,
  triggerMargin = 1500,
}) =>
  hasMoreData ? (
    <InView
      rootMargin={`0px 0px ${triggerMargin}px`}
      onChange={(inView) => inView && handleLoadEvent()}>
      <LoadMore hasMoreData handleLoadEvent={handleLoadEvent} isLoading ={isLoading} />
    </InView>
  ) : null;

3. And finally, feed itself is build on top of Swr/Infinite examples from docs, with basically zero additional modifications required