[Feature Request]: Handling loading states

[ahujamoh]

Requirements before reporting

• [X] No duplicated issue reported
• [X] I have read the contribution guidelines
• [X] I have checked the lastest version if the feature exist there

Type of feature request

Functionality

What is your feature request?

The components such as cards/tooltip/loaders don't have a loading state, thus they appear from nothing; sometimes some of the data which needs to be populated in these is awaited from the backend or is received asynchronously.

There should be a way to have a loading state while the data is getting populated. Examples shimmer effect used by facebook or pulsing animation by linkedin for example.

Background

This is a modern UX pattern which if available in our design system will be great for Scania's own platforms plus other external developers who intend to use this design system. This will be a good UX where network data is slow.

Idea

Corporate UI had a generic loader which could be installed in the places, but modern UXs have the skeletal content of the expected data ad not a generic loader. This could be a good start.

Goals and objectives

A better UX

Timeline

No response

Resources

https://pencilandpaper.io/articles/ux-pattern-analysis-loading-feedback/#:~:text=Loading%20states%20are%20just%20that,is%20effectively%20being%20worked%20on.

Contact information

ahujamoh@gmail.com

AB#2322

[alexlioliopoulos]

Great request - we are already on to it! We are now fixed on the design of skeleton screens, and we will very soon start to take that into code. The idea -for now- is to have a skeleton state/variant for each of our components.

[ahujamoh]

@alexlioliopoulos Thanks for the response, I can also contribute if needed once you have set some examples

[alexlioliopoulos]

https://www.figma.com/proto/KkyoRT71TbX95sM7nEwsUF/Skeleton-text-field-exploration?page-id=1%3A166&node-id=425%3A28075&viewport=-1176%2C-3628%2C0.14&scaling=min-zoom

Here you can see an example of what we are aiming for. We are now considering how to take that to code; if skeleton will be a component variant or a state, and how it will all work together. If you'd like to give it a try, we can talk more :)

[ahujamoh]

Looks real nice, and should be a good visual experience, and yes, I would like to be part/contribute in building this :)

[mJarsater]

This feature request is noted and added to our backlog, will need both design investigation and development work.