Element Exclusion

Use data-skeleton-ignore to keep interactive controls available during loading.

Interactive Example

The message input remains interactive while content is skeletonized

Excluded: input area

Loading state

Simulate pending chat history

Alex

How is the skeleton demo looking?

2m ago

Code Example

Exclude the input area from analyzer traversal

tsx

<AutoSkeleton loading={loading}>
  <div className="chat-container">
    <div className="messages">...</div>

    <div data-skeleton-ignore className="input-area">
      <input type="text" />
      <button>Send</button>
    </div>
  </div>
</AutoSkeleton>