Side-by-side

// react-loading-skeleton — manual parallel tree (~22 lines)
import Skeleton from 'react-loading-skeleton';
import 'react-loading-skeleton/dist/skeleton.css';

function UserCard({ user, loading }) {
  if (loading) {
    return (
      <div className="card">
        <Skeleton circle width={64} height={64} />
        <div className="body">
          <Skeleton width={140} height={20} />
          <Skeleton width={280} height={14} count={2} />
          <div className="row">
            <Skeleton width={56} height={24} borderRadius={12} />
            <Skeleton width={72} height={24} borderRadius={12} />
          </div>
        </div>
      </div>
    );
  }
  return <RealUserCard user={user} />;
}

// Skeleto — wrap and forget (3 lines)
import { AutoSkeleton } from '@kenildev007/skeleto';

function UserCard({ user, loading }) {
  return (
    <AutoSkeleton loading={loading}>
      <RealUserCard user={user} />
    </AutoSkeleton>
  );
}