Skeleton
Adding and styling 'skeleton' parts.
Last updated
Was this helpful?
Adding and styling 'skeleton' parts.
Last updated
Was this helpful?
A 'Skeleton' is a part that can be used to show the loading state of a component.
A skeleton is a minimalist representation of the UI that will be displayed once the content is fully loaded. It typically includes gray blocks and lines in the shapes of the expected final content, such as text lines, images, and other elements.
Location in the Parts Library: Base Parts > Feedback > Skeleton
Skeletons can:
Improve User Experience:
Perceived Performance: Skeletons can make the loading process feel faster by providing an immediate visual structure, rather than showing a blank screen or a loading spinner. Users perceive the app as being more responsive.
Reduced Frustration: By previewing the content layout, users can understand that the content is being loaded, reducing frustration compared to waiting without visual feedback.
Offer Visual Feedback:
Progress Indication: Skeletons indicate that the application is working on loading the content, which provides reassurance to the users that the process is underway.
Context Retention: Users can see the context of where the content will appear, helping them to stay oriented and understand what to expect once loading is complete.
Provide Aesthetic Consistency:
Design Continuity: Skeleton screens maintain the design and layout continuity of the application, which looks more polished compared to sudden content changes or empty states.
Skeleton parts don't have any text or imagery. They are shapes that have height, width, shape, and spacing applied.
The idea is that you mimic the part that is loading with skeleton shapes. They can be added to rows and columns to mimic your content.
To add a skeleton, choose one from the parts library that represents your best starting point. Add a row or container underneath your 'loading' content. Then add the relevant skeleton part from the parts library.
Duplicate or remove parts from the skeleton component as needed. Apply width to relevant parts, spacing, and rounding as needed.
Remember to keep these simple - they are only meant to be a visual indicator that the content is coming soon.
To make your skeleton visible only when loading, select the container housing the skeleton part, then go to 'Visibility' in the right property editing panel. Choose "is-loading". You will notice that your skeleton part and its container are no longer visible. They will only be visible in the event that your content is in the process of loading.
The default color of skeleton parts is gray. They can have a applied if desired.
Loading
Progress
Customizing and formatting
