Performance boost [WIP]

projects/ngx-scrolltop/src/lib/ngx-scrolltop.component.ts

@@ -2,11 +2,14 @@ import { NgClass } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
-  HostListener,
+  DestroyRef,
   inject,
   input,
   signal,
 } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { fromEvent } from 'rxjs';
+import { debounceTime, distinctUntilChanged, map } from 'rxjs/operators';
 import { NgxScrollTopCoreService } from './ngx-scrolltop.core.service';
 import {
   NgxScrollTopMode,
@@ -24,28 +27,38 @@ import {
   standalone: true,
 })
 export class NgxScrollTopComponent {
-  public backgroundColor = input<string>();
-  public symbolColor = input<string>();
-  public size = input<number>();
-  public position = input<NgxScrollTopPosition>('right');
-  public theme = input<NgxScrollTopTheme>('gray');
-  public mode = input<NgxScrollTopMode>('classic');
-
-  public show = signal(false);
+  public readonly backgroundColor = input<string>();
+  public readonly symbolColor = input<string>();
+  public readonly size = input<number>();
+  public readonly position = input<NgxScrollTopPosition>('right');
+  public readonly theme = input<NgxScrollTopTheme>('gray');
+  public readonly mode = input<NgxScrollTopMode>('classic');
 
+  private readonly destroyRef = inject(DestroyRef);
   private readonly core = inject(NgxScrollTopCoreService);
 
-  @HostListener('window:scroll')
-  public onWindowScroll(): void {
-    const show = this.core.onWindowScroll(this.mode());
+  public readonly show = signal(false);
 
-    // Performance boost. Only update the state if it has changed.
-    if (this.show() !== show) {
-      this.show.set(show);
-    }
+  constructor() {
+    fromEvent(window, 'scroll', { passive: true })
+      .pipe(
+        debounceTime(50),
+        map(() => typeof window !== 'undefined' && window.scrollY),
+        distinctUntilChanged(),
+        takeUntilDestroyed(this.destroyRef),
+      )
+      .subscribe((pos) => {
+        requestAnimationFrame(() => {
+          const show = this.core.onWindowScroll(this.mode());
+          // Performance boost. Only update the state if it has changed.
+          if (this.show() !== show) {
+            this.show.set(show);
+          }
+        });
+      });
   }
 
   public scrollToTop(): void {
-    this.core.scrollToTop();
+    requestAnimationFrame(() => this.core.scrollToTop());
   }
 }

projects/ngx-scrolltop/src/lib/ngx-scrolltop.directive.ts

@@ -1,4 +1,14 @@
-import { Directive, ElementRef, HostListener, inject, input, signal } from '@angular/core';
+import {
+  DestroyRef,
+  Directive,
+  ElementRef,
+  HostListener,
+  inject,
+  input,
+  signal,
+} from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { debounceTime, distinctUntilChanged, fromEvent, map } from 'rxjs';
 import { NgxScrollTopCoreService } from './ngx-scrolltop.core.service';
 import { NgxScrollTopMode } from './ngx-scrolltop.interface';
 
@@ -12,22 +22,31 @@ export class NgxScrollTopDirective {
 
   private show = signal(false);
 
+  private readonly destroyRef = inject(DestroyRef);
+
   private el = inject(ElementRef);
   private core = inject(NgxScrollTopCoreService);
 
   constructor() {
     this.hideElement();
-  }
-
-  @HostListener('window:scroll')
-  public onWindowScroll(): void {
-    const show = this.core.onWindowScroll(this.mode());
 
-    // Performance boost. Only update the DOM when the state changes.
-    if (this.show() !== show) {
-      show ? this.showElement() : this.hideElement();
-      this.show.set(show);
-    }
+    fromEvent(window, 'scroll', { passive: true })
+      .pipe(
+        debounceTime(50),
+        map(() => typeof window !== 'undefined' && window.scrollY),
+        distinctUntilChanged(),
+        takeUntilDestroyed(this.destroyRef),
+      )
+      .subscribe((pos) => {
+        requestAnimationFrame(() => {
+          const show = this.core.onWindowScroll(this.mode());
+          // Performance boost. Only update the state if it has changed.
+          if (this.show() !== show) {
+            show ? this.showElement() : this.hideElement();
+            this.show.set(show);
+          }
+        });
+      });
   }
 
   @HostListener('click')