zoomToElement needs a setTimeout or requestAnimationFrame

[fredericrous]

Describe the bug

zoomToElement animation starts to go towards the element and then stops

To Reproduce
Steps to reproduce the behavior:

1. I'm using Remix 2.8.1
2. my code looks like the following

function MyDemo({
  zoomToElement,
}: ReactZoomPanPinchHandlers) {
  return (
      <div style={{ display: 'flex', flexDirection: 'row'}}>
        <div id="right-panel">
          some stuffs in my div
        </div>
        <div>
          <TransformComponent
            wrapperStyle={{
              maxWidth: '100%',
            }}
          >
            <div style={{ display: 'flex', flexDirection: 'row'}}>
              <div id="hello">my pan and zoom content</div>
              <div id="hello2">some more content</div>
            </div>
        </TransformComponent>
      </div>
    </div>
  )
}

export default function AppGridsPageWrapper() {
  return (
    <TransformWrapper
      centerOnInit
      limitToBounds={false}
      centerZoomedOut={false}
      disablePadding={true}
    >
      {reactZoomPanPinchArgs => (
          <MyDemo {...reactZoomPanPinchArgs} />
      )}
    </TransformWrapper>
  )
}

3. I then call zoomToElement('hello2')

something like

  useEffect(() => {
      zoomToElement('hello2', 0.8)
  }, [])

notice the content of div with id hello2 is partially hidden. it appears that the div with id "right-panel" is not taken into the calculation formula

Expected behavior
I expect the div hello2 to be totally visible

Desktop (please complete the following information):

• OS: MacOs 12.5
• Browser Chrome
• Version 3.4.3

Additional context

It does work if I add a setTimeout in my useEffect or requestAnimationFrame

  useEffect(() => {
      requestAnimationFrame(() => {
        zoomToElement('hello2', 0.8)
      })
  }, [])

[fredericrous]

that might be an issue with remix or expected. closing. the workaround I documented is enough for me