lazyLoad directive async issue

[mightymatth]

I've encountered on serious issue when using lazyLoad directive in templates when using async pipe where given observable is made of promise. For example, this is component's template:

<img [lazyLoad]="pic | async">

And this is code from component's ngOnInit function:

ngOnInit() {
    let promise = new Promise<string>(resolve => {
      resolve("https://picsum.photos/id/237/300/300");
    });

    let promiseWithTimeout = (milis : number) => new Promise<string>(resolve =>
      setTimeout(() => resolve("https://picsum.photos/id/237/300/300"), milis)
    );

    // CASE 1 - This works!
    this.pic1 = from(['https://picsum.photos/id/237/300/300']);

    // CASE 2 - This doesn't work!
    this.pic2 = from(promise);

    // CASE 3 - This works!
    this.pic3 = from(promiseWithTimeout(1000));

    // CASE 4 - This sometimes works! (almost never in complex application)
    this.pic4 = from(promiseWithTimeout(1));

    // CASE 5 - This sometimes works! (almost never in complex application)
    this.pic5 = from(promise, asyncScheduler);
  }

From the results I get in my tests scenarios, there is some race condition where lazyLoad directive doesn't pickup changes if they occur too early.

Here is the demo: https://stackblitz.com/edit/angular-8-lazyload-image-intersection-observer-async-issue?embed=1&file=src/app/app.component.ts

In more complex application, cases 4 and 5 does not work at all, but here in demo they sometimes work. I cannot distinguish whether this is problem from ng-lazyload-image or RxJS itself.

[tjoskar]

Thanks for a detailed issue!

There is some race condition bug, where we unsubscribe to insection change to late (after we register the new image path but before we get an insection change event for the new image path).

A quick fix to this is to not do anything if we don't have an image path. I have created a beta release ng-lazyload-image@7.0.2-0. Can you try it out? I updated your stackblitz.

[mightymatth]

I really appreciate your fast response, fix and adding new examples.

I've tried it in stackblitz demo and my own project. I can confirm that [lazyLoad] works as intended in ng-lazyload-image@7.0.2-0. Thank you!

[tjoskar]

This is included in 7.1.0