@dotlottie-web takes too long time to render lotties

[Henry-Hong]

Overview

reproduction : https://codepen.io/henry-hong/pen/gbOxewr

Lottie files with heavy size take too much time to render and it blocks user interaction!

It is not a problem of loading lottie files.
I guess it is a problem of rendering engine.

As shown this PR,
"upgrade dotlottie-rs v0.1.31 wasm bindings" has something to do with this happenings.

@dotlottie-web is used for dotlottie-react, vue, etc,, which makes things worse.

I'm currently downgraded the version of this package to fix it, but it is not a fundamental solution.

...

Consuming repo

What repo were you working in when this issue occurred?

...

Labels

• Add the Type: Bug label to this issue.

[theashraf]

@Henry-Hong Thanks for the reproducible example!

The issue happens because the initial WebAssembly (WASM) loading takes a lot of scripting time and can block the main thread. A simple way to improve this is by using DotLottieWorker instead of DotLottie.

The good news? The API and behavior remain exactly the same, so you can just swap it in without any extra changes!

Here’s how you can do it:

import { DotLottieWorker as DotLottie } from "https://esm.sh/@lottiefiles/dotlottie-web";

Hope this helps! Let me know if you run into any issues.

Meanwhile, we’re looking into the root cause and will keep you updated.

[Henry-Hong]

@theashraf

Thank you for your such a fast response 👍

Converting DotLottie to DotLottieWorker fixed my issue, but I still have a few questions.

Using a worker thread seems to be the better choice in most cases, so when would it be more appropriate not to use a worker thread (DotLottieWorker)?

Even after solving the main thread blocking issue, the newer WASM-based version of Lottie takes significantly longer to render compared to the older version that doesn't use WASM.

[theashraf]

@Henry-Hong

Using a worker thread seems to be the better choice in most cases, so when would it be more appropriate not to use a worker thread (DotLottieWorker)?

Using DotLottieWorker improves performance, but sometimes it’s better to stick with DotLottie. The reasons are that DotLottieWorker slightly increases your bundle size, might not work in some browsers or environments (Node.js), and can make animation controls (like play or pause) respond a bit slower

Even after solving the main thread blocking issue, the newer WASM-based version of Lottie takes significantly longer to render compared to the older version that doesn't use WASM

The WASM file is currently loaded via CDN. It might be beneficial to self-host this file to potentially improve loading times.
For more details, see this relevant discussion: #198

Also noticed that the .lottie file is 5 MB in size, meaning loading times will vary depending on the user's network speed.

That said, I'll investigate the issue further

[rodrigoalcarazdelaosa]

Related: #514

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs.