I'm trying to animate the component on page. It's rendering conditional, so when the data is loading we can see the spinner. How to add animation after successful upload? To be precise, I don't know which inProp I should use. I tried it with "loading" but it didn't work.

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

And here is the View component, that render html, so I thinked, that I should add animation there, but it did't worked.

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

CSS file:

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

Thanks for helping