Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | 3x 3x 3x 3x 5x 5x 3x 2x | import { ChangeDetectionStrategy, Component, ContentChild, Input, OnInit } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { IntersectionStatus } from 'ish-core/directives/intersection-observer-util';
import { LazyLoadingContentDirective } from 'ish-core/directives/lazy-loading-content.directive';
/**
* The Deferred Item Component
*
* Defers rendering of projected content until the element becomes visible in the viewport using IntersectionObserver.
* Once rendered, the content remains in the DOM even when scrolled out of view.
*
* @example
* <ish-deferred-item [cssClass]="'col-6'">
* <ng-template ishLazyLoadingContent>
* <!-- content to be lazily loaded -->
* </ng-template>
* </ish-deferred-item>
*/
@Component({
selector: 'ish-deferred-item',
templateUrl: './deferred-item.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DeferredItemComponent implements OnInit {
@ContentChild(LazyLoadingContentDirective) lazyContent: LazyLoadingContentDirective;
@Input() cssClass: string;
visible$ = new BehaviorSubject<boolean>(false);
ngOnInit() {
// In Cypress, skip lazy loading to avoid intersection observer timing issues with Swiper
Iif (!SSR && typeof window !== 'undefined' && (window as { Cypress?: unknown }).Cypress) {
this.visible$.next(true);
}
}
onVisibilityChange(event: IntersectionStatus) {
if (event === 'Visible') {
this.visible$.next(true);
}
}
}
|