react player does not render first frame until window is resized

[damnitrahul]

Overview

I'm seeing a weird behavior while using@lottiefiles/dotlottie-react. I have an animation that will be triggered when in viewport and until it's played it should just show the first frame.

But, it doesn't show up in the first frame after dotLottie file has been loaded and stays empty. It only renders the first frame if I resize the window.

You can find the component code at https://github.com/LottieFiles/dotlottie-web/issues/286#issuecomment-2212408970 Here's a loom video for the behaviour ...

Consuming repo

What repo were you working in when this issue occurred? @lottiefiles/dotlottie-react

[theashraf]

@damnitrahul which dotlottie-react version you're using?

[damnitrahul]

"@lottiefiles/dotlottie-react": "0.7.2" @theashraf

[damnitrahul]

Tried with the latest "@lottiefiles/dotlottie-react": "0.8.1" - same results.

One key thing to note is that it only happens when the player is off-screen when the page is loaded/refreshed. If I keep the player in viewport and try refreshing, it works as expected and shows the first frame. @theashraf

[damnitrahul]

This could be related to https://github.com/LottieFiles/dotlottie-web/issues/273 ?

[damnitrahul]

Canvas is only rendered visible area in the viewport. Any workaround for this?

[theashraf]

Hi @damnitrahul, will address this issue in the next release by tomorrow

[theashraf]

@damnitrahul can you check out if dotlottie-react v0.8.3 fixes your issue

[damnitrahul]

@theashraf Yes! Thank you for addressing the issue. 🙏🏼