feat: introduce ishBrowserLazyView directive (#1654)

src/app/core/directives.module.ts

@@ -1,5 +1,6 @@
 import { NgModule } from '@angular/core';
 
+import { BrowserLazyViewDirective } from './directives/browser-lazy-view.directive';
 import { ClickOutsideDirective } from './directives/click-outside.directive';
 import { IdentityProviderCapabilityDirective } from './directives/identity-provider-capability.directive';
 import { IntersectionObserverDirective } from './directives/intersection-observer.directive';
@@ -11,6 +12,7 @@ import { ServerHtmlDirective } from './directives/server-html.directive';
 
 @NgModule({
   declarations: [
+    BrowserLazyViewDirective,
     ClickOutsideDirective,
     IdentityProviderCapabilityDirective,
     IntersectionObserverDirective,
@@ -21,6 +23,7 @@ import { ServerHtmlDirective } from './directives/server-html.directive';
     ServerHtmlDirective,
   ],
   exports: [
+    BrowserLazyViewDirective,
     ClickOutsideDirective,
     IdentityProviderCapabilityDirective,
     IntersectionObserverDirective,

src/app/core/directives/browser-lazy-view.directive.ts

@@ -0,0 +1,59 @@
+import {
+  DestroyRef,
+  Directive,
+  ElementRef,
+  EmbeddedViewRef,
+  Host,
+  OnInit,
+  TemplateRef,
+  ViewContainerRef,
+  inject,
+} from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { Subject, takeUntil } from 'rxjs';
+
+import { fromIntersectionObserver } from './intersection-observer-util';
+
+function findElement(element: { parentElement: HTMLElement } | HTMLElement): HTMLElement {
+  if (element instanceof HTMLElement) {
+    return element;
+  }
+  if (element.parentElement) {
+    return findElement(element.parentElement);
+  }
+}
+
+@Directive({
+  selector: '[ishBrowserLazyView]',
+})
+export class BrowserLazyViewDirective implements OnInit {
+  private view: EmbeddedViewRef<unknown>;
+
+  private destroyRef = inject(DestroyRef);
+  private viewCreated$ = new Subject<void>();
+
+  constructor(
+    private viewContainer: ViewContainerRef,
+    private template: TemplateRef<unknown>,
+    @Host() private element: ElementRef
+  ) {}
+
+  ngOnInit() {
+    if (!SSR) {
+      const element = findElement(this.element.nativeElement);
+      if (!element) {
+        console.warn('No element found for BrowserLazyViewDirective');
+        return;
+      }
+      fromIntersectionObserver(element)
+        .pipe(takeUntil(this.viewCreated$), takeUntilDestroyed(this.destroyRef))
+        .subscribe(status => {
+          if (status === 'Visible' && !this.view) {
+            this.view = this.viewContainer.createEmbeddedView(this.template);
+            this.view.markForCheck();
+            this.viewCreated$.next();
+          }
+        });
+    }
+  }
+}

src/app/core/directives/intersection-observer-util.ts

@@ -0,0 +1,58 @@
+import { Observable, Subject, debounceTime, filter } from 'rxjs';
+
+export type IntersectionStatus = 'Visible' | 'Pending' | 'NotVisible';
+
+export const fromIntersectionObserver = (
+  element: HTMLElement,
+  config: IntersectionObserverInit = {
+    root: undefined,
+    rootMargin: '0px',
+    threshold: undefined,
+  },
+  debounce = 0
+) =>
+  new Observable<IntersectionStatus>(subscriber => {
+    const subject$ = new Subject<{
+      entry: IntersectionObserverEntry;
+      observer: IntersectionObserver;
+    }>();
+
+    const intersectionObserver = new IntersectionObserver((entries, observer) => {
+      entries.forEach(entry => subject$.next({ entry, observer }));
+    }, config);
+
+    subject$.subscribe(() => {
+      subscriber.next('Pending');
+    });
+
+    subject$.pipe(debounceTime(debounce), filter(Boolean)).subscribe(async ({ entry }) => {
+      const isEntryVisible = await isVisible(entry.target as HTMLElement);
+
+      if (isEntryVisible) {
+        subscriber.next('Visible');
+      } else {
+        subscriber.next('NotVisible');
+      }
+    });
+
+    intersectionObserver.observe(element);
+
+    return {
+      unsubscribe() {
+        intersectionObserver.disconnect();
+        // eslint-disable-next-line ban/ban, rxjs/no-subject-unsubscribe
+        subject$.unsubscribe();
+      },
+    };
+  });
+
+async function isVisible(element: HTMLElement) {
+  return new Promise(resolve => {
+    const observer = new IntersectionObserver(([entry]) => {
+      resolve(entry.isIntersecting);
+      observer.disconnect();
+    });
+
+    observer.observe(element);
+  });
+}

src/app/core/directives/intersection-observer.directive.ts

@@ -1,7 +1,7 @@
 import { DestroyRef, Directive, ElementRef, EventEmitter, Input, OnInit, Output, inject } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { Observable, Subject } from 'rxjs';
-import { debounceTime, filter } from 'rxjs/operators';
+
+import { IntersectionStatus, fromIntersectionObserver } from './intersection-observer-util';
 
 /**
  * detect visibility status of components via IntersectionObserver
@@ -40,52 +40,3 @@ export class IntersectionObserverDirective implements OnInit {
     }
   }
 }
-
-export type IntersectionStatus = 'Visible' | 'Pending' | 'NotVisible';
-
-const fromIntersectionObserver = (element: HTMLElement, config: IntersectionObserverInit, debounce = 0) =>
-  new Observable<IntersectionStatus>(subscriber => {
-    const subject$ = new Subject<{
-      entry: IntersectionObserverEntry;
-      observer: IntersectionObserver;
-    }>();
-
-    const intersectionObserver = new IntersectionObserver((entries, observer) => {
-      entries.forEach(entry => subject$.next({ entry, observer }));
-    }, config);
-
-    subject$.subscribe(() => {
-      subscriber.next('Pending');
-    });
-
-    subject$.pipe(debounceTime(debounce), filter(Boolean)).subscribe(async ({ entry }) => {
-      const isEntryVisible = await isVisible(entry.target as HTMLElement);
-
-      if (isEntryVisible) {
-        subscriber.next('Visible');
-      } else {
-        subscriber.next('NotVisible');
-      }
-    });
-
-    intersectionObserver.observe(element);
-
-    return {
-      unsubscribe() {
-        intersectionObserver.disconnect();
-        // eslint-disable-next-line ban/ban, rxjs/no-subject-unsubscribe
-        subject$.unsubscribe();
-      },
-    };
-  });
-
-async function isVisible(element: HTMLElement) {
-  return new Promise(resolve => {
-    const observer = new IntersectionObserver(([entry]) => {
-      resolve(entry.isIntersecting);
-      observer.disconnect();
-    });
-
-    observer.observe(element);
-  });
-}

src/app/extensions/tacton/pages/configure/tacton-group/tacton-group.component.ts

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { Observable } from 'rxjs';
 
-import { IntersectionStatus } from 'ish-core/directives/intersection-observer.directive';
+import { IntersectionStatus } from 'ish-core/directives/intersection-observer-util';
 
 import { TactonFacade } from '../../../facades/tacton.facade';
 import { TactonProductConfigurationHelper } from '../../../models/tacton-product-configuration/tacton-product-configuration.helper';