QUESTION: Why is Intersection Observer and requestIdleCallback not used?

[dianmonblan]

Hello,

I think it can work like ngx-quicklink does using Intersection Observer and requestIdleCallback taking advantage of browser idle optimizing module download but now modeled to component download.

I recommend use Intersection Observer and requestIdleCallback with animationFrameScheduler for better performance on the browser.

Why is Intersection Observer and requestIdleCallback not used? Thanks for the reply and sorry for my poor english 😚

elements/projects/elements/src/lib/lazy-elements/lazy-element/lazy-element.directive.ts

Lines 105 to 149 in d9a4e49

	.pipe(
	// This is used to coalesce changes since the `url$` subject might emit multiple values initially, e.g.
	// `null` (initial value) and the url itself (when the `url` binding is provided).
	// The `animationFrameScheduler` is used to prevent the frame drop.
	debounceTime(0, animationFrameScheduler),
	switchMap((url) => {
	if (this.loadingTemplateRef) {
	this.vcr.createEmbeddedView(this.loadingTemplateRef);
	} else if (loadingComponent) {
	const factory = this.cfr.resolveComponentFactory(loadingComponent);
	this.vcr.createComponent(factory);
	}
	return from(
	this.elementsLoaderService.loadElement(
	url,
	elementTag,
	this.isModule,
	this.importMap,
	elementConfig?.hooks
	)
	).pipe(
	catchError(() => {
	this.vcr.clear();
	const errorComponent =
	elementConfig.errorComponent || options.errorComponent;
	if (this.errorTemplateRef) {
	this.vcr.createEmbeddedView(this.errorTemplateRef);
	this.cdr.markForCheck();
	} else if (errorComponent) {
	const factory =
	this.cfr.resolveComponentFactory(errorComponent);
	this.vcr.createComponent(factory);
	this.cdr.markForCheck();
	} else if (ngDevMode) {
	console.error(
	`${LOG_PREFIX} - Loading of element <${elementTag}> failed, please provide <ng-template #error>Loading failed...</ng-template> and reference it in *axLazyElement="errorTemplate: error" to display customized error message in place of element`
	);
	}
	return EMPTY;
	})
	);
	}),
	mergeMap(() => customElements.whenDefined(elementTag))
	)