Tengo un componente de desplazamiento infinito funcional de reacción que obtiene datos de una API. La función GetImages voltea una variable de estado de carga para indicar su estado y se agrega a otra variable de estado que contiene enlaces a imágenes.

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

También tengo un useEffect conectado a la ventana para verificar si el usuario se ha desplazado hasta el final.

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

El controlador del desplazamiento comprueba si el usuario ha llegado al final y aumenta la página en uno, lo que luego activa un efecto de uso que llama a GetImages una vez más.

 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); } }

Finalmente, este componente devuelve los componentes de ImageCell (básicamente etiquetas de imagen) asignándolos a cada imagen y agrega un indicador de carga en la parte inferior si se están cargando nuevas imágenes actualmente.

 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> ) }

Todo este componente se encuentra en mi App.js y está cargado de forma diferida. De modo que también obtengo un control giratorio si la llamada inicial para GetImages es lenta y tarda un tiempo en ejecutarse.

 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> ); }

¿Sería apropiado usar también la carga diferida DENTRO de mi scroller infinito? Si es así, ¿cómo lograría esto? Intenté colocar las etiquetas de suspenso dentro y alrededor de la llamada para asignar las imágenes a las celdas de imagen y eso no funcionó. La ruleta renderizada condicionalmente parece hacer un buen trabajo al indicar que viene más contenido, aunque no estoy seguro de si la carga diferida (si es posible) sería un mejor enfoque en este caso.