Apply Copilot feedback

Author: CodyTolene

README.md

@@ -152,17 +152,17 @@ Customization with optional inputs and icon
 
 ## 📚 Component API <a name="api"></a>
 
-| Input                  | Value Typing      | Default Value    | Description                                                                                                                                        |
-| ---------------------- | ----------------- | ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **backgroundColor**    | string            | `#0D58C0`        | Background color of the back to top button. Define any `'x'` css property available for `'background-color: x'`.                                   |
-| **bottomOffset**       | string \| number  | `0px`            | Offset `px` from bottom of page when scrolled to bottom. For example this can be used to make sure the back to top button never overlaps a footer. |
-| **displayAtYPosition** | string \| number  | `420px`          | The back to top button will not be displayed until the user scrolls to the provided Y (vertical `px`) coordinate on the page.                      |
-| **fontColor**          | string            | `#FFFFFF`        | The font color for the nested content within the back to top button. Define any `'x'` css property available for `'color: x'`.                     |
-| **fontSize**           | string            | `16px`           | The font size for the nested content within the back to top button. Define any `'x'` css property available for `'font-size: x'`.                  |
-| **height**             | string            | `32px` \| `1rem` | Height of back to top button in string format.                                                                                                     |
-| **position**           | `left` \| `right` | `right`          | Position on-screen where the back to top button is displayed.                                                                                      |
-| **width**              | string            | `32px` \| `1rem` | Width of back to top button in string format.                                                                                                      |
-| **zIndex**             | number            | `999`            | Style the `z-index` for the back to top button as needed for correct layer height adjustment. This can be useful when working with sticky headers. |
+| Input                  | Value Typing     | Default Value | Description                                                                                                                                      |
+| ---------------------- | ---------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| **backgroundColor**    | string           | #0D58C0       | Background color of the back to top button. Define any 'x' css property available for 'background-color: x'.                                     |
+| **bottomOffset**       | string \| number | 0px           | Offset px from bottom of page when scrolled to bottom. For example this can be used to make sure the back to top button never overlaps a footer. |
+| **displayAtYPosition** | string \| number | 420px         | The back to top button will not be displayed until the user scrolls to the provided Y (vertical px) coordinate on the page.                      |
+| **fontColor**          | string           | #FFFFFF       | The font color for the nested content within the back to top button. Define any 'x' css property available for 'color: x'.                       |
+| **fontSize**           | string           | 16px          | The font size for the nested content within the back to top button. Define any 'x' css property available for 'font-size: x'.                    |
+| **height**             | string           | 32px \| 1rem  | Height of back to top button in string format.                                                                                                   |
+| **position**           | left \| right    | right         | Position on-screen where the back to top button is displayed.                                                                                    |
+| **width**              | string           | 32px \| 1rem  | Width of back to top button in string format.                                                                                                    |
+| **zIndex**             | number           | 999           | Style the z-index for the back to top button as needed for correct layer height adjustment. This can be useful when working with sticky headers. |
 
 <p align="right">[ <a href="#index">🔍 Index</a> ]</p>
 

src/app/public/ngx-scroll-top.component.html

@@ -3,7 +3,7 @@
     (click)="scrollTop()"
     [class.fade-in]="fadeState() === 'fading-in'"
     [class.fade-out]="fadeState() === 'fading-out'"
-    [class.idle]="fadeState() === 'idle'"
+    [class.not-rendered]="isButtonNotRendered()"
     [style.background-color]="backgroundColor()"
     aria-label="Scroll to top"
   >

src/app/public/ngx-scroll-top.component.scss

@@ -62,6 +62,6 @@ svg.default-content {
   top: 0;
 }
 
-button.idle {
+button.not-rendered {
   opacity: 0;
 }

src/app/public/ngx-scroll-top.component.ts

@@ -40,6 +40,8 @@ const animationMs = 200;
       }
     `,
   ],
+  imports: [],
+  standalone: true,
 })
 export class NgxScrollTopComponent implements OnInit, OnDestroy {
   /**
@@ -159,6 +161,10 @@ export class NgxScrollTopComponent implements OnInit, OnDestroy {
   /** Timeout reference for fade completion. */
   private fadeTimeout?: ReturnType<typeof setTimeout>;
 
+  protected isButtonNotRendered = signal(true);
+
+  private isDestroyed = false;
+
   private animationFrameId?: number;
 
   @HostBinding('style.bottom') protected styleBottom = this.defaultPadding;
@@ -189,11 +195,14 @@ export class NgxScrollTopComponent implements OnInit, OnDestroy {
   }
 
   public ngOnDestroy(): void {
+    this.isDestroyed = true;
     if (this.fadeTimeout) {
       clearTimeout(this.fadeTimeout);
+      this.fadeTimeout = undefined;
     }
     if (this.animationFrameId) {
       cancelAnimationFrame(this.animationFrameId);
+      this.animationFrameId = undefined;
     }
   }
 
@@ -253,25 +262,37 @@ export class NgxScrollTopComponent implements OnInit, OnDestroy {
 
     // Fade in
     if (!this.shouldRenderButton() && scrollY > displayAtYPosition) {
+      // Cancel any pending fade-out
+      if (this.fadeTimeout) {
+        clearTimeout(this.fadeTimeout);
+        this.fadeTimeout = undefined;
+      }
+      this.fadeState.set('idle'); // Reset fade state
       this.shouldRenderButton.set(true);
-      this.fadeState.set('idle');
-      if (this.fadeTimeout) clearTimeout(this.fadeTimeout);
+      this.isButtonNotRendered.set(true);
 
-      // Cancel previous frame if exists
+      // Cancel previous animation frame if exists
       if (this.animationFrameId) {
         cancelAnimationFrame(this.animationFrameId);
       }
 
-      // Schedule fade-in with animation frame
-      this.animationFrameId = requestAnimationFrame(() => {
+      // Schedule and track new animation frame
+      const animationFrameId = requestAnimationFrame(() => {
+        if (this.isDestroyed) return;
         this.fadeState.set('fading-in');
+        this.isButtonNotRendered.set(false);
+        this.animationFrameId = undefined;
       });
+
+      this.animationFrameId = animationFrameId;
     }
+
     // Fade out
     else if (this.shouldRenderButton() && scrollY <= displayAtYPosition) {
       this.fadeState.set('fading-out');
       if (this.fadeTimeout) clearTimeout(this.fadeTimeout);
       this.fadeTimeout = setTimeout(() => {
+        if (this.isDestroyed) return;
         this.shouldRenderButton.set(false);
         this.fadeState.set('idle');
       }, this.fadeDuration);