changes and optimisations

src/app/pages/home/home.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, signal, computed, ChangeDetectionStrategy } from '@angular/core';
+import { Component, OnInit, OnDestroy, signal, computed, ChangeDetectionStrategy } from '@angular/core';
 import { Router, RouterLink } from '@angular/router';
 import { ApiService, LanguageService } from '../../services';
 import { Category } from '../../models';
@@ -14,7 +14,7 @@ import { TranslatePipe } from '../../i18n/translate.pipe';
   styleUrls: ['./home.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class HomeComponent implements OnInit {
+export class HomeComponent implements OnInit, OnDestroy {
   brandName = environment.brandFullName;
   isnovo = environment.theme === 'novo';
   categories = signal<Category[]>([]);
@@ -56,6 +56,14 @@ export class HomeComponent implements OnInit {
     this.loadCategories();
   }
 
+  ngOnDestroy(): void {
+    this.pendingImages.forEach(img => {
+      img.onload = null;
+      img.onerror = null;
+    });
+    this.pendingImages.clear();
+  }
+
   loadCategories(): void {
     this.loading.set(true);
     this.apiService.getCategories().subscribe({
@@ -84,13 +92,17 @@ export class HomeComponent implements OnInit {
     return this.wideCategories().has(categoryID);
   }
 
+  private pendingImages = new Set<HTMLImageElement>();
+
   private detectWideImages(categories: Category[]): void {
     const topLevel = categories.filter(c => c.parentID === 0);
     topLevel.forEach(cat => {
       if (!cat.wideBanner) return;
 
       const img = new Image();
+      this.pendingImages.add(img);
       img.onload = () => {
+        this.pendingImages.delete(img);
         const ratio = img.naturalWidth / img.naturalHeight;
         if (ratio > 2) {
           this.wideCategories.update(set => {
@@ -100,6 +112,7 @@ export class HomeComponent implements OnInit {
           });
         }
       };
+      img.onerror = () => this.pendingImages.delete(img);
       img.src = cat.wideBanner;
     });
   }