🚀 Stop Writing Separate Skeleton Components in React

Every time we build loading states in React, we usually end up doing something like this:

if (loading) return <UserProfileSkeleton />
return <UserProfile />

Now we have:

UserProfile
UserProfileSkeleton

Two components.
Two layouts.
Two things to maintain.

And when the design changes?

You update both.

That’s duplicated UI logic.

The Real Problem

Skeleton screens are great for UX.
But maintaining them manually is painful.

Layout changes → update skeleton
Add a new field → update skeleton
Adjust spacing → update skeleton
Refactor component → update skeleton

It becomes repetitive and fragile.

What if we could generate skeleton screens automatically from the existing DOM structure?

Introducing AutoSkeleton

auto-skeleton-react lets you wrap any component and automatically generate a matching skeleton layout.

<AutoSkeleton loading={loading}>
  <UserProfile />
</AutoSkeleton>

That’s it.

No separate skeleton component.
No manual width/height tweaking.
No duplicated layout structure.

It analyzes the rendered DOM and builds a skeleton that matches your existing layout.

For 70–80% of real-world use cases (dashboards, cards, forms, tables), this removes the need to build skeleton components manually.

Here’s what that looks like in practice:

🚀 Quick example

UserProfile component

export function UserProfile() {
  return (
    <div className="flex max-w-150 gap-4 p-5">
      <Image
        src="https://avatars.githubusercontent.com/u/58282436?v=4"
        width={80}
        height={80}
        className="h-20 w-20 rounded-full"
        alt="Avatar"
      />
      <div className="flex-1">
        <h2 className="m-0 mb-2 text-2xl">Shanuka Hettiarachchi</h2>
        <p className="m-0 mb-3 text-[#666]">
          Senior Software Engineer at Wire Apps
        </p>
        <button className="cursor-pointer rounded-md border-none bg-blue-500 px-4 py-2 font-medium text-white">
          Follow
        </button>
      </div>
    </div>
  );
}

Now let's wrap it using AutoSkeleton

<AutoSkeleton
   loading={loading}
   config={{
   animation: "pulse",
   baseColor: "#d4d4d8",
   borderRadius: 8,
   }}
>
   <UserProfile />
</AutoSkeleton>