How to use react transition group after API loads?

Question

1. I'm displaying a skeleton loader when the page loads.
2. When My API are done fetching, skeleton is removed from the DOM
3. Content is added to the DOM.

I would like to fade-out the skeleton when it goes away, and to fade-in the content when it comes in.

For that, I'm using react-transition-group, with the CSSTransition component.

Here is a simplified version of my code so far, please forgive me for the lack of a codepen, since replicating and mimicking API loading/ready states are quite tedious to me :

Homepage.tsx :

function HomePage() {
 
  const { data: dataAPI, error } = useAPI1();
  const { data: dataAPI2, error: error2 } = useAPI2();
  
  if (!dataAPI || !dataAPI2) return <SkeletonLoader isLoading={!dataAPI && !dataAPI2} />;

  if (error) return <Error customMessage="Error from API1" />;
  if (error2) return <Error customMessage="Error from API2" />;

  return (
    <>
      <p>My content !</p>
    </>
  );
}

export default HomePage;

SkeletonLoader.tsx

const SkeletonLoader = ({ isLoading }: { isLoading: boolean }) => {
  const nodeRef = useRef(null);
  return (
    <CSSTransition timeout={1000} classNames="skeleton" in={!isLoading} nodeRef={nodeRef}>
      <Layout>
        <div className={styles.skeleton} ref={nodeRef}>
          <div className={styles.img} />
          <div className={styles.line} />
          <SkeletonProduct />
          <SkeletonProduct />
          <SkeletonProduct />
        </div>
      </Layout>
    </CSSTransition>
  );
};

export default SkeletonLoader;

global.scss

.skeleton-enter {
  opacity: 0;
}

.skeleton-enter-active {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 1000ms;
}

.skeleton-exit {
  opacity: 1;
}

.skeleton-exit-active {
  opacity: 0;
  transition: opacity 1000ms;
}

I've tried different things but I can't see the fade-out when the skeleton is removed from the DOM.

Thank you for your help.

Answer 1

You're unmounting the transition group before it has time to play your animation.

  if (!dataAPI || !dataAPI2) return <SkeletonLoader isLoading={!dataAPI && !dataAPI2} />;

will stop rendering your transition group.

you could try to always render the transition group, and have it unmount itself with 'unmountOnExit` property:

function HomePage() {
  const { data: dataAPI, error } = useAPI1();
  const { data: dataAPI2, error: error2 } = useAPI2();
  
  const isLoading =  (!dataAPI || !dataAPI2) 
  const shouldRenderContent = !error && !error2 && !isLoading;

  return (
    <>
      { error && <Error customMessage="Error from API1" /> }
      { error2 && <Error customMessage="Error from API2" /> }
      { isLoading && <SkeletonLoader isLoading={isLoading} />}     
      {shouldRenderContent && <p>My content !</p> }
    </>
  );
}

export default HomePage;

....
    <CSSTransition 
       unmountOnExit  // <-- this will remove the children when 'exit' ran.
       timeout={1000}
       classNames="skeleton"
       in={!isLoading}
       nodeRef={nodeRef}
       >
.....

Code sandbox where the api call is replaced with simple button toggle