mirror of
https://github.com/opf/openproject.git
synced 2026-06-14 03:30:14 +00:00
Henriette Darge
49c1db84ac
* Document loading indicators * Minor updates --------- Co-authored-by: Parimal Satyal <88370597+psatyal@users.noreply.github.com>
63 lines
2.0 KiB
Plaintext
63 lines
2.0 KiB
Plaintext
This document describes the available loading indicators in our application and outlines when and how to use them appropriately.
|
|
|
|
Currently supported loading components:
|
|
|
|
- `Primer::Alpha::SkeletonBox`
|
|
- `Primer::Beta::Spinner`
|
|
- `LoadingIndicator` ⚠️ **Deprecated**
|
|
|
|
---
|
|
|
|
## SkeletonBox
|
|
|
|
### Description
|
|
|
|
`SkeletonBox` displays a rectangular placeholder with a subtle shimmering animation moving from left to right. Width and height can be configured. Multiple `SkeletonBox` elements can be arranged side-by-side or stacked vertically.
|
|
|
|
This component is ideal for visually representing the structure of content that is currently loading.
|
|
|
|
<%= embed OpenProject::Common::LoadingIndicatorsPreview, :skeleton_box %>
|
|
|
|
### When to Use
|
|
|
|
Use `SkeletonBox` when:
|
|
|
|
- You know the approximate layout of the content to be loaded.
|
|
- You want to avoid layout shifts after content loads.
|
|
- You're loading a larger block of content (e.g., cards, list items, sections).
|
|
|
|
### Example Use Case
|
|
|
|
* Loading activity entries in the activity tab
|
|
* Loading the notifications in notification center
|
|
|
|
## Spinner
|
|
|
|
### Description
|
|
|
|
`Spinner` is a small circular loading indicator with a continuous spinning animation.
|
|
|
|
<%= embed OpenProject::Common::LoadingIndicatorsPreview, :spinner %>
|
|
|
|
### When to Use
|
|
|
|
Use `Spinner` when:
|
|
|
|
- The content being loaded is bound within a small container
|
|
- The content layout is not known at all
|
|
- You're waiting for a server response without a visual response to show (eg. content will not be replaced)
|
|
|
|
### Example Use Case
|
|
|
|
* Use a Spinner inside a search input field while fetching suggestions from the server.
|
|
|
|
### LoadingIndicator (Deprecated)
|
|
|
|
⚠️ **Do not use** ⚠️
|
|
|
|
<%= embed OpenProject::Deprecated::LoadingIndicatorPreview, :default %>
|
|
|
|
The LoadingIndicator component was implemented in Angular and is now considered deprecated.
|
|
|
|
It does not conform to current design or technical standards. All usages should be replaced with either `SkeletonBox` or `Spinner` depending on context.
|