swIsLoading pipe flicker

swIsLoading | async pipe causes ui flicker due to debounce 10ms.

@Pipe({
  name: "swIsLoading",
})
export class IsLoadingPipe implements PipeTransform {
  constructor(private isLoadingService: IsLoadingService) {}

  transform(key: Key): Observable<boolean> {
    return this.isLoadingService
      .isLoading$({ key })
      .pipe(debounceTime(10), distinctUntilChanged());
  }
}

If I remove the debounceTime(10), the ui does not flicker as it does not wait the extra time before returning true. If I use debounceTime(0) the flicker still occurs. What is the purpose of the debounce here?

  • Angular v13;
  • @service-work/is-loading: 6.0.0

Code example:

<ng-container
      *ngIf="{
        code: data | getData | async,
        loading: special | swIsLoading | async
      } as obs"
    >
      <app-loader *ngIf="obs.loading; else loaded"></app-loader>
      <ng-template #loaded>
        <ng-container *ngIf="obs.code">
          <span>{{ obs.code?.description }}</span>
        </ng-container>
        <span *ngIf="!obs.code" class="error-highlight">Not found</span>
      </ng-template>
</ng-container>

The above loads data with the loading key 'special' and I would expect the loader to be displayed immediately. The loader is delayed for the minor debounce time and flickers the 'Not found' display. The data result to 'code' can result with falsey data or an actual value, so this *ngIf style is required.

Edited by Michael Marcuccio