- Add evolution method in

src/app/core/models/pokemon.model.ts

@@ -13,6 +13,7 @@ export interface Pokemon {
   IsDefault?: boolean;
   IsCaught?: boolean;
   IsGenderRelevant?: boolean;
+  EvolutionMethod?: string;
 }
   
   export interface PokemonEncounter {

src/app/core/services/pokemon.service.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
-import { catchError, concatMap, map, Observable, pipe, shareReplay, tap } from 'rxjs';
+import { catchError, concatMap, map, Observable, of, pipe, shareReplay, tap } from 'rxjs';
 import { Pokemon, PokemonEncounter } from '../models/pokemon.model';
 import { environment } from '../../../environments/environment.development';
 import { comparePfics } from '../utils/pfic-utils';
@@ -110,7 +110,8 @@ export class PokemonService {
         Image: "",
         IsDefault: row.data.is_default || false,
         IsGenderRelevant: row.data.gender_relevant,
-        IsCaught: this.caughtPokemon.has(row.pfic)
+        IsCaught: this.caughtPokemon.has(row.pfic),
+        EvolutionMethod: row.data.evolution_method || ""
       } as Pokemon;
       pkmn.MarkIcon = this.getMarkImgName(pkmn.MarkName)
       pkmn.Image = this.getPokemonImageUrl(pkmn)
@@ -193,7 +194,8 @@ export class PokemonService {
           Image: "",
           IsDefault: data.data.is_default || false,
           IsGenderRelevant: data.data.gender_relevant,
-          IsCaught: this.caughtPokemon.has(data.pfic)
+          IsCaught: this.caughtPokemon.has(data.pfic),
+          EvolutionMethod: data.data.evolution_method || ""
         } as Pokemon;
         pkmn.MarkIcon = this.getMarkImgName(pkmn.MarkName)
         pkmn.Image = this.getPokemonImageUrl(pkmn)

src/app/shared/directives/lazy-component.directive.ts

@@ -0,0 +1,38 @@
+import { Directive, ElementRef, EventEmitter, Output, AfterViewInit, OnDestroy, NgZone } from '@angular/core';
+
+@Directive({
+  selector: '[appLazyLoad]',
+  standalone: true
+})
+export class LazyLoadDirective implements AfterViewInit, OnDestroy {
+  @Output() lazyLoad = new EventEmitter<void>();
+
+  private observer!: IntersectionObserver;
+
+  constructor(private element: ElementRef, private ngZone: NgZone) {}
+
+  ngAfterViewInit(): void {
+    // Run the intersection observer outside Angular's zone
+    this.ngZone.runOutsideAngular(() => {
+      this.observer = new IntersectionObserver(entries => {
+        entries.forEach(entry => {
+          if (entry.isIntersecting) {
+            // Re-enter Angular's zone to trigger the lazy load event
+            this.ngZone.run(() => {
+              this.lazyLoad.emit();
+              this.observer.disconnect(); // Disconnect after loading
+            });
+          }
+        });
+      });
+
+      this.observer.observe(this.element.nativeElement);
+    });
+  }
+
+  ngOnDestroy(): void {
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+  }
+}