I have a react functional infinite scroller component that fetches data from an api, The GetImages function flips a loading State variable to denote its status and appends to another state variable that contains links to images.

  async function GetImages()
  {
    //sets loading to true
    //fetches data from api and appends to the current images
    //sets loading to false
  }

I also have a useEffect hooked up to the window to check if the user has scrolled all the way to the bottom

  useEffect(()=>{
    window.addEventListener('scroll',handleScroll)
  },[])

The handler for the scroll checks if the user has reached the bottom and increases the page by one which then triggers a useEffect that calls GetImages once again.

  const handleScroll = (e) =>
  {
    console.log(pageRef.current);
    if(window.innerHeight+e.target.documentElement.scrollTop +1 >= 
    e.target.documentElement.scrollHeight && !loadingRef.current)
    {
      console.log("reached the end"+pageRef.current)
      setPage(page => page + 1);
    }
  }

Finally this component returns ImageCell components (basically image tags) by mapping them to each image and adds a loading spinner at the bottom if new images are currently being loaded.

  return(
   <Container> 
    <h1>Images</h1>
     {images.map((image,index)=>{
      return(<ImageCell link={image} key={index} id={index}></ImageCell>)
     })}
     <Container className='loader' >{loading ? 
        <span className="react-logo">
        <span className="nucleo">
        </span></span>
        : <span></span>}
     </Container>
     </Container>
      )
}

This entire component sits in my App.js and is lazy loaded. So that I also get a spinner if the initial call for GetImages is slow and takes a while to execute.

const Scroller = lazy(()=>import('./components/scroller'));
function App() {
  return (
    <div className="App">
          <SNavbar></SNavbar>
          <hr/>
          <Suspense fallback=
          { <Container className='loader'>  
            <span className="react-logo">
                      <span className="nucleo"></span>
                  </span>
            </Container>
          }>
            <Scroller />
          </Suspense>
    </div>
  );
}

Would it be appropriate to also use lazy loading INSIDE my infinite scroller? If so how would I accomplish this? I've tried placing the suspense tags in and around the call to map the images to the image cells and that has not worked. The conditionally rendered spinner seems to do a fine job of denoting that more content is coming though I'm not sure if lazy loading(if possible) would be a better approach in this case.