[bug]: useResize is jumpy

[flaff]

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.7.3

What's Wrong?

Hello 👋 useResize does not always animate to/from 0 height due to immediate attribute

react-spring/packages/core/src/hooks/useResize.ts

Line 60 in cfc74ea

sizeValues.width.get() === 0 || sizeValues.height.get() === 0,

Hook could be misused by me - there are not many examples in docs. Please correct me if I'm wrong 🙏

To Reproduce

I created a sandbox where I tried disabling immediate flag inside useResize hook impl. Though then it animates on mount which is even worse... 🤷 Sandbox contains both OG and modded useResize without that single attribute 😊

For the record: the workaround I found for now is to always provide at least 1px of content within the referenced container:

export function AnimateHeight({ children }) {
  const container = useRef();
  const { height } = useResize({ container });

  return (
    <animated.div style={{ height, overflow: 'hidden' }}>
      <div ref={container}>
        <div style={{ height: '1px', marginTop: '-1px' }} />
        {children}
      </div>
    </animated.div>
  );
}

Expected Behaviour

Animated wrapper should be animating height when referenced container height changes from/to 0

Link to repo

https://codesandbox.io/p/sandbox/react-spring-use-resize-jitter-p2npzl