Add skeleton loading states to components

[inesdgomes]

We need a loading state that informs users that something is happening in the background. It would show, for example, after users make a new search on this page or use any of the filters on the left side: https://www.ilo.org/search?ilo_date%5Bmin%5D=&ilo_date%5Bmax%5D=&sort_by=search_api_relevance&dl=false

We have this in the component library but doesn't seem fit for purpose. https://www.figma.com/design/RRxsfLNxjoypKrfJg1EwJf/ILO-Components-Library?node-id=682-6&t=8nBkXZiblcDk6Vg2-0 https://ilo-ui-twig.netlify.app/?path=/docs/components-transitions-loading--loading

cc'ing you @justintemps in case you want to chime in with any other additional requirements.

[inesdgomes]

@justintemps As discussed, assigning this to you so you can add more specs for @beatrizmartinmartins

[justintemps]

Hey @beatrizmartinmartins, in terms of a loading state, I think we should create skeleton versions (example here in material ui) for some but not all of the components.

When these gets used

Skeleton components get used when parts of the page are still loading, but should still be visible to the user while the data is fetching. As such, we only need this for content components that render data from the server.

Which components do we need skeletons for

• Cards
• Headings
• Hero
• List
• Profile
• RichText
• Image
• Video

[beatrizmartinmartins]

@justintemps Hey Justin, yes, I agree, we should make those versions although i'd say I will create a new category on the DS called Skeleton (just for dev purposes) and create those components there. In design is not really needed, but it does make sense to have it in design.

[beatrizmartinmartins]

@inesdgomes All skeletons are done except the rich text. We don't have that as a component. Should we just make the headings and the text have the same height as they have and just make them a skeleton instead of creating a component? Or do you actually need a component for all the type text styles @justintemps ? You can check the other components on the list here

[inesdgomes]

@beatrizmartinmartins Two requests:

• We talked about reviewing the style of the rectangles to make them a bit less rounded. Could you please look into that?
• Could you also create a new template of the Search Results page showing how it would look with the skeletons once a user makes a new search?

@justintemps We need your feedback on the designs, please: https://www.figma.com/design/RRxsfLNxjoypKrfJg1EwJf/ILO-Components-Library?node-id=3587-1001&t=GvHITZiTMiv8FGJC-0

[beatrizmartinmartins]

Hey @inesdgomes ! Changed the border-radius from 24 (rounded) to 4px. I think it's a good amount of pixels to not be so rounded. Also, you can check the Search Results template here.

Included the following skeletons:

• Accordion
• Tag
• Forms (All forms components except checkbox, radio button and File Uploader)
• Pagination

[inesdgomes]

Thanks @beatrizmartinmartins I'm moving this to development.

@justintemps All skeleton designs are here: https://www.figma.com/design/RRxsfLNxjoypKrfJg1EwJf/ILO-Components-Library?node-id=3587-1001&t=rPHHQj17zTWCD34L-0

And this a template showing the components that are a priority: https://www.figma.com/design/TnVsWy6VobbHzZdbHdx3Rb/ILO-Page-Templates?node-id=5452-140166&t=DeudsdqRTDqHvBoS-0

[justintemps]

The designs for this are done. I'm going to open a new ticket with instructions for development.

[justintemps]

@inesdgomes, @beatrizmartinmartins Hey, reviewing these designs, they look very complicated. The skeletons will only be on the page for a few seconds at most, can we simplify them so they'll be easier to implement?

For example, here's a look at the skeleton screen in LinkedIn. Notice the cards are very very simple.

[inesdgomes]

Yep, I see your point. @beatrizmartinmartins could you please rework these designs?

[beatrizmartinmartins]

I was wondering, do we actually need the dark versions of a skeleton? See screenshot attached

I will include them anyway, and we can remove later. Please check this link (I'm doing it on a branch)

@inesdgomes @justintemps

[justintemps]

@bashlk for your feedback please

[bashlk]

@justintemps Here are some of my thoughts

• We don't have the skeletons for the cards with a link which have a different height. Which also raises the point that we should probably show different skeletons based on whether a card has a link or not. or alternatively we don't try to match the height of the components and accept that the page will jump around a bit as components load.
• The dark variant of the skeleton for the detail card is missing. And we don't have dark variants at all for the multilink and data cards?
• Do we have a set of colors we use for the background of the page? I'm thinking about whether the gray in the shadow will have enough contrast against the background color of the page.
• The RTL versions of the skeletons are missing
• We need at least a single sample of the animation for these skeletons. We can then apply it to each of the boxes within the skeleton.
• We need to think about how these animations behave with RTL. I think they should probably be reversed.
• We should probably think about how the component transitions between the skeleton and the real content. A direct swap might be too jarring.