From 01563dc341fd42d7e751671b87c5ee5c655cf0bc Mon Sep 17 00:00:00 2001
From: William M Schmidt <schmidtwilliammikal@gmail.com>
Date: Fri, 18 Sep 2026 23:18:09 +0200
Subject: [PATCH 1/3] Built the loading card with skeleton animation

---
 src/App.css            | 85 ++++++++++++++++++++++++++++++++++++++++++
 src/PokemonDetails.tsx | 56 +++++++++++++++++++++++++++-
 2 files changed, 140 insertions(+), 1 deletion(-)

diff --git a/src/App.css b/src/App.css
index 168968a..7577f82 100644
--- a/src/App.css
+++ b/src/App.css
@@ -392,6 +392,86 @@
   box-shadow: var(--shadow);
 }
 
+/*
+  Pokemon card loading
+*/
+
+.pokemon-card-loading {
+  min-height: 386px;
+}
+
+.skeleton {
+  background: linear-gradient(
+    100deg,
+    var(--border) 25%,
+    var(--bg) 50%,
+    var(--border) 75%
+  );
+  background-size: 200% 100%;
+  animation: skeleton-loading 1.5s ease-in-out infinite;
+}
+
+.skeleton-image {
+  width: 100px;
+  height: 100px;
+  flex: 0 0 auto;
+  border-radius: 50%;
+}
+
+.skeleton-header-text {
+  display: grid;
+  gap: 10px;
+  width: min(220px, 100%);
+}
+
+.skeleton-title {
+  width: 75%;
+  height: 25px;
+  border-radius: 6px;
+}
+
+.skeleton-subtitle {
+  width: 48%;
+  height: 17px;
+  border-radius: 5px;
+}
+
+.skeleton-label {
+  width: 35%;
+  height: 17px;
+  border-radius: 5px;
+}
+
+.skeleton-value {
+  width: 100%;
+  height: 38px;
+  border-radius: 10px;
+}
+
+.skeleton-section-title {
+  width: 85px;
+  height: 18px;
+  border-radius: 5px;
+}
+
+.skeleton-stat {
+  width: 100%;
+  height: 20px;
+  border-radius: 8px;
+}
+
+@keyframes skeleton-loading {
+  to {
+    background-position: -200% 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .skeleton {
+    animation: none;
+  }
+}
+
 .pokemon-card-close {
   position: absolute;
   top: 10px;
@@ -523,6 +603,11 @@
     padding: 16px;
   }
 
+  .skeleton-image {
+    width: 80px;
+    height: 80px;
+  }
+
   .pokemon-card-header img {
     width: 80px;
     height: 80px;
diff --git a/src/PokemonDetails.tsx b/src/PokemonDetails.tsx
index 43d75ec..3f49a7b 100644
--- a/src/PokemonDetails.tsx
+++ b/src/PokemonDetails.tsx
@@ -39,7 +39,61 @@ function PokemonDetails({
   }
 
   if (isPending) {
-    return <p>Loading Pokémon details...</p>;
+    return (
+      <section
+        className="pokemon-card pokemon-card-loading"
+        aria-label="Laster Pokémon-detaljer"
+        aria-busy="true"
+      >
+        <div className="pokemon-card-header" aria-hidden="true">
+          <div className="skeleton skeleton-image" />
+          <div className="skeleton-header-text">
+            <div className="skeleton skeleton-title" />
+            <div className="skeleton skeleton-subtitle" />
+          </div>
+        </div>
+
+        <table className="pokemon-info" aria-hidden="true">
+          <thead>
+            <tr>
+              <th scope="col">
+                <div className="skeleton skeleton-label" />
+              </th>
+              <th scope="col">
+                <div className="skeleton skeleton-label" />
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>
+                <div className="skeleton skeleton-value" />
+              </td>
+              <td>
+                <div className="skeleton skeleton-value" />
+              </td>
+            </tr>
+          </tbody>
+        </table>
+
+        <div className="pokemon-stats" aria-hidden="true">
+          <h3 className="skeleton skeleton-section-title" />
+          <table className="stats-grid">
+            <tbody>
+              {Array.from({ length: 2 }, (_, rowIndex) => (
+                <tr key={rowIndex}>
+                  {Array.from({ length: 3 }, (_, cellIndex) => (
+                    <td className="stat" key={cellIndex}>
+                      <div className="skeleton skeleton-stat" />
+                    </td>
+                  ))}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </section>
+    );
   }
 
   if (isError || selectedPokemon === null) {

From 1f9b96e16761476aa0d6101f7a24a022f2901581 Mon Sep 17 00:00:00 2001
From: William M Schmidt <schmidtwilliammikal@gmail.com>
Date: Fri, 18 Sep 2026 23:20:15 +0200
Subject: [PATCH 2/3] Updated with favorite, and added a card with 2 hydration
 states instead of 2 cards

---
 src/PokemonDetails.tsx | 140 ++++++++++++++++++++---------------------
 1 file changed, 68 insertions(+), 72 deletions(-)

diff --git a/src/PokemonDetails.tsx b/src/PokemonDetails.tsx
index 3f49a7b..3142637 100644
--- a/src/PokemonDetails.tsx
+++ b/src/PokemonDetails.tsx
@@ -38,78 +38,22 @@ function PokemonDetails({
     );
   }
 
-  if (isPending) {
-    return (
-      <section
-        className="pokemon-card pokemon-card-loading"
-        aria-label="Laster Pokémon-detaljer"
-        aria-busy="true"
-      >
-        <div className="pokemon-card-header" aria-hidden="true">
-          <div className="skeleton skeleton-image" />
-          <div className="skeleton-header-text">
-            <div className="skeleton skeleton-title" />
-            <div className="skeleton skeleton-subtitle" />
-          </div>
-        </div>
-
-        <table className="pokemon-info" aria-hidden="true">
-          <thead>
-            <tr>
-              <th scope="col">
-                <div className="skeleton skeleton-label" />
-              </th>
-              <th scope="col">
-                <div className="skeleton skeleton-label" />
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>
-                <div className="skeleton skeleton-value" />
-              </td>
-              <td>
-                <div className="skeleton skeleton-value" />
-              </td>
-            </tr>
-          </tbody>
-        </table>
-
-        <div className="pokemon-stats" aria-hidden="true">
-          <h3 className="skeleton skeleton-section-title" />
-          <table className="stats-grid">
-            <tbody>
-              {Array.from({ length: 2 }, (_, rowIndex) => (
-                <tr key={rowIndex}>
-                  {Array.from({ length: 3 }, (_, cellIndex) => (
-                    <td className="stat" key={cellIndex}>
-                      <div className="skeleton skeleton-stat" />
-                    </td>
-                  ))}
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
-      </section>
-    );
-  }
-
-  if (isError || selectedPokemon === null) {
-    return <p>Could not load Pokémon details.</p>;
-  }
-
-  const statRows = Array.from(
-    { length: Math.ceil(selectedPokemon.stats.length / 3) },
-    (_, rowIndex) => selectedPokemon.stats.slice(rowIndex * 3, rowIndex * 3 + 3)
-  );
-
-  const favorite = isFavorite(selectedPokemon.id);
-  const name = capitalize(selectedPokemon.name);
+  const statRows = selectedPokemon
+    ? Array.from(
+        { length: Math.ceil(selectedPokemon.stats.length / 3) },
+        (_, rowIndex) =>
+          selectedPokemon.stats.slice(rowIndex * 3, rowIndex * 3 + 3)
+      )
+    : [];
+  const favorite = selectedPokemon ? isFavorite(selectedPokemon.id) : false;
+  const name = selectedPokemon ? capitalize(selectedPokemon.name) : '';
 
   return (
-    <section className="pokemon-card" aria-label="Valgt Pokémon">
+    <section
+      className="pokemon-card pokemon-card-loading"
+      aria-label="Valgt Pokémon"
+      aria-busy={isPending}
+    >
       <button
         className="pokemon-card-close"
         type="button"
@@ -119,7 +63,59 @@ function PokemonDetails({
         ×
       </button>
 
-      {selectedPokemon && (
+      {isPending ? (
+        <>
+          <div className="pokemon-card-header" aria-hidden="true">
+            <div className="skeleton skeleton-image" />
+            <div className="skeleton-header-text">
+              <div className="skeleton skeleton-title" />
+              <div className="skeleton skeleton-subtitle" />
+            </div>
+          </div>
+
+          <table className="pokemon-info" aria-hidden="true">
+            <thead>
+              <tr>
+                <th scope="col">
+                  <div className="skeleton skeleton-label" />
+                </th>
+                <th scope="col">
+                  <div className="skeleton skeleton-label" />
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>
+                  <div className="skeleton skeleton-value" />
+                </td>
+                <td>
+                  <div className="skeleton skeleton-value" />
+                </td>
+              </tr>
+            </tbody>
+          </table>
+
+          <div className="pokemon-stats" aria-hidden="true">
+            <h3 className="skeleton skeleton-section-title" />
+            <table className="stats-grid">
+              <tbody>
+                {Array.from({ length: 2 }, (_, rowIndex) => (
+                  <tr key={rowIndex}>
+                    {Array.from({ length: 3 }, (_, cellIndex) => (
+                      <td className="stat" key={cellIndex}>
+                        <div className="skeleton skeleton-stat" />
+                      </td>
+                    ))}
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </>
+      ) : isError || selectedPokemon === null ? (
+        <p>Could not load Pokémon details.</p>
+      ) : (
         <>
           <header className="pokemon-card-header">
             <img
@@ -130,7 +126,7 @@ function PokemonDetails({
             <div>
               <div className="pokemon-card-title">
                 <h2>
-                  {capitalize(selectedPokemon.name)}{' '}
+                    {capitalize(selectedPokemon.name)}{' '}
                   <span>#{selectedPokemon.id}</span>
                 </h2>
                 <button

From 062cfa0861e5676b00b086bd4519b3f64f7566f0 Mon Sep 17 00:00:00 2001
From: William M Schmidt <schmidtwilliammikal@gmail.com>
Date: Fri, 18 Sep 2026 23:24:57 +0200
Subject: [PATCH 3/3] Made the card a fixed height with the inside to overflow
 so it doesn't jitter when switching states between loading

---
 src/App.css | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/src/App.css b/src/App.css
index 7577f82..2cb0fb8 100644
--- a/src/App.css
+++ b/src/App.css
@@ -381,9 +381,11 @@
 .pokemon-card {
   position: relative;
   width: min(100%, 620px);
+  height: 420px;
   margin: 24px auto;
   padding: 20px;
   box-sizing: border-box;
+  overflow-y: auto;
 
   border: 1px solid var(--accent-border);
   border-radius: 18px;
@@ -392,14 +394,6 @@
   box-shadow: var(--shadow);
 }
 
-/*
-  Pokemon card loading
-*/
-
-.pokemon-card-loading {
-  min-height: 386px;
-}
-
 .skeleton {
   background: linear-gradient(
     100deg,