Items rendering either after window resize or by pressing f12

[Himanshupal0001]

Describe the bug
A clear and concise description of what the bug is.

To Reproduce

Please provide one or both of the following:

Code (If you have a branch somewhere that shows your issue) or link to codesandbox example. Here's a base template for this library:

OR

Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Library Version
Please provide version of library in which this bug is occurring.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

[Himanshupal0001]

Here's before and after pictures

Before

After

[jonandernovella]

I can reproduce this by passing a React state variable to the groups. However, if I pass a normal array then it works as expected.

[clemencestr]

I have the same problem on Mozilla, but it does not appear on Google Chrome or Safari.

[Himanshupal0001]

I have the same problem on Mozilla, but it does not appear on Google Chrome or Safari.

I tried in all the browsers and the issue still persist.

[Himanshupal0001]

I can reproduce this by passing a React state variable to the groups. However, if I pass a normal array then it works as expected.

Yeah, If A normal array is passed it works fine {if the value provided already rather fetched from the backend}. Do you have any idea how to resolve this? I tried normal arrays rather than states but the issue still persists.

[baatten]

what does a normal array mean? I have this bug even with demo example. anyone know how to resolve it?

[fsuk]

After spending an afternoon with this issue I have found that the issue occurrs when groups/items is undefined such as you might get if using useState before it is set.

To fix this I changed my code to check if groups and items are set before rendering:

 {groups && items &&     
        <Timeline
          groups={groups}
          items={items}
          ...
        />
      }

More detail:
This seems to be a bug in the ScrollElement with the scrollComponent.scrollLeft being 0 initially until after the Timeline is resized.