feat(challenge 59): contente projection defer

docs/src/content/docs/challenges/angular/58-content-projection-condition.md

@@ -8,7 +8,6 @@ challengeNumber: 58
 command: angular-content-projection-condition
 sidebar:
   order: 124
-  badge: New
 ---
 
 ## Information

docs/src/content/docs/challenges/angular/59-content-projection-defer.md

@@ -0,0 +1,28 @@
+---
+title: 🔴 content-projection-defer
+description: Challenge 59 is about deferring fetching data
+author: thomas-laforge
+contributors:
+  - tomalaforge
+challengeNumber: 59
+command: angular-content-projection-defer
+sidebar:
+  order: 212
+  badge: New
+---
+
+# Challenge: Deferred Loading for Expandable Card Content
+
+## Information
+
+Within the application, specifically on page2, there is an expandable card component. This component consists of a permanently visible title and a content section that is hidden until the card is expanded. This content section is populated with a list of posts retrieved via a backend API call. The current implementation presents an issue: upon navigating to page2, although the card defaults to a collapsed state, the API call to load the list of posts is triggered immediately during the page load process, before the user has chosen to expand the card and view the content.
+
+## Statement
+
+The goal of this challenge is to optimize the data loading behavior for the expandable card component on `page2`. Modify the implementation so that the backend API call to fetch the list of posts is **deferred**. The data should **only** be fetched when the user explicitly interacts with the card to **expand** it. No data fetching for the post list should occur upon the initial load of `page2` while the card remains collapsed.
+
+## Constraints
+
+- The expandable card must retain its core functionality: display a title, be initially collapsed (on `page2` load), and expand/collapse upon user interaction.
+- When the card is expanded, the list of posts must be fetched from the backend and displayed within the content area.
+- The data fetching mechanism itself (e.g., the API endpoint) should not be changed, only _when_ it is triggered.

docs/src/content/docs/es/index.mdx

@@ -13,7 +13,7 @@ hero:
       icon: right-arrow
       variant: primary
     - text: Ir al Desafío más reciente
-      link: /es/challenges/angular/58-content-projection-condition/
+      link: /es/challenges/angular/59-content-projection-defer/
       icon: rocket
     - text: Dar una estrella
       link: https://github.com/tomalaforge/angular-challenges
@@ -26,8 +26,8 @@ import MyIcon from '../../../components/MyIcon.astro';
 import SubscriptionForm from '../../../components/SubscriptionForm.astro';
 
 <CardGrid>
-<Card title="58 Desafíos">
-  Este repositorio contiene 58 Desafíos relacionados con <b>Angular</b>, <b>Nx</b>, <b>RxJS</b>, <b>Ngrx</b> y <b>Typescript</b>.
+<Card title="59 Desafíos">
+  Este repositorio contiene 59 Desafíos relacionados con <b>Angular</b>, <b>Nx</b>, <b>RxJS</b>, <b>Ngrx</b> y <b>Typescript</b>.
   Estos desafíos se resuelven en torno a problemas de la vida real o características específicas para mejorar tus habilidades.
 </Card>
 

docs/src/content/docs/fr/index.mdx

@@ -13,7 +13,7 @@ hero:
       icon: right-arrow
       variant: primary
     - text: Aller au dernier Challenge
-      link: /fr/challenges/angular/58-content-projection-condition/
+      link: /fr/challenges/angular/59-content-projection-defer/
       icon: rocket
     - text: Donne une étoile
       link: https://github.com/tomalaforge/angular-challenges
@@ -26,8 +26,8 @@ import MyIcon from '../../../components/MyIcon.astro';
 import SubscriptionForm from '../../../components/SubscriptionForm.astro';
 
 <CardGrid>
-<Card title="58 Défis">
-    Ce répertoire rassemble 58 Défis liés à <b>Angular</b>, <b>Nx</b>, <b>RxJS</b>, <b>Ngrx</b> et <b>Typescript</b>. Ces défis portent sur des problèmes réels ou des fonctionnalités spécifiques pour améliorer vos compétences.
+<Card title="59 Défis">
+    Ce répertoire rassemble 59 Défis liés à <b>Angular</b>, <b>Nx</b>, <b>RxJS</b>, <b>Ngrx</b> et <b>Typescript</b>. Ces défis portent sur des problèmes réels ou des fonctionnalités spécifiques pour améliorer vos compétences.
 </Card>
 
 <Card title="Subscribe to get notify of latest challenges">

docs/src/content/docs/index.mdx

@@ -13,7 +13,7 @@ hero:
       icon: right-arrow
       variant: primary
     - text: Go to the latest Challenge
-      link: /challenges/angular/58-content-projection-condition/
+      link: /challenges/angular/59-content-projection-defer/
       icon: rocket
     - text: Give a star
       link: https://github.com/tomalaforge/angular-challenges
@@ -27,8 +27,8 @@ import MyIcon from '../../components/MyIcon.astro';
 import SubscriptionForm from '../../components/SubscriptionForm.astro';
 
 <CardGrid>
-<Card title="58 Challenges">
-    This repository gathers 58 Challenges related to <b>Angular</b>, <b>Nx</b>, <b>RxJS</b>, <b>Ngrx</b> and <b>Typescript</b>.
+<Card title="59 Challenges">
+    This repository gathers 59 Challenges related to <b>Angular</b>, <b>Nx</b>, <b>RxJS</b>, <b>Ngrx</b> and <b>Typescript</b>.
     These challenges resolve around real-life issues or specific features to elevate your skills.
 </Card>
 

docs/src/content/docs/pt/index.mdx

@@ -13,7 +13,7 @@ hero:
       icon: right-arrow
       variant: primary
     - text: Ir para o desafio mais recente
-      link: /pt/challenges/angular/58-content-projection-condition/
+      link: /pt/challenges/angular/59-content-projection-defer/
       icon: rocket
     - text: Dar uma estrela
       link: https://github.com/tomalaforge/angular-challenges
@@ -26,8 +26,8 @@ import MyIcon from '../../../components/MyIcon.astro';
 import SubscriptionForm from '../../../components/SubscriptionForm.astro';
 
 <CardGrid>
-  <Card title="58 Desafios">
-    Este repositório possui 58 Desafios relacionados a <b>Angular</b>, <b>Nx</b>, <b>RxJS</b>,
+  <Card title="59 Desafios">
+    Este repositório possui 59 Desafios relacionados a <b>Angular</b>, <b>Nx</b>, <b>RxJS</b>,
     <b>Ngrx</b> e <b>Typescript</b>.
     Esses desafios são voltados para problemas reais ou funcionalidades específicas afim de
     melhorar suas habilidades.

docs/src/content/docs/ru/index.mdx

@@ -13,7 +13,7 @@ hero:
       icon: right-arrow
       variant: primary
     - text: Перейти к последней задаче
-      link: /ru/challenges/angular/58-content-projection-condition/
+      link: /ru/challenges/angular/59-content-projection-defer/
       icon: rocket
     - text: Добавить звезду
       link: https://github.com/tomalaforge/angular-challenges