Use skeleton loading components to give users an idea of what content is loading
This prevents the screen jumping by having accurately sized placeholders in place while content loads
There are 4 variants that mirror common UI elements
1. Heading
2. Circle
3. Text
4. Button
Usage
Use skeleton loading when data is expected to be loaded within 10 seconds and the content structure is predictable. It helps to give users an immediate visual cue that content is on the way, reducing the perception of waiting time.
Do not use skeleton loading to indicate a process (e.g download, upload, convert file). Instead, show a progress bar.
Available platforms
|
Platform |
Available |
|---|---|
|
Figma |
v1+ |
|
Web (@ovotech/element) |
v1+ |
|
App (@ovotech/element-native) |
❌ |
Related
External links