From 9fd0f12a60b7e00b9626347ba8a2e9fd4f100fcd Mon Sep 17 00:00:00 2001
From: ozer550 <prathameshd419@gmail.com>
Date: Fri, 3 Nov 2023 11:32:23 +0530
Subject: [PATCH 1/4] move Welcome_Modal from top level to index level

---
 .../device/assets/src/views/DeviceIndex.vue   |  25 +-
 .../src/views/ManageContentPage/index.vue     | 157 ++++++----
 .../learn/assets/src/views/LearnIndex.vue     |  28 +-
 .../assets/src/views/LibraryPage/index.vue    | 285 ++++++++++--------
 4 files changed, 254 insertions(+), 241 deletions(-)

diff --git a/kolibri/plugins/device/assets/src/views/DeviceIndex.vue b/kolibri/plugins/device/assets/src/views/DeviceIndex.vue
index 6b663251d9b..d439440ee92 100644
--- a/kolibri/plugins/device/assets/src/views/DeviceIndex.vue
+++ b/kolibri/plugins/device/assets/src/views/DeviceIndex.vue
@@ -16,12 +16,7 @@
       />
     </transition>
 
-    <transition name="delay-entry">
-      <PostSetupModalGroup
-        v-if="welcomeModalVisible"
-        @cancel="hideWelcomeModal"
-      />
-    </transition>
+
 
     <router-view />
   </NotificationsRoot>
@@ -40,17 +35,14 @@
   import redirectBrowser from 'kolibri.utils.redirectBrowser';
   import urls from 'kolibri.urls';
   import { PageNames } from '../constants';
-  import PostSetupModalGroup from './PostSetupModalGroup';
+
   import PinAuthenticationModal from './PinAuthenticationModal';
   import plugin_data from 'plugin_data';
 
-  const welcomeDismissalKey = 'DEVICE_WELCOME_MODAL_DISMISSED';
-
   export default {
     name: 'DeviceIndex',
     components: {
       NotificationsRoot,
-      PostSetupModalGroup,
       PinAuthenticationModal,
     },
     mixins: [commonCoreStrings],
@@ -63,9 +55,6 @@
     computed: {
       ...mapGetters(['isUserLoggedIn', 'userFacilityId']),
       ...mapState(['authenticateWithPin', 'grantPluginAccess']),
-      ...mapState({
-        welcomeModalVisibleState: 'welcomeModalVisible',
-      }),
       facilities() {
         return this.$store.state.core.facilities;
       },
@@ -82,12 +71,6 @@
           (plugin_data.allowGuestAccess && this.$store.getters.allowAccess) || this.isUserLoggedIn
         );
       },
-      welcomeModalVisible() {
-        return (
-          this.welcomeModalVisibleState &&
-          window.localStorage.getItem(welcomeDismissalKey) !== 'true'
-        );
-      },
       pageName() {
         return this.$route.name;
       },
@@ -111,10 +94,6 @@
       },
     },
     methods: {
-      hideWelcomeModal() {
-        window.localStorage.setItem(welcomeDismissalKey, true);
-        this.$store.commit('SET_WELCOME_MODAL_VISIBLE', false);
-      },
       closePinModal() {
         redirectBrowser(urls['kolibri:kolibri.plugins.learn:learn']());
         return (this.showModal = false);
diff --git a/kolibri/plugins/device/assets/src/views/ManageContentPage/index.vue b/kolibri/plugins/device/assets/src/views/ManageContentPage/index.vue
index 492d54723ce..2982c8d9339 100644
--- a/kolibri/plugins/device/assets/src/views/ManageContentPage/index.vue
+++ b/kolibri/plugins/device/assets/src/views/ManageContentPage/index.vue
@@ -1,79 +1,88 @@
 <template>
 
-  <DeviceAppBarPage :title="pageTitle">
+  <div>
+    <transition name="delay<-entry">
+      <PostSetupModalGroup
+        v-if="welcomeModalVisible && !areChannelsImported"
+        @cancel="hideWelcomeModal"
+      />
+    </transition>
 
-    <KPageContainer class="device-container">
+    <DeviceAppBarPage :title="pageTitle">
 
-      <div>
-        <HeaderWithOptions :headerText="coreString('channelsLabel')">
-          <template #options>
-            <KButtonGroup>
-              <!-- Margins to and bottom adds space when buttons are vertically stacked -->
-              <KButton
-                v-if="channelsAreInstalled"
-                hasDropdown
-                appearance="raised-button"
-                :text="coreString('optionsLabel')"
-                :style="{ margin: '16px 8px -16px 0' }"
-              >
-                <template #menu>
-                  <KDropdownMenu
-                    position="bottom left"
-                    :options="dropdownOptions"
-                    @select="handleSelect"
-                  />
-                </template>
-              </KButton>
-              <KButton
-                :text="$tr('import')"
-                style="margin-top: 16px; margin-bottom: -16px;"
-                :primary="true"
-                @click="startImportWorkflow()"
-              />
-            </KButtonGroup>
-          </template>
-        </HeaderWithOptions>
+      <KPageContainer class="device-container">
+
+        <div>
+          <HeaderWithOptions :headerText="coreString('channelsLabel')">
+            <template #options>
+              <KButtonGroup>
+                <!-- Margins to and bottom adds space when buttons are vertically stacked -->
+                <KButton
+                  v-if="channelsAreInstalled"
+                  hasDropdown
+                  appearance="raised-button"
+                  :text="coreString('optionsLabel')"
+                  :style="{ margin: '16px 8px -16px 0' }"
+                >
+                  <template #menu>
+                    <KDropdownMenu
+                      position="bottom left"
+                      :options="dropdownOptions"
+                      @select="handleSelect"
+                    />
+                  </template>
+                </KButton>
+                <KButton
+                  :text="$tr('import')"
+                  style="margin-top: 16px; margin-bottom: -16px;"
+                  :primary="true"
+                  @click="startImportWorkflow()"
+                />
+              </KButtonGroup>
+            </template>
+          </HeaderWithOptions>
 
-        <TasksBar
-          v-if="managedTasks.length > 0"
-          :tasks="managedTasks"
-          :taskManagerLink="{ name: 'MANAGE_TASKS' }"
-          @clearall="handleClickClearAll"
-        />
+          <TasksBar
+            v-if="managedTasks.length > 0"
+            :tasks="managedTasks"
+            :taskManagerLink="{ name: 'MANAGE_TASKS' }"
+            @clearall="handleClickClearAll"
+          />
 
-        <p v-if="!channelsAreInstalled && !channelListLoading">
-          {{ $tr('emptyChannelListMessage') }}
-        </p>
+          <p v-if="!channelsAreInstalled && !channelListLoading">
+            {{ $tr('emptyChannelListMessage') }}
+          </p>
 
-        <div class="channels-list">
-          <KCircularLoader v-if="channelListLoading" />
-          <div v-else>
-            <ChannelPanel
-              v-for="channel in sortedChannels"
-              :key="channel.id"
-              :channel="channel"
-              :disabled="channelIsBeingDeleted(channel.id)"
-              :showNewLabel="showNewLabel(channel.id)"
-              @select_delete="deleteChannelId = channel.id"
-              @select_manage="handleSelectManage(channel.id)"
-            />
+          <div class="channels-list">
+            <KCircularLoader v-if="channelListLoading" />
+            <div v-else>
+              <ChannelPanel
+                v-for="channel in sortedChannels"
+                :key="channel.id"
+                :channel="channel"
+                :disabled="channelIsBeingDeleted(channel.id)"
+                :showNewLabel="showNewLabel(channel.id)"
+                @select_delete="deleteChannelId = channel.id"
+                @select_manage="handleSelectManage(channel.id)"
+              />
+            </div>
           </div>
-        </div>
 
-        <SelectTransferSourceModal :pageName="pageName" />
+          <SelectTransferSourceModal :pageName="pageName" />
 
-        <DeleteChannelModal
-          v-if="deleteChannelId"
-          :channelTitle="selectedChannelTitle"
-          @submit="handleDeleteChannel"
-          @cancel="deleteChannelId = null"
-        />
+          <DeleteChannelModal
+            v-if="deleteChannelId"
+            :channelTitle="selectedChannelTitle"
+            @submit="handleDeleteChannel"
+            @cancel="deleteChannelId = null"
+          />
 
-      </div>
+        </div>
 
-    </KPageContainer>
+      </KPageContainer>
 
-  </DeviceAppBarPage>
+    </DeviceAppBarPage>
+  </div>
 
 </template>
 
@@ -94,11 +103,14 @@
   import { PageNames } from '../../constants';
   import HeaderWithOptions from '../HeaderWithOptions';
   import { deviceString } from '../commonDeviceStrings';
+  import PostSetupModalGroup from '../PostSetupModalGroup';
   import SelectTransferSourceModal from './SelectTransferSourceModal';
   import ChannelPanel from './ChannelPanel/WithSizeAndOptions';
   import DeleteChannelModal from './DeleteChannelModal';
   import TasksBar from './TasksBar';
 
+  const welcomeDismissalKey = 'DEVICE_WELCOME_MODAL_DISMISSED';
+
   export default {
     name: 'ManageContentPage',
     metaInfo() {
@@ -109,6 +121,7 @@
     components: {
       DeviceAppBarPage,
       ChannelPanel,
+      PostSetupModalGroup,
       DeleteChannelModal,
       HeaderWithOptions,
       SelectTransferSourceModal,
@@ -132,6 +145,9 @@
       ]),
       ...mapState('manageContent/wizard', ['pageName']),
       ...mapState('manageContent', ['channelListLoading']),
+      ...mapState({
+        welcomeModalVisibleState: 'welcomeModalVisible',
+      }),
       pageTitle() {
         return deviceString('deviceManagementTitle');
       },
@@ -166,6 +182,17 @@
           },
         ];
       },
+      welcomeModalVisible() {
+        return (
+          this.welcomeModalVisibleState &&
+          window.localStorage.getItem(welcomeDismissalKey) !== 'true'
+        );
+      },
+      areChannelsImported() {
+        console.log('debugggggggggg');
+        console.log(this.installedChannelsWithResources);
+        return this.installedChannelsWithResources.length > 0;
+      },
     },
     watch: {
       installedChannelsWithResources: {
@@ -195,6 +222,10 @@
     },
     methods: {
       ...mapActions('manageContent', ['refreshChannelList', 'startImportWorkflow']),
+      hideWelcomeModal() {
+        window.localStorage.setItem(welcomeDismissalKey, true);
+        this.$store.commit('SET_WELCOME_MODAL_VISIBLE', false);
+      },
       handleSelect({ value }) {
         const nextRoute = {
           DELETE: PageNames.DELETE_CHANNELS,
diff --git a/kolibri/plugins/learn/assets/src/views/LearnIndex.vue b/kolibri/plugins/learn/assets/src/views/LearnIndex.vue
index 75326d801b7..9fd8c536933 100644
--- a/kolibri/plugins/learn/assets/src/views/LearnIndex.vue
+++ b/kolibri/plugins/learn/assets/src/views/LearnIndex.vue
@@ -4,13 +4,6 @@
     :authorized="userIsAuthorized"
     authorizedRole="registeredUser"
   >
-    <transition name="delay-entry">
-      <PostSetupModalGroup
-        v-if="welcomeModalVisible"
-        isOnMyOwnUser
-        @cancel="hideWelcomeModal"
-      />
-    </transition>
     <router-view :loading="loading" />
   </NotificationsRoot>
 
@@ -23,30 +16,18 @@
   import NotificationsRoot from 'kolibri.coreVue.components.NotificationsRoot';
   import plugin_data from 'plugin_data';
   import { PageNames } from '../constants';
-  import PostSetupModalGroup from '../../../../device/assets/src/views/PostSetupModalGroup.vue';
-
-  const welcomeDismissalKey = 'DEVICE_WELCOME_MODAL_DISMISSED';
 
   export default {
     name: 'LearnIndex',
     components: {
       NotificationsRoot,
-      PostSetupModalGroup,
     },
     computed: {
       ...mapGetters(['isUserLoggedIn']),
-      ...mapState({
-        welcomeModalVisibleState: 'welcomeModalVisible',
-      }),
       ...mapState({
         loading: state => state.core.loading,
       }),
-      welcomeModalVisible() {
-        return (
-          this.welcomeModalVisibleState &&
-          window.localStorage.getItem(welcomeDismissalKey) !== 'true'
-        );
-      },
+
       userIsAuthorized() {
         if (this.pageName === PageNames.BOOKMARKS) {
           return this.isUserLoggedIn;
@@ -56,12 +37,7 @@
         );
       },
     },
-    methods: {
-      hideWelcomeModal() {
-        window.localStorage.setItem(welcomeDismissalKey, true);
-        this.$store.commit('SET_WELCOME_MODAL_VISIBLE', false);
-      },
-    },
+    methods: {},
   };
 
 </script>
diff --git a/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue b/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue
index e56a4419d02..200efa587fe 100644
--- a/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue
+++ b/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue
@@ -1,144 +1,153 @@
 <template>
 
-  <LearnAppBarPage
-    :appBarTitle="appBarTitle"
-    :loading="rootNodesLoading"
-    :appearanceOverrides="{}"
-    :deviceId="deviceId"
-    :route="back"
-  >
-    <main
-      class="main-grid"
-      :style="gridOffset"
-    >
-      <div v-if="!windowIsLarge && (!isLocalLibraryEmpty || deviceId)">
-        <KButton
-          icon="filter"
-          data-test="filter-button"
-          class="filter-button"
-          :text="coreString('filter')"
-          :primary="false"
-          @click="toggleSidePanelVisibility"
-        />
-      </div>
-      <!--
-        - If search is loading, show loader.
-        - If there are no search results, show channels and resumable
-        content.
-        - Otherwise, show search results.
-      -->
-      <KCircularLoader
-        v-if="rootNodesLoading || searchLoading"
-        class="loader"
-        type="indeterminate"
-        :delay="false"
+  <div>
+    <transition name="delay-entry">
+      <PostSetupModalGroup
+        v-if="welcomeModalVisible"
+        isOnMyOwnUser
+        @cancel="hideWelcomeModal"
       />
-      <div
-        v-else-if="!displayingSearchResults && !rootNodesLoading"
-        data-test="channels"
+    </transition>
+    <LearnAppBarPage
+      :appBarTitle="appBarTitle"
+      :loading="rootNodesLoading"
+      :appearanceOverrides="{}"
+      :deviceId="deviceId"
+      :route="back"
+    >
+      <main
+        class="main-grid"
+        :style="gridOffset"
       >
-        <h1 class="channels-label">
-          {{ channelsLabel }}
-        </h1>
-        <p
-          v-if="isLocalLibraryEmpty"
-          data-test="nothing-in-lib-label"
-          class="nothing-in-lib-label"
-        >
-          {{ coreString('nothingInLibraryLearner') }}
-        </p>
-        <ChannelCardGroupGrid
-          v-if="!isLocalLibraryEmpty"
-          data-test="channel-cards"
-          class="grid"
-          :contents="rootNodes"
-          :deviceId="deviceId"
+        <div v-if="!windowIsLarge && (!isLocalLibraryEmpty || deviceId)">
+          <KButton
+            icon="filter"
+            data-test="filter-button"
+            class="filter-button"
+            :text="coreString('filter')"
+            :primary="false"
+            @click="toggleSidePanelVisibility"
+          />
+        </div>
+        <!--
+          - If search is loading, show loader.
+          - If there are no search results, show channels and resumable
+          content.
+          - Otherwise, show search results.
+        -->
+        <KCircularLoader
+          v-if="rootNodesLoading || searchLoading"
+          class="loader"
+          type="indeterminate"
+          :delay="false"
         />
-        <!-- ResumableContentGrid mostly handles whether it renders or not internally !-->
-        <!-- but we conditionalize it based on whether we are on another device's library page !-->
-        <ResumableContentGrid
-          v-if="!deviceId"
-          data-test="resumable-content"
+        <div
+          v-else-if="!displayingSearchResults && !rootNodesLoading"
+          data-test="channels"
+        >
+          <h1 class="channels-label">
+            {{ channelsLabel }}
+          </h1>
+          <p
+            v-if="isLocalLibraryEmpty"
+            data-test="nothing-in-lib-label"
+            class="nothing-in-lib-label"
+          >
+            {{ coreString('nothingInLibraryLearner') }}
+          </p>
+          <ChannelCardGroupGrid
+            v-if="!isLocalLibraryEmpty"
+            data-test="channel-cards"
+            class="grid"
+            :contents="rootNodes"
+            :deviceId="deviceId"
+          />
+          <!-- ResumableContentGrid mostly handles whether it renders or not internally !-->
+          <!-- but we conditionalize it based on whether we are on another device's library page!-->
+          <ResumableContentGrid
+            v-if="!deviceId"
+            data-test="resumable-content"
+            :currentCardViewStyle="currentCardViewStyle"
+            @setCardStyle="style => currentCardViewStyle = style"
+            @setSidePanelMetadataContent="content => metadataSidePanelContent = content"
+          />
+          <!-- Other Libraries -->
+          <OtherLibraries
+            v-if="!deviceId && isUserLoggedIn"
+            data-test="other-libraries"
+            :injectedtr="injecttr"
+          />
+
+        </div>
+
+        <SearchResultsGrid
+          v-else-if="displayingSearchResults"
+          data-test="search-results"
+          :allowDownloads="allowDownloads"
+          :results="results"
+          :removeFilterTag="removeFilterTag"
+          :clearSearch="clearSearch"
+          :moreLoading="moreLoading"
+          :searchMore="searchMore"
           :currentCardViewStyle="currentCardViewStyle"
+          :searchTerms="searchTerms"
+          :searchLoading="searchLoading"
+          :more="more"
           @setCardStyle="style => currentCardViewStyle = style"
           @setSidePanelMetadataContent="content => metadataSidePanelContent = content"
         />
-        <!-- Other Libraries -->
-        <OtherLibraries
-          v-if="!deviceId && isUserLoggedIn"
-          data-test="other-libraries"
-          :injectedtr="injecttr"
-        />
-
-      </div>
-
-      <SearchResultsGrid
-        v-else-if="displayingSearchResults"
-        data-test="search-results"
-        :allowDownloads="allowDownloads"
-        :results="results"
-        :removeFilterTag="removeFilterTag"
-        :clearSearch="clearSearch"
-        :moreLoading="moreLoading"
-        :searchMore="searchMore"
-        :currentCardViewStyle="currentCardViewStyle"
-        :searchTerms="searchTerms"
-        :searchLoading="searchLoading"
-        :more="more"
-        @setCardStyle="style => currentCardViewStyle = style"
-        @setSidePanelMetadataContent="content => metadataSidePanelContent = content"
+      </main>
+
+      <!-- Side Panels for filtering and searching  -->
+      <SearchFiltersPanel
+        v-if="(!isLocalLibraryEmpty || deviceId) && (windowIsLarge || mobileSidePanelIsOpen)"
+        ref="sidePanel"
+        v-model="searchTerms"
+        data-test="side-panel"
+        :width="`${sidePanelWidth}px`"
+        @close="toggleSidePanelVisibility"
       />
-    </main>
-
-    <!-- Side Panels for filtering and searching  -->
-    <SearchFiltersPanel
-      v-if="(!isLocalLibraryEmpty || deviceId) && (windowIsLarge || mobileSidePanelIsOpen)"
-      ref="sidePanel"
-      v-model="searchTerms"
-      data-test="side-panel"
-      :width="`${sidePanelWidth}px`"
-      @close="toggleSidePanelVisibility"
-    />
-
-    <!-- Side Panel for metadata -->
-    <SidePanelModal
-      v-if="metadataSidePanelContent"
-      data-test="side-panel-modal"
-      alignment="right"
-      @closePanel="metadataSidePanelContent = null"
-      @shouldFocusFirstEl="findFirstEl()"
-    >
-      <template
-        v-if="metadataSidePanelContent.learning_activities.length"
-        #header
+
+      <!-- Side Panel for metadata -->
+      <SidePanelModal
+        v-if="metadataSidePanelContent"
+        data-test="side-panel-modal"
+        alignment="right"
+        @closePanel="metadataSidePanelContent = null"
+        @shouldFocusFirstEl="findFirstEl()"
       >
-        <!-- Flex styles tested in ie11 and look good. Ensures good spacing between
-            multiple chips - not a common thing but just in case -->
-        <div
-          v-for="activity in metadataSidePanelContent.learning_activities"
-          :key="activity"
-          class="side-panel-chips"
-          :class="$computedClass({ '::after': {
-            content: '',
-            flex: 'auto'
-          } })"
+        <template
+          v-if="metadataSidePanelContent.learning_activities.length"
+          #header
         >
-          <LearningActivityChip
-            class="chip"
-            style="margin-left: 8px; margin-bottom: 8px;"
-            :kind="activity"
-          />
-        </div>
-      </template>
-
-      <BrowseResourceMetadata
-        ref="resourcePanel"
-        :content="metadataSidePanelContent"
-        :showLocationsInChannel="true"
-        :canDownloadExternally="canDownloadExternally && !deviceId"
-      />
-    </SidePanelModal>
-  </LearnAppBarPage>
+          <!-- Flex styles tested in ie11 and look good. Ensures good spacing between
+              multiple chips - not a common thing but just in case -->
+          <div
+            v-for="activity in metadataSidePanelContent.learning_activities"
+            :key="activity"
+            class="side-panel-chips"
+            :class="$computedClass({ '::after': {
+              content: '',
+              flex: 'auto'
+            } })"
+          >
+            <LearningActivityChip
+              class="chip"
+              style="margin-left: 8px; margin-bottom: 8px;"
+              :kind="activity"
+            />
+          </div>
+        </template>
+
+        <BrowseResourceMetadata
+          ref="resourcePanel"
+          :content="metadataSidePanelContent"
+          :showLocationsInChannel="true"
+          :canDownloadExternally="canDownloadExternally && !deviceId"
+        />
+      </SidePanelModal>
+    </LearnAppBarPage>
+  </div>
 
 </template>
 
@@ -153,6 +162,7 @@
   import useUser from 'kolibri.coreVue.composables.useUser';
   import samePageCheckGenerator from 'kolibri.utils.samePageCheckGenerator';
   import { ContentNodeResource } from 'kolibri.resources';
+  import { mapState } from 'vuex';
   import SidePanelModal from '../SidePanelModal';
   import SearchFiltersPanel from '../SearchFiltersPanel';
   import { KolibriStudioId, PageNames } from '../../constants';
@@ -172,10 +182,13 @@
   import LearningActivityChip from '../LearningActivityChip';
   import SearchResultsGrid from '../SearchResultsGrid';
   import LearnAppBarPage from '../LearnAppBarPage';
+  import PostSetupModalGroup from '../../../../../device/assets/src/views/PostSetupModalGroup.vue';
   import useChannels from './../../composables/useChannels';
   import ResumableContentGrid from './ResumableContentGrid';
   import OtherLibraries from './OtherLibraries';
 
+  const welcomeDismissalKey = 'DEVICE_WELCOME_MODAL_DISMISSED';
+
   export default {
     name: 'LibraryPage',
     metaInfo() {
@@ -193,6 +206,7 @@
       SearchFiltersPanel,
       LearnAppBarPage,
       OtherLibraries,
+      PostSetupModalGroup,
     },
     mixins: [commonLearnStrings, commonCoreStrings],
     setup(props) {
@@ -388,12 +402,21 @@
       };
     },
     computed: {
+      ...mapState({
+        welcomeModalVisibleState: 'welcomeModalVisible',
+      }),
       allowDownloads() {
         return this.canAddDownloads && Boolean(this.deviceId);
       },
       appBarTitle() {
         return this.learnString(this.deviceId ? 'exploreLibraries' : 'learnLabel');
       },
+      welcomeModalVisible() {
+        return (
+          this.welcomeModalVisibleState &&
+          window.localStorage.getItem(welcomeDismissalKey) !== 'true'
+        );
+      },
       channelsLabel() {
         if (this.deviceId) {
           if (this.deviceId === this.studioId) {
@@ -453,6 +476,10 @@
       }
     },
     methods: {
+      hideWelcomeModal() {
+        window.localStorage.setItem(welcomeDismissalKey, true);
+        this.$store.commit('SET_WELCOME_MODAL_VISIBLE', false);
+      },
       findFirstEl() {
         this.$refs.resourcePanel.focusFirstEl();
       },

From 1fe47591bdb09b9b4a216e8d3d34b8530ff67def Mon Sep 17 00:00:00 2001
From: ozer550 <prathameshd419@gmail.com>
Date: Fri, 10 Nov 2023 21:40:43 +0530
Subject: [PATCH 2/4] try RunNodes logic

---
 .../plugins/learn/assets/src/views/LibraryPage/index.vue   | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue b/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue
index 200efa587fe..13fc5a2d3b8 100644
--- a/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue
+++ b/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue
@@ -3,7 +3,7 @@
   <div>
     <transition name="delay-entry">
       <PostSetupModalGroup
-        v-if="welcomeModalVisible"
+        v-if="welcomeModalVisible && !areChannelsImported"
         isOnMyOwnUser
         @cancel="hideWelcomeModal"
       />
@@ -451,6 +451,11 @@
       studioId() {
         return KolibriStudioId;
       },
+      areChannelsImported() {
+        console.log('debugggggggggg');
+        console.log(this.rootNodes.length);
+        return this.rootNodes.length > 0;
+      },
     },
     watch: {
       rootNodes(newNodes) {

From 3040f7f6c306e11101e3d3c943d5909bdc98c2ed Mon Sep 17 00:00:00 2001
From: ozer550 <prathameshd419@gmail.com>
Date: Tue, 14 Nov 2023 21:03:19 +0530
Subject: [PATCH 3/4] add logic to remove buggy flashing

---
 .../src/views/ManageContentPage/index.vue     | 133 +++++++++---------
 .../assets/src/views/LibraryPage/index.vue    |   6 +-
 2 files changed, 66 insertions(+), 73 deletions(-)

diff --git a/kolibri/plugins/device/assets/src/views/ManageContentPage/index.vue b/kolibri/plugins/device/assets/src/views/ManageContentPage/index.vue
index 2982c8d9339..e454892829a 100644
--- a/kolibri/plugins/device/assets/src/views/ManageContentPage/index.vue
+++ b/kolibri/plugins/device/assets/src/views/ManageContentPage/index.vue
@@ -1,88 +1,85 @@
 <template>
 
-  <div>
+  <DeviceAppBarPage :title="pageTitle">
     <transition name="delay<-entry">
       <PostSetupModalGroup
-        v-if="welcomeModalVisible && !areChannelsImported"
+        v-if="!channelListLoading && welcomeModalVisible && !areChannelsImported"
         @cancel="hideWelcomeModal"
       />
     </transition>
 
-    <DeviceAppBarPage :title="pageTitle">
+    <KPageContainer class="device-container">
 
-      <KPageContainer class="device-container">
-
-        <div>
-          <HeaderWithOptions :headerText="coreString('channelsLabel')">
-            <template #options>
-              <KButtonGroup>
-                <!-- Margins to and bottom adds space when buttons are vertically stacked -->
-                <KButton
-                  v-if="channelsAreInstalled"
-                  hasDropdown
-                  appearance="raised-button"
-                  :text="coreString('optionsLabel')"
-                  :style="{ margin: '16px 8px -16px 0' }"
-                >
-                  <template #menu>
-                    <KDropdownMenu
-                      position="bottom left"
-                      :options="dropdownOptions"
-                      @select="handleSelect"
-                    />
-                  </template>
-                </KButton>
-                <KButton
-                  :text="$tr('import')"
-                  style="margin-top: 16px; margin-bottom: -16px;"
-                  :primary="true"
-                  @click="startImportWorkflow()"
-                />
-              </KButtonGroup>
-            </template>
-          </HeaderWithOptions>
+      <div>
+        <HeaderWithOptions :headerText="coreString('channelsLabel')">
+          <template #options>
+            <KButtonGroup>
+              <!-- Margins to and bottom adds space when buttons are vertically stacked -->
+              <KButton
+                v-if="channelsAreInstalled"
+                hasDropdown
+                appearance="raised-button"
+                :text="coreString('optionsLabel')"
+                :style="{ margin: '16px 8px -16px 0' }"
+              >
+                <template #menu>
+                  <KDropdownMenu
+                    position="bottom left"
+                    :options="dropdownOptions"
+                    @select="handleSelect"
+                  />
+                </template>
+              </KButton>
+              <KButton
+                :text="$tr('import')"
+                style="margin-top: 16px; margin-bottom: -16px;"
+                :primary="true"
+                @click="startImportWorkflow()"
+              />
+            </KButtonGroup>
+          </template>
+        </HeaderWithOptions>
 
-          <TasksBar
-            v-if="managedTasks.length > 0"
-            :tasks="managedTasks"
-            :taskManagerLink="{ name: 'MANAGE_TASKS' }"
-            @clearall="handleClickClearAll"
-          />
+        <TasksBar
+          v-if="managedTasks.length > 0"
+          :tasks="managedTasks"
+          :taskManagerLink="{ name: 'MANAGE_TASKS' }"
+          @clearall="handleClickClearAll"
+        />
 
-          <p v-if="!channelsAreInstalled && !channelListLoading">
-            {{ $tr('emptyChannelListMessage') }}
-          </p>
+        <p v-if="!channelsAreInstalled && !channelListLoading">
+          {{ $tr('emptyChannelListMessage') }}
+        </p>
 
-          <div class="channels-list">
-            <KCircularLoader v-if="channelListLoading" />
-            <div v-else>
-              <ChannelPanel
-                v-for="channel in sortedChannels"
-                :key="channel.id"
-                :channel="channel"
-                :disabled="channelIsBeingDeleted(channel.id)"
-                :showNewLabel="showNewLabel(channel.id)"
-                @select_delete="deleteChannelId = channel.id"
-                @select_manage="handleSelectManage(channel.id)"
-              />
-            </div>
+        <div class="channels-list">
+          <KCircularLoader v-if="!welcomeModalVisible && channelListLoading" />
+          <div v-else>
+            <ChannelPanel
+              v-for="channel in sortedChannels"
+              :key="channel.id"
+              :channel="channel"
+              :disabled="channelIsBeingDeleted(channel.id)"
+              :showNewLabel="showNewLabel(channel.id)"
+              @select_delete="deleteChannelId = channel.id"
+              @select_manage="handleSelectManage(channel.id)"
+            />
           </div>
+        </div>
 
-          <SelectTransferSourceModal :pageName="pageName" />
+        <SelectTransferSourceModal :pageName="pageName" />
 
-          <DeleteChannelModal
-            v-if="deleteChannelId"
-            :channelTitle="selectedChannelTitle"
-            @submit="handleDeleteChannel"
-            @cancel="deleteChannelId = null"
-          />
+        <DeleteChannelModal
+          v-if="deleteChannelId"
+          :channelTitle="selectedChannelTitle"
+          @submit="handleDeleteChannel"
+          @cancel="deleteChannelId = null"
+        />
 
-        </div>
+      </div>
 
-      </KPageContainer>
+    </KPageContainer>
 
-    </DeviceAppBarPage>
-  </div>
+  </DeviceAppBarPage>
 
 </template>
 
@@ -189,8 +186,6 @@
         );
       },
       areChannelsImported() {
-        console.log('debugggggggggg');
-        console.log(this.installedChannelsWithResources);
         return this.installedChannelsWithResources.length > 0;
       },
     },
diff --git a/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue b/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue
index 13fc5a2d3b8..b9b0f3ec3b2 100644
--- a/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue
+++ b/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue
@@ -3,7 +3,7 @@
   <div>
     <transition name="delay-entry">
       <PostSetupModalGroup
-        v-if="welcomeModalVisible && !areChannelsImported"
+        v-if="!(rootNodesLoading || searchLoading) && welcomeModalVisible && !areChannelsImported"
         isOnMyOwnUser
         @cancel="hideWelcomeModal"
       />
@@ -36,7 +36,7 @@
           - Otherwise, show search results.
         -->
         <KCircularLoader
-          v-if="rootNodesLoading || searchLoading"
+          v-if="!welcomeModalVisible && (rootNodesLoading || searchLoading)"
           class="loader"
           type="indeterminate"
           :delay="false"
@@ -452,8 +452,6 @@
         return KolibriStudioId;
       },
       areChannelsImported() {
-        console.log('debugggggggggg');
-        console.log(this.rootNodes.length);
         return this.rootNodes.length > 0;
       },
     },

From 3bf129a964389be43e490b2c112e572ec85ae8c3 Mon Sep 17 00:00:00 2001
From: ozer550 <prathameshd419@gmail.com>
Date: Tue, 14 Nov 2023 21:44:53 +0530
Subject: [PATCH 4/4] remove v-if from Loader

---
 .../plugins/device/assets/src/views/ManageContentPage/index.vue | 2 +-
 kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/kolibri/plugins/device/assets/src/views/ManageContentPage/index.vue b/kolibri/plugins/device/assets/src/views/ManageContentPage/index.vue
index e454892829a..bac04b3e3be 100644
--- a/kolibri/plugins/device/assets/src/views/ManageContentPage/index.vue
+++ b/kolibri/plugins/device/assets/src/views/ManageContentPage/index.vue
@@ -52,7 +52,7 @@
         </p>
 
         <div class="channels-list">
-          <KCircularLoader v-if="!welcomeModalVisible && channelListLoading" />
+          <KCircularLoader v-if="channelListLoading" />
           <div v-else>
             <ChannelPanel
               v-for="channel in sortedChannels"
diff --git a/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue b/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue
index b9b0f3ec3b2..4ea6a662651 100644
--- a/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue
+++ b/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue
@@ -36,7 +36,7 @@
           - Otherwise, show search results.
         -->
         <KCircularLoader
-          v-if="!welcomeModalVisible && (rootNodesLoading || searchLoading)"
+          v-if="rootNodesLoading || searchLoading"
           class="loader"
           type="indeterminate"
           :delay="false"