LottieFiles / lottie-player

Lottie viewer/player as an easy to use web component! https://lottiefiles.com/web-player
MIT License
1.56k stars 180 forks source link

json file loaded twice #137

Closed walty8 closed 2 years ago

walty8 commented 2 years ago

We got a quite big json file (~1.9MB), so it's kind of frustrating if the json file is loaded twice.

I saw the previous issue https://github.com/LottieFiles/lottie-player/issues/113 but I don't think it's the case of validation.

by tracking down the stack trace of resource loading in FF console, I believe both are triggered inside the engine.

in particular I believe,

one is called when doing lottie.loadAnimation

https://github.com/LottieFiles/lottie-player/blob/5dd88688df6df496c3bd2370d47c57da07976b54/src/lottie-player.ts#L261

and the other one is called when doing await fromURL

https://github.com/LottieFiles/lottie-player/blob/5dd88688df6df496c3bd2370d47c57da07976b54/src/lottie-player.ts#L272

I tried to comment out the second load, and the animation still work fine.

but I am not familiar with the code, so may be loadAnimation is called for the validation purpose?

karamalie commented 2 years ago

Hi @walty8 . The first call is where we validate the file and push out events for error handling. as per

// Fetch resource if src is a remote URL
      if (srcAttrib === "path") {
        jsonData = await fromURL(srcParsed as string);
        srcAttrib = "animationData";
      } else {
        jsonData = srcParsed;
      }

      if (!isLottie(jsonData)) {
        this.currentState = PlayerState.Error;
        this.dispatchEvent(new CustomEvent(PlayerEvents.Error));
      }

load animation is the method from lottie-web library which we call that renders the animation. This call is made inside of that dependency (our library is a wrapper with some performance tweaks with build process changes) and thus the double calls.

karamalie commented 2 years ago

You could try to use the dotlottie file format to reduce the size of the json file down and that would bring up a speed bump