BonesForce

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

<BonesForce> sets the loading flag for its entire subtree so all nested createBones calls return skeleton attributes. Unlike <Bones>, it does not create a Suspense boundary.

Usage

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

function SkeletonPreview() {
  return (
    <BonesForce>
      <UserCard />
      <PostList />
    </BonesForce>
  );
}

Every createBones call inside <BonesForce> produces skeleton attributes, regardless of whether real data is passed.

When to use

• Storybook - show skeleton states in isolation
• Testing - verify skeleton markup without real promises
• Demos - display skeleton and loaded states side by side

Props