Open
Description
🙂 Looking for an issue? Welcome! This issue is open for contribution. If this is the first time you’re requesting an issue, please:
- Read Contributing guidelines carefully. Pay extra attention to Using generative AI. Pull requests and comments that don’t follow the guidelines won’t be answered.
- Confirm that you’ve read the guidelines in your comment.
Sub-issue of #5060.
Complexity: Low
Summary
Migrate the loader in Settings > Storage from Vuetify to Kolibri Design System.
shared/views/LoadingText, which is built with several Vuetify components, is currently used to display the loader. To remove this Vuetify dependency from Storage/index, replace the usage of LoadingText in this specific location with KCircularLoader. Do not modify LoadingText itself.
How to get there
- Login as
[email protected]with passworda - Go to Settings > Storage
- In code, temporarily modify template conditions or set
storageUseByKindtofalseto display the loader
Guidance
- Read the project this issue is part of
Out of Scope
- Do not refactor any other areas of the codebase
- Do not modify
LoadingText
Expected UI/UX changes
- Minor visual differences naturally stemming from the use of KDS
- Easing of animation
Acceptance criteria
General
- The specification above is followed.
- Except for "Expected UI/UX changes," there are no functional or visual differences in user experience.
- All user interactions are manually tested with no regressions.
- Pull request includes screenshots.
a11y and i18n
See the project's "Guidance" for useful references.
- Implementation meets a11y standards
- All components are LTR and RTL compliant
- All user-facing strings are translated properly
- The
notranslateclass been added to elements that shouldn't be translated by Google Chrome's automatic translation feature (e.g. user-generated text) - Mobile experience is reasonable
Unit tests
- If there is a unit test suite already, it is meaningfully updated (even if tests don't fail)
- If there is no unit test suite, a new one is created