[bug]: animation does not loop if consumer element takes to long to appear

Which react-spring target are you using?

• @react-spring/web
• @react-spring/three
• @react-spring/native
• @react-spring/konva
• @react-spring/zdog

What version of react-spring are you using?

9.6.1

What's Wrong?

When you do useSpring({ loop: true}) to loop an animation with multiple tos but use the values in an element that only appear after some time the animation plays but doesn't loop. It only occurs on larger display delays.

To Reproduce

Following code reproduces the issue:

function App() {
  const { width } = useSpring({
    from: { width: 100 },
    // Multiple tos are required for reproduction
    to: [{ width: 200 }, { width: 300 }],
    // Should theoretically loop
    loop: true
  });
 
  // Becomes true after 1 second
  const [show, setShow] = useState(false);
  useEffect(() => {
    const timeout = setTimeout(() => setShow(true), 1000);
    return () => clearTimeout(timeout);
  }, []);

  return (
    show && (
      // Gets shown after one second and doesn't loop
      <animated.div
        style={{
          width: width,
          height: 100,
          backgroundColor: "black"
        }}
      />
    )
  );
}

Expected Behaviour

It should loop no matter how long the element takes to appear.

Link to repo

https://codesandbox.io/s/laughing-flower-jwipm6?file=%2Fsrc%2FApp.js

Start at useSpring in @react-spring/web and reproduce the linked CodeSandbox with delayed conditional rendering and multiple to values. Trace why loop: true stops before the element appears; done when the animation continues looping after the element is shown, with coverage for this delayed case.