search

WordPress / openverse

Openverse is a search engine for openly-licensed media. This monorepo includes all application code.
https://openverse.org
MIT License
237 stars 187 forks source link

Update the skeleton loaders based on latest design changes #4829

Open fcoveram opened 2 weeks ago

fcoveram commented 2 weeks ago

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

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

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

All content results

Skeleton loaders for different breakpoints of all content results

Image results

Skeleton loaders for different breakpoints of all image results

Audio results

Skeleton loaders for different breakpoints of audio results

openverse-bot commented 2 weeks ago

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.](https://github.com/bytecodealliance/subscribe-to-label-action)
sarayourfriend commented 2 weeks ago

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 commented 2 weeks ago

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 commented 2 weeks ago

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