Bones

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

<Bones> wraps its children in a <Suspense> boundary. The fallback is the same component tree, but with all Promise props replaced by forceBones and a loading flag set so nested createBones calls return skeleton attributes.

Usage

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

export default function Page() {
  return (
    <Bones>
      <UserCard user={fetchUser()} />
    </Bones>
  );
}

When fetchUser() is pending, <Bones> renders <UserCard> with skeletons. When it resolves, the real content appears.

How the fallback works

1. <Bones> clones each direct child element.
2. Any prop that is a Promise gets swapped with forceBones.
3. The fallback subtree runs inside a React.cache-based loading context, so all createBones calls return skeleton attributes.
4. When the real promises resolve, React swaps in the actual content.

Props

Notes

• <Bones> only swaps Promise props on direct children. Deeply nested promises need their own <Bones> or <Suspense> boundary.
• Multiple <Bones> boundaries on a page are independent. Each one reveals content when its promises resolve.