Proposal: Improve Skeleton with component-aware support for Image, Text, Anchor and Badge

[sc30gsw]

I would like to propose an improvement to Skeleton in @mantine/core.

I have been exploring a layout-aware skeleton approach where wrapping real content with Skeleton preserves layout and automatically renders loading placeholders.

This works well for text-like content, but generic CSS-based skeletonization has limitations for media and component-specific elements. For example, images and avatars can be hidden, but they do not automatically become meaningful placeholders with the correct shape.

Because of that, I would like to explore a component-aware approach for selected Mantine components, similar in spirit to how some other design systems handle skeleton states.

Initial scope

• Image
• Text
• Anchor
• Badge

Why this approach

• more realistic loading UI with less manual placeholder markup
• preserves component shape more accurately than generic CSS-only skeletonization
• avoids forcing users to build separate loading layouts for common cases
• gives Mantine more control over how each component behaves inside Skeleton

Reference

As a reference point, React Spectrum supports skeleton-aware behavior for several design system components such as Image, Text, Link, and Badge.

That is close to the direction I had in mind here: instead of relying only on generic CSS selectors, selected Mantine components could respond to Skeleton context and render more appropriate loading states while preserving layout.

Reference:
https://react-spectrum.adobe.com/Skeleton

Questions

1. Does this direction make sense for Mantine?
2. Would component-aware Skeleton behavior be acceptable for selected core components?
3. Should the initial implementation be limited to the four components above?
4. Should this be implemented as an enhancement to the existing Skeleton, or as a separate API/pattern?

If this direction makes sense, I would be happy to prepare a focused PR with a minimal first iteration.