Making a wave like typing loader in react spring. How to add timeout to animations?

Question

How can I improve the animation of the typing indicator in my chat app to create a more fluid "wave" effect?

I've experimented with using useTrail and useChain hooks, but encountered issues with synchronization and loop support. Use trail can't handle loop, with chain adding delays just ruins the order of animations.

Currently, I've resorted to manually setting timeouts, but I'm seeking a more elegant solution.

import { animated, useSprings } from "@react-spring/web";
import s from "./typingLoader.module.scss";
import { useEffect } from "preact/hooks";

const TypingLoader = () => {
  const [springs, api] = useSprings(3, () => ({
    from: { scale: 0 },
    to: [{ scale: 1 }, { scale: 0 }],
    config: {
      mass: 5,
    },
    loop: true,
    pause: true,
  }));

  useEffect(() => {
    api.current.forEach((controller, index) => {
      setTimeout(() => {
        controller.resume();
      }, index * 500);
    });
  }, []);

  return (
    <div class={s.main}>
      <animated.span style={springs[0]}></animated.span>
      <animated.span style={springs[1]}></animated.span>
      <animated.span style={springs[2]}></animated.span>
    </div>
  );
};

export default TypingLoader;