34 have pokemondetailscard display placeholders for pokemon information instead of flash a custom widget while loading data

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,6 +394,78 @@
   box-shadow: var(--shadow);
 }
 
+.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 +597,11 @@
     padding: 16px;
   }
 
+  .skeleton-image {
+    width: 80px;
+    height: 80px;
+  }
+
   .pokemon-card-header img {
     width: 80px;
     height: 80px;

src/PokemonDetails.tsx

@@ -38,24 +38,22 @@ function PokemonDetails({
     );
   }
 
-  if (isPending) {
-    return <p>Loading Pokémon details...</p>;
-  }
-
-  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"
@@ -65,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
@@ -76,7 +126,7 @@ function PokemonDetails({
             <div>
               <div className="pokemon-card-title">
                 <h2>
-                  {capitalize(selectedPokemon.name)}{' '}
+                    {capitalize(selectedPokemon.name)}{' '}
                   <span>#{selectedPokemon.id}</span>
                 </h2>
                 <button