🙂 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

Remove Vuetify from collection channels loader in Channels > Collections > New collection:

shared/views/LoadingText, which is built with several Vuetify components, is currently used to display the loader.

To remove this Vuetify dependency from ChannelSetModal:

• Create a new component shared/views/StudioLargeLoader.vue that doesn't use Vuetify components but instead:
  • Uses KCircularLoader
  • Has custom styles for positioning and spacing
  • Visually gives exactly the same result as LoadingText
  • Do not re-implement LoadingText's absolute prop
• Replace the usage of LoadingText in this specific location with StudioLargeLoader
• Additionally, also replace this div and KCircularLoader in Settings > Storage overview by StudioLargeLoader:

Do not modify LoadingText.

How to get there

• In code, temporarily modify template condition loadingChannels to truthy
• Login as [email protected] with password a
• Go to Channels > Collections
• Click New collection button

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 (preview with pnpm run devserver since :hot doesn't render RTL properly)
• All user-facing strings are translated properly
• The notranslate class 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. Do not use obsolete @vue/test-utils approach. Instead, use @testing-library/vue (Vue Testing Library).