Considere el siguiente componente en reaccionar:
import React from "react"; import { Carousel } from "react-bootstrap"; function CarouselHome() { return ( <> <Carousel fade pause="hover" id="carousel" variant=""> <Carousel.Item> <img className="d-block w-100" src="https://source.unsplash.com/1280x400/?bali" alt="First slide" /> <Carousel.Caption> <p>Bali, Indonesia</p> </Carousel.Caption> </Carousel.Item> <Carousel.Item> <img className="d-block w-100" src="https://source.unsplash.com/1280x400/?maldives" alt="Second slide" /> <Carousel.Caption> <p>Maldives</p> </Carousel.Caption> </Carousel.Item> <Carousel.Item> <img className="d-block w-100" src="https://source.unsplash.com/1280x400/?greece" alt="Third slide" /> <Carousel.Caption> <p>Greece</p> </Carousel.Caption> </Carousel.Item> </Carousel> </> ); } export default CarouselHome;source.unsplash.com devuelve una imagen, pero tarda aproximadamente un segundo, por lo que el resto de la página se carga antes que este componente. Quiero agregar un control giratorio mientras se carga, ¿cómo hago esto teniendo en cuenta que esto ni siquiera es una búsqueda? ¿llamar?
Puedes aplicar lógica algo como esto
import React, {useState} from "react"; import { Carousel } from "react-bootstrap"; function CarouselHome() { const [imageLoaded, setImageLoaded]=React.useState(false); return ( <> <Carousel fade pause="hover" id="carousel" variant=""> <Carousel.Item> <img className={`w-100 ${ imageLoaded ? 'd-block' : 'd-none' }`} src="https://source.unsplash.com/1280x400/?bali" alt="First slide" onLoad={()=> setImageLoaded(true)}} /> {!imageLoaded && ( <div className="smooth-preloader"> </div> )} <Carousel.Caption> <p>Bali, Indonesia</p> </Carousel.Caption> </Carousel.Item> </Carousel> </> ); } export default CarouselHome;declaré la variable de estado con el nombre imageLoaded y cambié este estado en la función onLoad de img y también cambié el className según el cambio de estado
Puedes lograr eso con esta estructura. Cree el componente <Image/> y <Loader/> .
const Image = ({item}) => { const [imageLoaded, setImageLoaded] = useState(false); const handleImageLoad = () => { setImageLoaded(true); }; return ( <div> {!imageLoaded && <Loader />} <img src={item.src} alt={item.alt} onLoad={handleImageLoad} /> </div> ); }