Loading & skeleton states

/* Each placeholder reserves real space, so loading and loaded are the
   same height — no layout shift on swap. */
.skeleton {
  border-radius: 0.375rem;
  background-color: #e5e7eb;
}
 
.skeleton-avatar { width: 3rem; height: 3rem; border-radius: 9999px; }
.skeleton-line   { height: 0.75rem; }
.skeleton-line.is-name { width: 60%; }
.skeleton-line.is-full { width: 100%; }
.skeleton-button { width: 7rem; height: 2.25rem; }
 
/* SHIMMER: slide a soft highlight across via background-position only. */
.skeleton.shimmer {
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.6) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: skeleton-sweep 1.4s ease-in-out infinite;
}
 
@keyframes skeleton-sweep {
  0%   { background-position: 150% 0; }
  100% { background-position: -150% 0; }
}
 
/* PULSE: a softer alternative — opacity only. */
.skeleton.pulse {
  animation: skeleton-fade 1.4s ease-in-out infinite;
}
 
@keyframes skeleton-fade {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}
 
/* a11y: stop the motion; the static grey blocks still convey "loading". */
@media (prefers-reduced-motion: reduce) {
  .skeleton.shimmer,
  .skeleton.pulse {
    animation: none;
    background-image: none;
  }
}

import { useEffect, useState } from "react";
 
// A single placeholder block. Pass the same className you'd give the real
// element so the skeleton reserves identical space.
function Skeleton({ className, style = "shimmer" }) {
  return <span aria-hidden className={`skeleton ${style} ${className}`} />;
}
 
export function ProfileCard({ user, style = "shimmer" }) {
  const loading = !user;
 
  return (
    // aria-busy tells assistive tech the region is still loading.
    <article aria-busy={loading} className="card">
      {loading ? (
        <div className="card-body">
          <Skeleton className="skeleton-avatar" style={style} />
          <Skeleton className="skeleton-line is-name" style={style} />
          <Skeleton className="skeleton-line is-full" style={style} />
          <Skeleton className="skeleton-line is-full" style={style} />
          <Skeleton className="skeleton-button" style={style} />
        </div>
      ) : (
        <div className="card-body">
          <img className="avatar" src={user.avatar} alt="" />
          <p className="name">{user.name}</p>
          <p className="bio">{user.bio}</p>
          <button type="button">Follow</button>
        </div>
      )}
    </article>
  );
}
 
// Demo harness: flip to loaded after a beat.
export function Example() {
  const [user, setUser] = useState(null);
  useEffect(() => {
    const t = setTimeout(
      () => setUser({ name: "Rosa Pinheiro", bio: "Builds small things.", avatar: "/rosa.jpg" }),
      1500,
    );
    return () => clearTimeout(t);
  }, []);
  return <ProfileCard user={user} />;
}