[Remove Vuetify from Studio] Collection channels loader in Channels - New collection

[MisRob]

🙂 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:

studio/contentcuration/contentcuration/frontend/settings/pages/Storage/index.vue

Lines 50 to 55 in 294f4b8

	<div
	v-else
	class="circular-loader"
	>
	<KCircularLoader size="70" />
	</div>

Do not modify LoadingText.

How to get there

• In code, temporarily modify template condition loadingChannels to truthy
• Login as user@a.com 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).

[vijay-x-Raj]

Hi @MisRob I would like to work on this issue

[bjester]

@vijay-x-Raj I'll assign you. Thank you

[vtushar06]

Hi @MisRob @bjester — if this issue is still open, I’d like to take it on. If the current assignment isn’t active, could you reassign it to me? I’ve read the contributing guidelines and the project guidance, Thanks

[rtibbles]

Hi @vtushar06 I've assigned you to this issue: #5296 we can give @vijay-x-Raj a little more time here before we unassign - we like to give people a month to get to grips with issues.

[vtushar06]

Okay no problem @rtibbles.