[feat] Create <rh-skeleton> component/pattern

[eyevana]

Description

Does RHDS have any plans on implementing a skeleton loader, similar to https://www.patternfly.org/components/skeleton

Acceptance Criteria

• Design done
• Development done

Images

No response

Design file

No response

Other resources

No response

[bennypowers]

Chatting it out with @zeroedin, we have a few initial, off-the-cuff impressions:

• Is this a pattern we want RHDS to support? The need for a skeleton loader can indicate deeper architectural issues in an app
• On the other hand, for a team which is already committed to building an app with a skeleton loader, if this is the dealbreaker between going with a JS-heavy react stack and using web components, there could be a solid harm-reduction based argument for implementing this in RHDS
• Asides from client performance concerns, this seems from my perspective to be potentially a lot of work and complexity for diminishing returns. it's unlikely that we'll be able to provide simple skeleton designs with baked-in layouts which will satisfy users. instead we'll probably have to provide a variety of skeleton elements, in order to give page builders the tools they need to build complex skeleton UIs

Is there a flexible enough off-the-shelf library users can tweak for RHDS purposes?

Shoelace' <sl-skeleton> takes the golden mean here: A single, extremely simple custom element is all you get; the only thing it provides is the animated gradient background. It's up to the user to use border radius, clip path, grid, or whathaveyou to build out the skeleton UI.

Thanks to @markcaron for input on the discussion as well