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

🙂 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).

@MisRob

Hi @MisRob I would like to work on this issue

@vijay-x-Raj

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

@MisRob

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

@vtushar06

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.

@rtibbles

Okay no problem @rtibbles.

@vijay-x-Raj

We haven't heard back from @vijay-x-Raj for over a month - unassigning.

@MisRob

Hi @MisRob, I want to give this a try, if possible I would love to contribute to this.

I have submitted a pull request addressing this issue:

The fix introduces a new <StudioLargeLoader> component built on top of <KCircularLoader>, and replaces old Vuetify-based loaders.

Updated ChannelSetModal.vue to use <StudioLargeLoader>.
Updated Storage/index.vue to use <StudioLargeLoader>.

The loaders have been tested and are functioning correctly with a modern, consistent design.

@nishatalam24

Thank you @nishatalam24! We will assign the PR to someone on our team for review. Please anticipate that you may not get review comments until next week.

@nishatalam24

We haven't heard from @nishatalam24 for a long time already. Agreed with @akolson that we will unassign and let someone else to complete this task. For a new assignee - you will need to work in a new branch, but please refer to #5388 and follow existing @akolson's review carefully.

@MisRob

Hi @MisRob I would like to work on this issue:)

@Prashant-thakur77

Assigned, thank you @Prashant-thakur77

@Prashant-thakur77

Same as with the other issue @Prashant-thakur77, we'd very much appreciated if you could have a look at @akolson's review on the attempt from another contributor. Linked above.

@MisRob

Hi @MisRob we have to create a test file for StudioLargeLoader?

@Prashant-thakur77

I don't think so @Prashant-thakur77 - it's just a wrapper around KCircularLoader (which we don't want to test from Studio itself - it's KDS responsibility). Thanks for asking - appreciated.

Just Raised the pr:) for this issue.

@Prashant-thakur77

Hi @Prashant-thakur77, Thanks for contributing .We will assign a reviewer for your PR soon!

Navigation Menu

Repository navigation

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

Summary

How to get there

Guidance

Out of Scope

Expected UI/UX changes

Acceptance criteria

10 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

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

Description

Summary

How to get there

Guidance

Out of Scope

Expected UI/UX changes

Acceptance criteria

Activity

vijay-x-Raj commented on Aug 6, 2025

bjester commented on Aug 6, 2025

vtushar06 commented on Aug 20, 2025

rtibbles commented on Aug 20, 2025

vtushar06 commented on Aug 21, 2025

MisRob commented on Sep 10, 2025

vtushar06 commented on Sep 10, 2025

10 remaining items

nishatalam24 commented on Sep 13, 2025

marcellamaki commented on Sep 15, 2025

MisRob commented on Oct 20, 2025

Prashant-thakur77 commented on Oct 21, 2025

MisRob commented on Oct 21, 2025

MisRob commented on Oct 21, 2025

Prashant-thakur77 commented on Oct 22, 2025

MisRob commented on Oct 22, 2025

Prashant-thakur77 commented on Oct 23, 2025

AllanOXDi commented on Oct 23, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions