Memory Leak issue lottie-player

[Xsanjeev-singhX]

Hi, everyone,

I was recently working on the integration of the lottie-player in my code, and it seems there is a memory issue in the lottie-player component. Here are my findings:

It appears to be a bug in the lottie-player code. The retainer is, in fact, the visibilitychange listener placed on the document. You are registering an anonymous function in their firstUpdated() method like this:

firstUpdated() {
    "IntersectionObserver" in window && (this._io = new IntersectionObserver((t=>{
        t[0].isIntersecting ? this.currentState === PlayerState.Frozen && this.play() : this.currentState === PlayerState.Playing && this.freeze()
    }
    )),
    this._io.observe(this.container)),
    void 0 !== document.hidden && document.addEventListener("visibilitychange", (()=>this._onVisibilityChange())),
    this.src && this.load(this.src),
    this.dispatchEvent(new CustomEvent(PlayerEvents.Rendered))
}

And unregistering it in disconnectedCallback() like this:

disconnectedCallback() {
    this.isConnected || (this._io && (this._io.disconnect(),
    this._io = void 0),
    document.removeEventListener("visibilitychange", (()=>this._onVisibilityChange())),
    this.destroy())
}

The issue here is that the arrow function used in the addEventListener() call is not the same one used in the removeEventListener() call. Consequently, the latter ends up doing nothing.

Please let me know if there is any way I can fix this issue or I can raise a PR in lottie-palyer codebase.

[Xsanjeev-singhX]

looks like @billerr have already raised a PR for this issue. but I am not sure why but that PR is open since Jul/04/2023 and no one is merging that PR. https://github.com/LottieFiles/lottie-player/pull/219

[Xsanjeev-singhX]

Correct Code will look like.

firstUpdated() {
    "IntersectionObserver" in window && (this._io = new IntersectionObserver((t=>{
        t[0].isIntersecting ? this.currentState === PlayerState.Frozen && this.play() : this.currentState === PlayerState.Playing && this.freeze()
    }
    )),
    this._io.observe(this.container)),
    void 0 !== document.hidden && document.addEventListener("visibilitychange", this._onVisibilityChange,
    this.src && this.load(this.src),
    this.dispatchEvent(new CustomEvent(PlayerEvents.Rendered))
}

disconnectedCallback() {
    this.isConnected || (this._io && (this._io.disconnect(),
    this._io = void 0),
    document.removeEventListener("visibilitychange", this._onVisibilityChange),
    this.destroy())
}

we have to remove arrow funtion here.

[samuelOsborne]

Thanks @Xsanjeev-singhX Ive merged @billerr 's PR