Estoy tratando de animar el componente en la página. Se está renderizando condicionalmente, por lo que cuando los datos se están cargando podemos ver la rueda giratoria. ¿Cómo agregar animación después de una carga exitosa? Para ser preciso, no sé qué inProp debo usar. Lo probé con "cargando" pero no funcionó.

 const SingleComicPage = () => { const {comicId} = useParams(); const [comic, setComic] = useState(null); const {loading, error, getComic, clearError} = useMarvelService(); useEffect(() => { // eslint-disable-next-line updateComic(); // eslint-disable-next-line }, [comicId]); // eslint-disable-next-line const updateComic = () => { clearError(); getComic(comicId) .then(onComicLoaded) } const onComicLoaded = (comic) => { setComic(comic); } const errorMessage = error ? <ErrorMessage /> : null; const spinner = loading ? <Spinner /> : null; const content = !(loading || error || !comic) ? <View comic={comic}/> : null return ( <> <AppBanner /> {errorMessage} {spinner} {content} </> )

Y aquí está el componente Ver, que representa html, así que pensé que debería agregar animación allí, pero no funcionó.

 const View = ({comic}) => { const {title, description, pageCount, price, thumbnail, language} = comic; return ( <CSSTransition timeout={300} classNames="comic"> <div className="single-comic"> <img src={thumbnail} alt={title} className="single-comic__img"/> <div className="single-comic__info"> <h2 className="single-comic__name">{title}</h2> <p className="single-comic__descr">{description}</p> <p className="single-comic__descr">{pageCount}</p> <p className="single-comic__descr">{language}</p> <div className="single-comic__price">{price}</div> </div> <Link to="/comics" className="single-comic__back">Back to all</Link> </div> </CSSTransition> )

archivo CSS:

 .comic-enter{ opacity: 0; } .comic-enter-active{ opacity: 1; transition: opacity 300ms ease-in; } .comic-exit { opacity: 1; } .comic-exit-active { opacity: 0; transition: opacity 300ms ease-in; }

Gracias por ayudar