<lottie-player> tag disappears after playing for a tiny while since v1.4.0

[kathmann-21]

Our cshtml has:

<div id="search-loader-outer">
     <lottie-player id="search-loader" 
              src='{"v":"5.5.5","fr":25,"ip":0,"op":79,"w":300,"h":150,"nm":"Loading-2",...}' 
              loop 
              autoplay
              intermission=0
              mode="normal" 
              background="transparent">
    </lottie-player>
</div>

The JS has:

const player = document.querySelector("lottie-player");
if (player !== null) {
  player.addEventListener("ready", () => {
      console.log("it's ready");
      player.play();
  });
}

Up until 1.4.0 the animation will play and continue to play in the background when the div search-loader-outer has been hidden. When we use v1.4.0 to v2.0.2 the animation will play for varying amounts of short time and then the disappears. I don't know what is causing it to be removed. All my debugging efforts (including adding break points on the elements for subtree modifications, attribute modifications and node removal) didn't reveal anything useful.

Please help.

[samuelOsborne]

hi @kathmann-21 If you're hiding "search-loader-outer" wouldn't it be normal that the player nested under it gets hidden too? If you could share a working example that'd be great in understanding whats going on. Cheers.

[kathmann-21]

hi @samuelOsborne. With v1.3.1, when the search-loader-outer is hidden we can still see the <lottie-player> element changing within that hidden element. However, with subsequent versions the entire <lottie-player> has disappeared after a varying amount of time. I've been trying to make an anonymous working example of it not working and am failing at failing. This is making me think that somewhere in the behemoth javascript of this site there is a conflict of some sort that is taking it out.