forceBones

import { forceBones } from "@lovo/bones";

forceBones is a frozen empty object typed as Promise<never>. Pass it as data to createBones to trigger skeleton mode for a single component without a Suspense boundary or <BonesForce> wrapper.

Usage

import { createBones, forceBones } from "@lovo/bones";

function UserCard({ user }: { user: Promise<User> }) {
  const { bone, data } = createBones(user);
  return (
    <div>
      <h2 {...bone("text", { length: 12 })}>{data?.name}</h2>
    </div>
  );
}

// Force skeleton mode for a single component:
<UserCard user={forceBones} />;

How it works

createBones checks for forceBones by identity (===). When matched, it sets isLoading = true and data = undefined without throwing a promise or reading the loading context.

Typed as Promise<never> so it's assignable to any Promise<T> prop.

When to use

• Force skeleton mode on a single component (use <BonesForce> for an entire subtree).
• Used internally by <Bones> to swap promise props in the Suspense fallback.