feat(officers): optimized the officer images that are loaded

Author: jbriones1

src/app/pages/officers/officers.component.html

@@ -16,10 +16,18 @@ <h1>Officers</h1>
   <section>
     <h2>Our Executives</h2>
     <div class="gallery">
-      @for (exec of currentAdministration()?.members; track $index) {
-        <div class="card">
+      @for (exec of currentAdministration()?.members; track exec.photoName; let i = $index) {
+        <div class="card" [style.visibility]="areImagesLoaded() ? 'visible' : 'hidden'">
           <div class="card__frame">
-            <img class="card__img" [src]="exec.photoName" [alt]="exec.photoName" />
+            <img
+              class="card__img"
+              [ngSrc]="exec.photoName"
+              width="300"
+              height="400"
+              [alt]="exec.photoName"
+              [priority]="i < PRIORITY"
+              (load)="onLoad(i)"
+            />
             <div class="card__info">
               <div class="card__name">
                 <strong class="card__text">{{ exec.name }}</strong>

src/app/pages/officers/officers.component.scss

@@ -12,12 +12,12 @@
   justify-content: center;
 
   &__frame {
-    width: max(300px, 100%);
+    width: max(18.75rem, 100%);
     position: relative;
   }
 
   &__img {
-    width: 300px;
+    width: 18.75rem;
     aspect-ratio: 3 / 4;
     box-shadow: 10px 10px 5px black;
   }

src/app/pages/officers/officers.component.ts

@@ -1,3 +1,4 @@
+import { NgOptimizedImage } from '@angular/common';
 import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';
 import { CodeArticleComponent } from '@csss-code/article/article.component';
 import { ExternalLinkComponent } from 'components/url/external-link/external-link.component';
@@ -6,12 +7,13 @@ import { ExecutiveAdministration, executives } from './officers.data';
 
 @Component({
   selector: 'cs-officers',
-  imports: [CodeArticleComponent, RouteLinkComponent, ExternalLinkComponent],
+  imports: [CodeArticleComponent, RouteLinkComponent, ExternalLinkComponent, NgOptimizedImage],
   templateUrl: './officers.component.html',
   styleUrl: './officers.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class OfficersComponent {
+  protected PRIORITY = 10;
   /**
    * The year currently selected.
    */
@@ -46,4 +48,16 @@ export class OfficersComponent {
    * Will probably need some way to remove older cached entries if memory becomes an issue.
    */
   private cachedAdmins = new Map<number, ExecutiveAdministration>();
+
+  private loadedImages = signal(new Set<number>());
+
+  areImagesLoaded = computed(
+    () =>
+      this.loadedImages().size >= (this.currentAdministration()?.members ?? []).length ||
+      this.loadedImages().size >= this.PRIORITY
+  );
+
+  onLoad(id: number): void {
+    this.loadedImages.update(ids => new Set([...ids, id]));
+  }
 }