Align loading states and documentation to the latest design guidance#1218
Open
MisRob wants to merge 1 commit intolearningequality:developfrom
Open
Align loading states and documentation to the latest design guidance#1218MisRob wants to merge 1 commit intolearningequality:developfrom
MisRob wants to merge 1 commit intolearningequality:developfrom
Conversation
Contributor
Percy Visual Test ResultsPercy Dashboard: View Detailed Report Environment:
Instructions for Reviewers:
|
MisRob
commented
Mar 16, 2026
| // https://design-system.learningequality.org/loaders | ||
| const LOADING_DELAY = 300; | ||
| const MIN_LOADING_TIME = 300; | ||
| const MIN_LOADING_TIME = 400; |
Member
Author
There was a problem hiding this comment.
The previous 300ms wasn't intentional here ~ in one of my previous PRs I intended to align it with the guidance that I was later going to introduce in this PR, but made a mistake.
to the latest design guidance
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Documentation
User experience
KCircularLoaderandKLinearLoaderdelay value with the guidance (change from 1s delay to 300ms delay)delay(search results), likely due to 1s being to long, impact will be minimal. I only see 3 places (here, here, and here) that have truthy value.Issue addressed
Based on past conversations with designers & recent fine-tuning loading state with Tomiwa during work on Studio. While delay and minimum visible time values may change, we've at least arrived to values that felt good enough as a universal guidance for majority of our use-cases.
However it only addresses KDS side. The idea is for future or refactored features to follow this guidance. To align all previously existing places fully, we'd need to make further updates in Kolibri.
Changelog
Description: Align minimum visible time value for card skeleton loader with the design guidance
Products impact: ux
Addresses: -
Components:
KCardGrid,KCardBreaking: no
Impacts a11y: -
Guidance: -
Description: Align
delayvalue forKCircularLoaderandKLinearLoaderwith the design guidanceProducts impact: ux
Addresses: -
Components:
,KLinearLoader`Breaking: no
Impacts a11y: -
Guidance: -
Description: Updates the Loaders documentation page to the latest design guidance. Centralizes general guidance on the Loaders page, while leaving component pages to focus only on Vue-specific usage. Removes duplicate or obsolete sections from other pages related to loading states.
Products impact: documentation
Addresses: -
Components: Loaders page,
KCircularLoader,KLinearLoader,useKShow,KCardGrid,KCardBreaking: no
Impacts a11y: -
Guidance: -
Steps to test
Preview affected places at the following pages: