From 656ae22f4f70fae51e3ce2c9361f9e3dcbf27276 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Wed, 22 Oct 2025 22:29:10 +0530
Subject: [PATCH 1/5] Updated channelSetModal

---
 .../channelList/views/ChannelSet/ChannelSetModal.vue        | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetModal.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetModal.vue
index 5c7a980035..66485af0cc 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetModal.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetModal.vue
@@ -73,7 +73,7 @@
 
               <!-- Channel list section -->
               <VCardText v-if="loadingChannels">
-                <LoadingText />
+                <StudioLargeLoader />
               </VCardText>
               <div
                 v-else
@@ -206,7 +206,7 @@
   import CopyToken from 'shared/views/CopyToken';
   import FullscreenModal from 'shared/views/FullscreenModal';
   import Tabs from 'shared/views/Tabs';
-  import LoadingText from 'shared/views/LoadingText';
+  import StudioLargeLoader from 'shared/views/StudioLargeLoader';
 
   const formMixin = generateFormMixin({
     name: {
@@ -223,7 +223,7 @@
       ChannelItem,
       FullscreenModal,
       Tabs,
-      LoadingText,
+      StudioLargeLoader,
     },
     mixins: [formMixin, constantsTranslationMixin, routerMixin],
     props: {

From 1bc4f7f3e2e470ebb4647a4f073e683ce79b5b42 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Wed, 22 Oct 2025 22:32:12 +0530
Subject: [PATCH 2/5] Made StudioLargeLoader

---
 .../shared/views/StudioLargeLoader.vue        | 28 +++++++++++++++++++
 1 file changed, 28 insertions(+)
 create mode 100644 contentcuration/contentcuration/frontend/shared/views/StudioLargeLoader.vue

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioLargeLoader.vue b/contentcuration/contentcuration/frontend/shared/views/StudioLargeLoader.vue
new file mode 100644
index 0000000000..7c6b7262b4
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioLargeLoader.vue
@@ -0,0 +1,28 @@
+<template>
+
+  <div class="studio-large-loader">
+    <KCircularLoader :size="70" />
+  </div>
+
+</template>
+
+
+<script>
+
+  import KCircularLoader from 'kolibri-design-system/lib/loaders/KCircularLoader.vue';
+
+  export default {
+    name: 'StudioLargeLoader',
+    components: { KCircularLoader },
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  .studio-large-loader {
+    padding: 24px;
+  }
+
+</style>

From 72c35b5e5b09efe5778d232b0b8a455ec4787afb Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Wed, 22 Oct 2025 22:33:01 +0530
Subject: [PATCH 3/5] Updated storage Loader

---
 .../frontend/settings/pages/Storage/index.vue       | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/settings/pages/Storage/index.vue b/contentcuration/contentcuration/frontend/settings/pages/Storage/index.vue
index b551814440..1df7cbb77e 100644
--- a/contentcuration/contentcuration/frontend/settings/pages/Storage/index.vue
+++ b/contentcuration/contentcuration/frontend/settings/pages/Storage/index.vue
@@ -47,12 +47,7 @@
         </KFixedGridItem>
       </template>
     </KFixedGrid>
-    <div
-      v-else
-      class="circular-loader"
-    >
-      <KCircularLoader size="70" />
-    </div>
+    <StudioLargeLoader v-else />
 
     <div class="storage-request">
       <h2 ref="requestheader">
@@ -115,10 +110,14 @@
   import { fileSizeMixin, constantsTranslationMixin } from 'shared/mixins';
   import { ContentKindsList, ContentKindsNames } from 'shared/leUtils/ContentKinds';
   import theme from 'shared/vuetify/theme';
+  import StudioLargeLoader from 'shared/views/StudioLargeLoader';
 
   export default {
     name: 'Storage',
-    components: { RequestForm },
+    components: {
+      RequestForm,
+      StudioLargeLoader,
+    },
     mixins: [fileSizeMixin, constantsTranslationMixin],
     data() {
       return {

From fd96693b02c26eb828fa85179112e90b117d96b6 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Fri, 24 Oct 2025 10:45:45 +0530
Subject: [PATCH 4/5] Changed class to large-loader and removed kds imports

---
 .../frontend/shared/views/StudioLargeLoader.vue            | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioLargeLoader.vue b/contentcuration/contentcuration/frontend/shared/views/StudioLargeLoader.vue
index 7c6b7262b4..ccb4715343 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioLargeLoader.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioLargeLoader.vue
@@ -1,6 +1,6 @@
 <template>
 
-  <div class="studio-large-loader">
+  <div class="large-loader">
     <KCircularLoader :size="70" />
   </div>
 
@@ -9,11 +9,8 @@
 
 <script>
 
-  import KCircularLoader from 'kolibri-design-system/lib/loaders/KCircularLoader.vue';
-
   export default {
     name: 'StudioLargeLoader',
-    components: { KCircularLoader },
   };
 
 </script>
@@ -21,7 +18,7 @@
 
 <style lang="scss" scoped>
 
-  .studio-large-loader {
+  .large-loader {
     padding: 24px;
   }
 

From 5aa0a4e3df789972d94c1045230f466bc4af125a Mon Sep 17 00:00:00 2001
From: Michaela Robosova <robosovam@gmail.com>
Date: Fri, 24 Oct 2025 09:15:39 +0200
Subject: [PATCH 5/5] Optimize loading experience

- Use minimum visible time to prevent from jarring ux
- Use min height to prevent from content shifts
---
 .../views/ChannelSet/ChannelSetModal.vue            |  9 ++++++---
 .../ChannelSet/__tests__/channelSetModal.spec.js    |  7 +++++++
 .../frontend/settings/pages/Storage/index.vue       | 13 +++++++++++--
 .../frontend/shared/views/StudioLargeLoader.vue     |  4 ++++
 4 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetModal.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetModal.vue
index 66485af0cc..93cdb95fb4 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetModal.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetModal.vue
@@ -72,9 +72,7 @@
               </p>
 
               <!-- Channel list section -->
-              <VCardText v-if="loadingChannels">
-                <StudioLargeLoader />
-              </VCardText>
+              <StudioLargeLoader v-if="show('collections', loadingChannels, 500)" />
               <div
                 v-else
                 fluid
@@ -197,6 +195,7 @@
 
   import { set } from 'vue';
   import { mapGetters, mapActions } from 'vuex';
+  import useKShow from 'kolibri-design-system/lib/composables/useKShow';
   import difference from 'lodash/difference';
   import { RouteNames } from '../../constants';
   import ChannelItem from './ChannelItem';
@@ -226,6 +225,10 @@
       StudioLargeLoader,
     },
     mixins: [formMixin, constantsTranslationMixin, routerMixin],
+    setup() {
+      const { show } = useKShow();
+      return { show };
+    },
     props: {
       channelSetId: {
         type: String,
diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/__tests__/channelSetModal.spec.js b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/__tests__/channelSetModal.spec.js
index 0d4b77f33a..a1dd15c4fa 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/__tests__/channelSetModal.spec.js
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/__tests__/channelSetModal.spec.js
@@ -11,6 +11,13 @@ import ChannelSetModal from '../ChannelSetModal';
 import channel from 'shared/vuex/channel';
 import storeFactory from 'shared/vuex/baseStore';
 
+jest.mock('kolibri-design-system/lib/composables/useKShow', () => ({
+  __esModule: true,
+  default: () => ({
+    show: () => false, // skip loading state
+  }),
+}));
+
 const localVue = createLocalVue();
 localVue.use(Vuex);
 localVue.use(VueRouter);
diff --git a/contentcuration/contentcuration/frontend/settings/pages/Storage/index.vue b/contentcuration/contentcuration/frontend/settings/pages/Storage/index.vue
index 1df7cbb77e..cc6ea9ad14 100644
--- a/contentcuration/contentcuration/frontend/settings/pages/Storage/index.vue
+++ b/contentcuration/contentcuration/frontend/settings/pages/Storage/index.vue
@@ -13,8 +13,13 @@
       }}
     </div>
 
+    <!-- Set minHeight to prevent from content shifting after loaded -->
+    <StudioLargeLoader
+      v-if="show('storageUse', !storageUseByKind, 500)"
+      :style="{ minHeight: '370px' }"
+    />
     <KFixedGrid
-      v-if="storageUseByKind !== null"
+      v-else
       numCols="8"
       gutter="10"
     >
@@ -47,7 +52,6 @@
         </KFixedGridItem>
       </template>
     </KFixedGrid>
-    <StudioLargeLoader v-else />
 
     <div class="storage-request">
       <h2 ref="requestheader">
@@ -106,6 +110,7 @@
 <script>
 
   import { mapGetters } from 'vuex';
+  import useKShow from 'kolibri-design-system/lib/composables/useKShow';
   import RequestForm from './RequestForm';
   import { fileSizeMixin, constantsTranslationMixin } from 'shared/mixins';
   import { ContentKindsList, ContentKindsNames } from 'shared/leUtils/ContentKinds';
@@ -119,6 +124,10 @@
       StudioLargeLoader,
     },
     mixins: [fileSizeMixin, constantsTranslationMixin],
+    setup() {
+      const { show } = useKShow();
+      return { show };
+    },
     data() {
       return {
         showRequestForm: false,
diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioLargeLoader.vue b/contentcuration/contentcuration/frontend/shared/views/StudioLargeLoader.vue
index ccb4715343..00251edf15 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioLargeLoader.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioLargeLoader.vue
@@ -19,6 +19,10 @@
 <style lang="scss" scoped>
 
   .large-loader {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
     padding: 24px;
   }