Migration guide

From hand-authored skeleton libraries to @kenildev007/skeleto.

From react-loading-skeleton

Before:

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} />
        <Skeleton width={200} height={20} />
        <Skeleton width={300} height={14} count={2} />
      </div>
    );
  }
  return <RealUserCard user={user} />;
}

After:

import { AutoSkeleton } from '@kenildev007/skeleto';
import '@kenildev007/skeleto/styles.css';

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

That's the whole migration. You delete the parallel skeleton tree and let the library infer it. If a specific shape is wrong, use the data-skeleton-role escape hatch.

From react-native-skeleton-placeholder

Before:

import SkeletonPlaceholder from 'react-native-skeleton-placeholder';

function UserCard({ user, loading }) {
  if (loading) {
    return (
      <SkeletonPlaceholder>
        <SkeletonPlaceholder.Item flexDirection="row" alignItems="center">
          <SkeletonPlaceholder.Item width={64} height={64} borderRadius={32} />
          <SkeletonPlaceholder.Item marginLeft={20}>
            <SkeletonPlaceholder.Item width={120} height={20} />
            <SkeletonPlaceholder.Item marginTop={6} width={200} height={14} />
          </SkeletonPlaceholder.Item>
        </SkeletonPlaceholder.Item>
      </SkeletonPlaceholder>
    );
  }
  return <RealUserCard user={user} />;
}

After:

import { AutoSkeleton } from '@kenildev007/skeleto';

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

Map of common props

react-loading-skeleton	Skeleto
baseColor	baseColor (or via SkeletonProvider)
highlightColor	highlightColor
duration	speed (seconds)
circle	auto-detected; or data-skeleton-role='circle'
count	just render N children - they're auto-measured
enableAnimation={false}	animation='none'