feat(core): add loading state for my pokemon page

Author: Ismaestro

src/app/features/authentication/types/user.type.ts

@@ -8,5 +8,5 @@ export type User = {
   name: string;
   language: Language;
   favouritePokemonId: number;
-  caughtPokemonIds?: number[];
+  caughtPokemonIds: number[];
 };

src/app/features/my-pokemon/my-pokemon.component.html

@@ -5,14 +5,19 @@ <h1 class="first-heading__title" i18n>My Pokemon</h1>
       [title]="userPokemon?.length ? translations.findMore : translations.findPokemon"
     />
   </div>
-  <ul i18n class="my-pokemon__grid">
-    @for (pokemon of userPokemon; track pokemon.id) {
+  @if (userPokemon === undefined) {
+    <ul class="my-pokemon__grid fade-out">
       <li>
-        <app-pokemon-card [pokemon]="pokemon" />
+        <app-pokemon-card [loading]="true" />
       </li>
-    }
-  </ul>
-  @if (!userPokemon?.length) {
+      <li>
+        <app-pokemon-card [loading]="true" />
+      </li>
+      <li>
+        <app-pokemon-card [loading]="true" />
+      </li>
+    </ul>
+  } @else if (!userPokemon.length) {
     <div class="pokemons-empty__container">
       <div>
         <p i18n>
@@ -31,5 +36,13 @@ <h1 class="first-heading__title" i18n>My Pokemon</h1>
         />
       </div>
     </div>
+  } @else {
+    <ul i18n class="my-pokemon__grid fade-in">
+      @for (pokemon of userPokemon; track pokemon.id) {
+        <li>
+          <app-pokemon-card [pokemon]="pokemon" />
+        </li>
+      }
+    </ul>
   }
 </main>

src/app/features/my-pokemon/my-pokemon.component.scss

@@ -12,16 +12,27 @@ $empty-image-width: 200px;
   .my-pokemon__search-container {
     display: flex;
     justify-content: center;
+    margin-block-end: var(--spacing-r-5xl);
   }
 
   .my-pokemon__grid {
     display: grid;
     grid-template-columns: 1fr;
     gap: var(--spacing-r-xl);
+    visibility: hidden;
+    opacity: 0;
 
     @include mq.for-tablet-up {
       grid-template-columns: repeat($grid-columns, 1fr);
     }
+
+    &.fade-in {
+      animation: fade-in 0.1s forwards;
+    }
+
+    &.fade-out {
+      animation: fade-out 0.4s forwards;
+    }
   }
 
   .pokemons-empty__container {
@@ -40,3 +51,27 @@ $empty-image-width: 200px;
     }
   }
 }
+
+@keyframes fade-in {
+  from {
+    visibility: hidden;
+    opacity: 0;
+  }
+
+  to {
+    visibility: visible;
+    opacity: 1;
+  }
+}
+
+@keyframes fade-out {
+  from {
+    visibility: visible;
+    opacity: 1;
+  }
+
+  to {
+    visibility: hidden;
+    opacity: 0;
+  }
+}

src/app/features/my-pokemon/my-pokemon.component.ts

@@ -19,12 +19,12 @@ import { AlertService } from '~core/services/alert.service';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
-    selector: 'app-my-pokemon',
-    templateUrl: './my-pokemon.component.html',
-    styleUrl: './my-pokemon.component.scss',
-    imports: [PokemonCardComponent, NgOptimizedImage, PokemonSearchComponent],
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+  selector: 'app-my-pokemon',
+  templateUrl: './my-pokemon.component.html',
+  styleUrl: './my-pokemon.component.scss',
+  imports: [PokemonCardComponent, NgOptimizedImage, PokemonSearchComponent],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 export class MyPokemonComponent implements OnInit {
   private readonly userService = inject(UserService);
@@ -44,8 +44,7 @@ export class MyPokemonComponent implements OnInit {
       .subscribe({
         next: (user) => {
           this.user = user;
-
-          if (this.user.caughtPokemonIds) {
+          if (this.user.caughtPokemonIds.length > 0) {
             this.pokemonService
               .getPokemons(this.user.caughtPokemonIds)
               .pipe(takeUntilDestroyed(this.destroyRef))
@@ -58,6 +57,9 @@ export class MyPokemonComponent implements OnInit {
                   this.alertService.createErrorAlert(translations.genericErrorAlert);
                 },
               });
+          } else {
+            this.userPokemon = [];
+            this.changeDetectorRef.markForCheck();
           }
         },
       });

src/app/features/pokemon/components/pokedex/pokedex.component.ts

@@ -62,7 +62,7 @@ export class PokedexComponent implements OnInit {
           next: (user: User) => {
             this.user = user;
             this.pokemonImage = pokemonValue.sprites.front_default;
-            this.userHasPokemon = user.caughtPokemonIds?.includes(pokemonValue.id) ?? false;
+            this.userHasPokemon = user.caughtPokemonIds.includes(pokemonValue.id);
             setTimeout(() => {
               this.isPokedexClosed = false;
               this.changeDetectorRef.markForCheck();
@@ -106,7 +106,7 @@ export class PokedexComponent implements OnInit {
     const pokemonValue = this.pokemon();
     if (pokemonValue) {
       this.pokemonImage = pokemonValue.sprites.front_default;
-      this.userHasPokemon = this.user?.caughtPokemonIds?.includes(pokemonValue.id) ?? false;
+      this.userHasPokemon = this.user?.caughtPokemonIds.includes(pokemonValue.id) ?? false;
       this.changeDetectorRef.markForCheck();
     }
   }

src/app/features/pokemon/components/pokemon-card/pokemon-card.component.html

@@ -1,20 +1,37 @@
-<app-card>
-  <ng-container i18n ngProjectAs="heading">
-    <h2 class="card__heading">{{ pokemon()?.name | firstTitleCase }}</h2>
-  </ng-container>
-  <ng-container ngProjectAs="body">
-    <div class="pokemon__image-container">
-      <img
-        alt="angular logo"
-        i18n-alt
-        width="100"
-        height="100"
-        priority
-        [ngSrc]="pokemonImage || ''"
-      />
-    </div>
-    <p i18n>N.º: {{pokemon()?.order}}</p>
-    <p i18n>Height: {{pokemon()?.height}} dm</p>
-    <p i18n>Weight: {{pokemon()?.weight}} hg</p>
-  </ng-container>
-</app-card>
+<!-- eslint-disable-next-line @angular-eslint/template/no-call-expression -->
+@if (!loading()) {
+  <app-card>
+    <ng-container i18n ngProjectAs="heading">
+      <h2 class="card__heading">{{ pokemon()?.name | firstTitleCase }}</h2>
+    </ng-container>
+    <ng-container ngProjectAs="body">
+      <div class="pokemon__image-container">
+        <img
+          alt="angular logo"
+          i18n-alt
+          width="100"
+          height="100"
+          priority
+          [ngSrc]="pokemonImage || ''"
+        />
+      </div>
+      <p i18n>N.º: {{pokemon()?.order}}</p>
+      <p i18n>Height: {{pokemon()?.height}} dm</p>
+      <p i18n>Weight: {{pokemon()?.weight}} hg</p>
+    </ng-container>
+  </app-card>
+} @else {
+  <app-card>
+    <ng-container ngProjectAs="heading">
+      <sl-skeleton effect="pulse" />
+    </ng-container>
+    <ng-container ngProjectAs="body">
+      <div class="pokemon__image-container">
+        <sl-skeleton effect="pulse" />
+      </div>
+      <p><sl-skeleton effect="pulse" /></p>
+      <p><sl-skeleton effect="pulse" /></p>
+      <p><sl-skeleton effect="pulse" /></p>
+    </ng-container>
+  </app-card>
+}

src/app/features/pokemon/components/pokemon-card/pokemon-card.component.ts

@@ -1,19 +1,23 @@
 import type { OnInit } from '@angular/core';
-import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA, input } from '@angular/core';
 import type { Pokemon } from '~features/pokemon/types/pokemon.type';
 import { CardComponent } from '~core/components/card/card.component';
 import { FirstTitleCasePipe } from '~core/pipes/first-title-case.pipe';
 import { NgOptimizedImage } from '@angular/common';
 
+import '@shoelace-style/shoelace/dist/components/skeleton/skeleton.js';
+
 @Component({
   selector: 'app-pokemon-card',
   templateUrl: './pokemon-card.component.html',
   styleUrl: './pokemon-card.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [CardComponent, FirstTitleCasePipe, NgOptimizedImage],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 export class PokemonCardComponent implements OnInit {
   readonly pokemon = input<Pokemon>();
+  readonly loading = input<boolean>();
 
   pokemonImage: string | undefined;