React component switch animation with a loader - Glitchy

Question

I have a requirement where i have couple of components out of which only one could be displayed at a particular point of time. The components are of varying heights.

When a user clicks on the button in the currently displayed component i need to

1. Show a loader to the user
2. Render the component in background.
3. Wait till the rendered component calls onLoad callback.
4. Once onLoad callback is recived, hide the loader.

Something like below (Code sandbox here)

const [loading, setLoading] = useState(false);
  const [activeElement, setActiveElement] = useState("Component1");

  const onLoad = () => {
    setLoading(false);
  };

  const onClick = () => {
    setLoading(true);
    setActiveElement(
      activeElement === "Component1" ? "Component2" : "Component1"
    );
  };

  return (
    <div className="container">
      <ViewWrapperHOC loading={loading}>
        {activeElement === "Component1" ? (
          <Component1 onLoad={onLoad} onClick={onClick} />
        ) : (
          <Component2 onLoad={onLoad} onClick={onClick} />
        )}
      </ViewWrapperHOC>
    </div>
  );

I was planning to write a wrapper component (ViewWrapperHOC in above example) to show the transition between the components and show the loader. Now the problem is when i try to animate, since i have to render both the progressbar and children in viewwrapper, the animation seems to be very glitchy.

Code sandbox here

Could someone suggest a way to fix this. I am open to any alternate animations or any alternate approach to achieve this in any form of pleasant ux. Thanks in advance.

Answer 1

In that second code sandbox, your issue is that as soon as you click, you are changing which element is active, therefore it gets rendered.

You could put a small timeout in the onClick function:

  const onClick = () => {
    setLoading(true);

    setTimeout(() => {
      setActiveElement(
        activeElement === "Component1" ? "Component2" : "Component1"
      );
    }, 100);
  };

Then in view wrapper you'll need to get rid of transition: "200ms all ease-in-out, 50ms transform ease-in-out".

You need to have a known height here to be able to make a smooth change in height transition.

See codesandbox fork

Version 2:

Here is version 2, using refs. Main changes are moving the box shadow out of the components to the container in view wrapper. Adding refs to the components, passing the active ref to the wrapper and then setting the height with height transition.

To be honest, I'd probably restructure the code a lot if I had the time.