Update the skeleton loaders based on latest design changes

[fcoveram]

Problem

The current skeleton loaders are outdated due to design changes happening in the Dark Mode project (#3592) and a layout change in the image results.

Related issues

• Dark mode project Dark mode #3592
• Dark mode designs Dark Mode Design Proposal #3959

Proposal

The skeletons need to vary per media result, and if possible, per breakpoint when the media component changes to the other variants.

I added mockups that support light and dark modes for the variants I consider necessary in the Design Library.

Regarding the loading state, the color used is bg-fill-secondary, but for the animated gradient effect, I propose testing the following shades.

Mode	Base color	Secondary color
Light	bg-fill-secondary (gray-2)	gray-3
Dark	bg-fill-secondary (gray-11)	gray-10

Storybook links

Mode	Search Type
Light	All content, image, audio
Dark	All content, image, audio

All content results

Image results

Audio results

[openverse-bot]

Subscribe to Label Action

cc @WordPress/gutenberg-design, @WordPress/openverse

This issue or pull request has been labeled: "🖼️ aspect: design"

Thus the following users have been cc'd because of the following labels:

• WordPress/gutenberg-design: 🖼️ aspect: design
• WordPress/openverse: 🖼️ aspect: design

To subscribe or unsubscribe from this label, edit the .github/subscribe-to-label.json configuration file.

Learn more.

[sarayourfriend]

Note: I wanted to link the storybook component, but up to date, storybook is not available.

Forgive me if you were already aware of this, Francisco, but wanted to make sure you knew that Storybook is temporarily unavailable since the Nuxt 3 migration due to compatibility issues with Nuxt 3. @obulat might have more details about when it will be back.

[obulat]

We've talked about the lack of Storybook elsewhere with Francisco.
Here's the tracking issue for re-adding Storybook: #4728. I tried the nightly build, and it's still failing

[fcoveram]

Yes. I knew about the situation and the ticket. Thanks for the reminder. All good 🙂

[obulat]

I added the Storybook links with the current implementation