From 224e863d778f5e2819412ef0bd4bc661f7a2b5b3 Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Tue, 4 Apr 2023 15:10:14 -0700
Subject: [PATCH 01/27] lessonplaylistpage << kcircularloader when loading

---
 .../learn/assets/src/views/classes/LessonPlaylistPage.vue        | 1 +
 1 file changed, 1 insertion(+)

diff --git a/kolibri/plugins/learn/assets/src/views/classes/LessonPlaylistPage.vue b/kolibri/plugins/learn/assets/src/views/classes/LessonPlaylistPage.vue
index 26c28dec290..14503331264 100644
--- a/kolibri/plugins/learn/assets/src/views/classes/LessonPlaylistPage.vue
+++ b/kolibri/plugins/learn/assets/src/views/classes/LessonPlaylistPage.vue
@@ -39,6 +39,7 @@
           :link="genContentLinkBackLinkCurrentPage(content.id, true)"
         />
       </section>
+      <KCircularLoader v-else-if="$store.state.core.loading" />
       <p v-else class="no-resources-message">
         {{ $tr('noResourcesInLesson') }}
       </p>

From 919f27792f42337a5879197cf1319b9450ad3b67 Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Tue, 11 Apr 2023 14:44:12 -0700
Subject: [PATCH 02/27] use core vuex loading state in LearnAppBarPage rather
 than taking prop

---
 kolibri/plugins/learn/assets/src/views/HomePage/index.vue   | 5 +----
 kolibri/plugins/learn/assets/src/views/LearnAppBarPage.vue  | 6 +-----
 .../plugins/learn/assets/src/views/LibraryPage/index.vue    | 5 -----
 .../learn/assets/src/views/classes/LessonPlaylistPage.vue   | 3 +--
 4 files changed, 3 insertions(+), 16 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/views/HomePage/index.vue b/kolibri/plugins/learn/assets/src/views/HomePage/index.vue
index 7088f0573fc..86c619a00c3 100644
--- a/kolibri/plugins/learn/assets/src/views/HomePage/index.vue
+++ b/kolibri/plugins/learn/assets/src/views/HomePage/index.vue
@@ -1,9 +1,6 @@
 <template>
 
-  <LearnAppBarPage
-    :appBarTitle="learnString('learnLabel')"
-    :loading="loading"
-  >
+  <LearnAppBarPage :appBarTitle="learnString('learnLabel')">
     <div v-if="!loading" id="main" role="main">
       <MissingResourceAlert v-if="missingResources" />
       <YourClasses
diff --git a/kolibri/plugins/learn/assets/src/views/LearnAppBarPage.vue b/kolibri/plugins/learn/assets/src/views/LearnAppBarPage.vue
index d179199567b..989f12b9233 100644
--- a/kolibri/plugins/learn/assets/src/views/LearnAppBarPage.vue
+++ b/kolibri/plugins/learn/assets/src/views/LearnAppBarPage.vue
@@ -4,7 +4,7 @@
     :is="page"
     :appBarTitle="appBarTitle"
     :appearanceOverrides="appearanceOverrides"
-    :loading="loading"
+    :loading="$store.state.core.loading"
     :primary="false"
     :route="route"
     :title="appBarTitle"
@@ -63,10 +63,6 @@
         type: String,
         default: null,
       },
-      loading: {
-        type: Boolean,
-        default: null,
-      },
       route: {
         type: Object,
         default() {
diff --git a/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue b/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue
index 9bb24c94c87..1089cee9d66 100644
--- a/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue
+++ b/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue
@@ -3,7 +3,6 @@
   <LearnAppBarPage
     :appBarTitle="appBarTitle"
     :appearanceOverrides="{}"
-    :loading="loading"
     :deviceId="deviceId"
     :route="back"
   >
@@ -364,10 +363,6 @@
         type: String,
         default: null,
       },
-      loading: {
-        type: Boolean,
-        default: null,
-      },
     },
     data: function() {
       return {
diff --git a/kolibri/plugins/learn/assets/src/views/classes/LessonPlaylistPage.vue b/kolibri/plugins/learn/assets/src/views/classes/LessonPlaylistPage.vue
index 14503331264..67f71ad27f6 100644
--- a/kolibri/plugins/learn/assets/src/views/classes/LessonPlaylistPage.vue
+++ b/kolibri/plugins/learn/assets/src/views/classes/LessonPlaylistPage.vue
@@ -3,7 +3,7 @@
   <LearnAppBarPage
     :appBarTitle="learnString('learnLabel')"
   >
-    <div id="main" role="main">
+    <div v-if="!$store.state.core.loading" id="main" role="main">
       <KBreadcrumbs :items="breadcrumbs" :ariaLabel="learnString('classesAndAssignmentsLabel')" />
       <section class="lesson-details">
         <div>
@@ -39,7 +39,6 @@
           :link="genContentLinkBackLinkCurrentPage(content.id, true)"
         />
       </section>
-      <KCircularLoader v-else-if="$store.state.core.loading" />
       <p v-else class="no-resources-message">
         {{ $tr('noResourcesInLesson') }}
       </p>

From 90ae11dd76865e50efbb0af1013e8e462bfb5af8 Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Tue, 11 Apr 2023 15:11:09 -0700
Subject: [PATCH 03/27] mock newly expected promise in Bookmark spec

---
 .../plugins/pdf_viewer/assets/tests/SideBar/Bookmarks.spec.js    | 1 +
 1 file changed, 1 insertion(+)

diff --git a/kolibri/plugins/pdf_viewer/assets/tests/SideBar/Bookmarks.spec.js b/kolibri/plugins/pdf_viewer/assets/tests/SideBar/Bookmarks.spec.js
index b9d1ecc7b28..da4b243929f 100644
--- a/kolibri/plugins/pdf_viewer/assets/tests/SideBar/Bookmarks.spec.js
+++ b/kolibri/plugins/pdf_viewer/assets/tests/SideBar/Bookmarks.spec.js
@@ -54,6 +54,7 @@ const outline = [
 function makeWrapper(options = {}) {
   return mount(Bookmarks, {
     ...options,
+    mocks: { fetchContentNodeProgress: Promise.resolve() },
     propsData: {
       outline,
       goToDestination: jest.fn(),

From 7d80f00d5bba19992ed242d62417cca2906c4258 Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Wed, 10 May 2023 14:39:12 -0700
Subject: [PATCH 04/27] kcircularloader -> userstable during loading state

---
 .../views/UserTable/__tests__/index.spec.js   |  8 ++++--
 .../core/assets/src/views/UserTable/index.vue | 26 +++++++++++++++++--
 .../src/modules/userManagement/handlers.js    |  3 ++-
 .../views/UserPage/__test__/UserPage.spec.js  |  1 +
 .../ChooseAdmin/__tests__/index.spec.js       |  4 +++
 5 files changed, 37 insertions(+), 5 deletions(-)

diff --git a/kolibri/core/assets/src/views/UserTable/__tests__/index.spec.js b/kolibri/core/assets/src/views/UserTable/__tests__/index.spec.js
index 04ebd2a71e6..54530520fd0 100644
--- a/kolibri/core/assets/src/views/UserTable/__tests__/index.spec.js
+++ b/kolibri/core/assets/src/views/UserTable/__tests__/index.spec.js
@@ -1,9 +1,13 @@
-import { shallowMount, mount } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import { UserKinds } from 'kolibri.coreVue.vuex.constants';
+import { coreStoreFactory } from 'kolibri.coreVue.vuex.store';
 import UserTable from '../index';
 
 function makeWrapper({ propsData } = {}) {
+  const store = coreStoreFactory({});
+  store.dispatch('notLoading');
   return mount(UserTable, {
+    store,
     propsData,
   });
 }
@@ -36,7 +40,7 @@ const TEST_USERS = [
 
 describe(`UserTable`, () => {
   it(`smoke test`, () => {
-    const wrapper = shallowMount(UserTable);
+    const wrapper = makeWrapper();
     expect(wrapper.exists()).toBeTruthy();
   });
 
diff --git a/kolibri/core/assets/src/views/UserTable/index.vue b/kolibri/core/assets/src/views/UserTable/index.vue
index 4d7f6c02c44..268f203c1ff 100644
--- a/kolibri/core/assets/src/views/UserTable/index.vue
+++ b/kolibri/core/assets/src/views/UserTable/index.vue
@@ -62,7 +62,14 @@
       </template>
 
       <template #tbody>
-        <tbody>
+        <tbody v-if="$store.state.core.loading">
+          <tr style="overflow:hidden;">
+            <td>
+              <KCircularLoader class="center-loader" />
+            </td>
+          </tr>
+        </tbody>
+        <tbody v-else>
           <tr
             v-for="user in users"
             :key="user.id"
@@ -189,7 +196,7 @@
     </CoreTable>
 
     <p
-      v-if="!users || !users.length"
+      v-if="(!users || !users.length) && !$store.state.core.loading"
       class="empty-message"
     >
       {{ emptyMessage }}
@@ -389,4 +396,19 @@
     max-width: 120px;
   }
 
+  .center-loader {
+    &.ui-progress-circular {
+      position: static !important;
+      width: 100% !important;
+      overflow: hidden;
+    }
+
+    /deep/ svg {
+      top: 48px;
+      width: 32px;
+      height: 32px;
+      overflow: hidden;
+    }
+  }
+
 </style>
diff --git a/kolibri/plugins/facility/assets/src/modules/userManagement/handlers.js b/kolibri/plugins/facility/assets/src/modules/userManagement/handlers.js
index d49688ab958..ff7b4b933ee 100644
--- a/kolibri/plugins/facility/assets/src/modules/userManagement/handlers.js
+++ b/kolibri/plugins/facility/assets/src/modules/userManagement/handlers.js
@@ -4,6 +4,7 @@ import samePageCheckGenerator from 'kolibri.utils.samePageCheckGenerator';
 import { _userState } from '../mappers';
 // An action for setting up the initial state of the app by fetching data from the server
 export function showUserPage(store, toRoute, fromRoute) {
+  store.dispatch('loading');
   if (toRoute.name !== fromRoute.name) {
     store.dispatch('preparePage');
   }
@@ -26,7 +27,7 @@ export function showUserPage(store, toRoute, fromRoute) {
           totalPages: users.total_pages,
           usersCount: users.count,
         });
-        store.commit('CORE_SET_PAGE_LOADING', false);
+        store.dispatch('notLoading');
       }
     },
     error => {
diff --git a/kolibri/plugins/facility/assets/src/views/UserPage/__test__/UserPage.spec.js b/kolibri/plugins/facility/assets/src/views/UserPage/__test__/UserPage.spec.js
index b6d97ba242a..03c6b2bcb3e 100644
--- a/kolibri/plugins/facility/assets/src/views/UserPage/__test__/UserPage.spec.js
+++ b/kolibri/plugins/facility/assets/src/views/UserPage/__test__/UserPage.spec.js
@@ -23,6 +23,7 @@ UserPage.computed.newUserLink = () => ({});
 
 function makeWrapper() {
   const store = makeStore();
+  store.dispatch('notLoading');
   const wrapper = mount(UserPage, {
     store,
     router,
diff --git a/kolibri/plugins/user_profile/assets/src/views/ChangeFacility/ChooseAdmin/__tests__/index.spec.js b/kolibri/plugins/user_profile/assets/src/views/ChangeFacility/ChooseAdmin/__tests__/index.spec.js
index 28638c5baa3..1e0000ba4c0 100644
--- a/kolibri/plugins/user_profile/assets/src/views/ChangeFacility/ChooseAdmin/__tests__/index.spec.js
+++ b/kolibri/plugins/user_profile/assets/src/views/ChangeFacility/ChooseAdmin/__tests__/index.spec.js
@@ -1,9 +1,13 @@
+import { coreStoreFactory } from 'kolibri.coreVue.vuex.store';
 import { shallowMount, mount } from '@vue/test-utils';
 import ChooseAdmin from '../index.vue';
 
 const sendMachineEvent = jest.fn();
 function makeWrapper({ userId, sourceFacilityUsers } = {}) {
+  const store = coreStoreFactory();
+  store.dispatch('notLoading');
   return mount(ChooseAdmin, {
+    store,
     provide: {
       changeFacilityService: {
         send: sendMachineEvent,

From bde78d37a65655b7d121f7cda7074d85325afe45 Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Wed, 17 May 2023 11:22:11 -0700
Subject: [PATCH 05/27] KCircularLoader -> TopicsPage

---
 .../assets/src/views/TopicsPage/index.vue     | 342 +++++++++---------
 1 file changed, 174 insertions(+), 168 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/views/TopicsPage/index.vue b/kolibri/plugins/learn/assets/src/views/TopicsPage/index.vue
index 9f2b0129e5d..8f0579ffb3a 100644
--- a/kolibri/plugins/learn/assets/src/views/TopicsPage/index.vue
+++ b/kolibri/plugins/learn/assets/src/views/TopicsPage/index.vue
@@ -7,7 +7,7 @@
     <!-- appearanceOverrides overrides the default page styling -->
     <!-- by replacing it with an empty object -->
     <ImmersivePage
-      v-else-if="!loading"
+      v-else
       :loading="loading"
       :route="back"
       :appBarTitle="barTitle"
@@ -22,199 +22,205 @@
           color="white"
         />
       </template>
-      <!-- Header with thumbail and tagline -->
-      <TopicsHeader
-        v-if="!windowIsSmall"
-        ref="header"
-        role="complementary"
-        data-test="header-breadcrumbs"
-        :title="(topic && topic.title) || ''"
-        :description="topic && topic.description"
-        :thumbnail="topic && topic.thumbnail"
-        :breadcrumbs="breadcrumbs"
-      />
-
-      <!-- mobile tabs (different alignment and interactions) -->
-      <TopicsMobileHeader v-else :topic="topic" />
-
-      <main
-        class="main-content-grid"
-        :style="gridStyle"
-      >
-        <KBreadcrumbs
-          v-if="breadcrumbs.length && windowIsSmall"
-          data-test="mobile-breadcrumbs"
-          :items="breadcrumbs"
-          :ariaLabel="learnString('channelAndFoldersLabel')"
+
+      <KCircularLoader v-if="loading" />
+
+      <div v-else>
+        <!-- Header with thumbail and tagline -->
+        <TopicsHeader
+          v-if="!windowIsSmall"
+          ref="header"
+          role="complementary"
+          data-test="header-breadcrumbs"
+          :title="(topic && topic.title) || ''"
+          :description="topic && topic.description"
+          :thumbnail="topic && topic.thumbnail"
+          :breadcrumbs="breadcrumbs"
         />
 
-        <div class="card-grid">
-          <!-- Filter buttons - shown when not sidebar not visible -->
-          <div v-if="!windowIsLarge" data-test="tab-buttons">
-            <KButton
-              v-if="topics.length"
-              icon="topic"
-              data-test="folders-button"
-              class="overlay-toggle-button"
-              :text="coreString('folders')"
-              :primary="false"
-              @click="toggleFolderSearchSidePanel('folder')"
-            />
-            <KButton
-              icon="filter"
-              class="overlay-toggle-button"
-              data-test="filter-button"
-              :text="coreString('filter')"
-              :primary="false"
-              @click="toggleFolderSearchSidePanel('search')"
-            />
-          </div>
+        <!-- mobile tabs (different alignment and interactions) -->
+        <TopicsMobileHeader v-else :topic="topic" />
+
+        <main
+          class="main-content-grid"
+          :style="gridStyle"
+        >
+          <KBreadcrumbs
+            v-if="breadcrumbs.length && windowIsSmall"
+            data-test="mobile-breadcrumbs"
+            :items="breadcrumbs"
+            :ariaLabel="learnString('channelAndFoldersLabel')"
+          />
 
-          <!-- default/preview display of nested folder structure, not search -->
-          <div v-if="!displayingSearchResults" data-test="topics">
-            <!-- Rows of cards and links / show more for each Topic -->
-            <template v-for="t in topicsForDisplay">
-              <TopicSubsection
-                :key="t.id"
-                :topic="t"
-                :subTopicLoading="t.id === subTopicLoading"
+          <div class="card-grid">
+            <!-- Filter buttons - shown when not sidebar not visible -->
+            <div v-if="!windowIsLarge" data-test="tab-buttons">
+              <KButton
+                v-if="topics.length"
+                icon="topic"
+                data-test="folders-button"
+                class="overlay-toggle-button"
+                :text="coreString('folders')"
+                :primary="false"
+                @click="toggleFolderSearchSidePanel('folder')"
+              />
+              <KButton
+                icon="filter"
+                class="overlay-toggle-button"
+                data-test="filter-button"
+                :text="coreString('filter')"
+                :primary="false"
+                @click="toggleFolderSearchSidePanel('search')"
+              />
+            </div>
+
+            <!-- default/preview display of nested folder structure, not search -->
+            <div v-if="!displayingSearchResults" data-test="topics">
+              <!-- Rows of cards and links / show more for each Topic -->
+              <template v-for="t in topicsForDisplay">
+                <TopicSubsection
+                  :key="t.id"
+                  :topic="t"
+                  :subTopicLoading="t.id === subTopicLoading"
+                  :allowDownloads="allowDownloads"
+                  @showMore="handleShowMore"
+                  @loadMoreInSubtopic="handleLoadMoreInSubtopic"
+                  @toggleInfoPanel="toggleInfoPanel"
+                />
+              </template>
+
+              <!-- display for each nested topic/folder  -->
+              <!-- display all resources at the top level of the folder -->
+              <LibraryAndChannelBrowserMainContent
+                v-if="resources.length"
+                :gridType="2"
                 :allowDownloads="allowDownloads"
-                @showMore="handleShowMore"
-                @loadMoreInSubtopic="handleLoadMoreInSubtopic"
+                data-test="search-results"
+                :contents="resourcesDisplayed"
+                :numCols="numCols"
+                currentCardViewStyle="card"
                 @toggleInfoPanel="toggleInfoPanel"
               />
-            </template>
+              <KButton
+                v-if="moreResources"
+                class="more-after-grid"
+                appearance="basic-link"
+                @click="handleShowMoreResources"
+              >
+                {{ coreString('showMoreAction') }}
+              </KButton>
+              <div v-else-if="topicMore" class="end-button-block">
+                <KButton
+                  v-if="!topicMoreLoading"
+                  :text="coreString('viewMoreAction')"
+                  appearance="raised-button"
+                  :disabled="topicMoreLoading"
+                  @click="handleLoadMoreInTopic"
+                />
+                <KCircularLoader v-else />
+              </div>
+            </div>
 
-            <!-- display for each nested topic/folder  -->
-            <!-- display all resources at the top level of the folder -->
-            <LibraryAndChannelBrowserMainContent
-              v-if="resources.length"
-              :gridType="2"
-              :allowDownloads="allowDownloads"
+            <!-- search results -->
+            <!-- TODO: Should card preference be permitted in Topics page as well? At least for
+                search results? -->
+            <SearchResultsGrid
+              v-else
               data-test="search-results"
-              :contents="resourcesDisplayed"
-              :numCols="numCols"
-              currentCardViewStyle="card"
-              @toggleInfoPanel="toggleInfoPanel"
+              :allowDownloads="allowDownloads"
+              :currentCardViewStyle="currentSearchCardViewStyle"
+              :hideCardViewToggle="true"
+              :results="results"
+              :removeFilterTag="removeFilterTag"
+              :clearSearch="clearSearch"
+              :moreLoading="moreLoading"
+              :searchMore="searchMore"
+              :searchTerms="searchTerms"
+              :searchLoading="searchLoading"
+              :more="more"
+              @setCardStyle="style => currentSearchCardViewStyle = style"
+              @setSidePanelMetadataContent="content => metadataSidePanelContent = content"
             />
-            <KButton
-              v-if="moreResources"
-              class="more-after-grid"
-              appearance="basic-link"
-              @click="handleShowMoreResources"
-            >
-              {{ coreString('showMoreAction') }}
-            </KButton>
-            <div v-else-if="topicMore" class="end-button-block">
-              <KButton
-                v-if="!topicMoreLoading"
-                :text="coreString('viewMoreAction')"
-                appearance="raised-button"
-                :disabled="topicMoreLoading"
-                @click="handleLoadMoreInTopic"
-              />
-              <KCircularLoader v-else />
-            </div>
           </div>
+        </main>
 
-          <!-- search results -->
-          <!-- TODO: Should card preference be permitted in Topics page as well? At least for
-              search results? -->
-          <SearchResultsGrid
-            v-else
-            data-test="search-results"
-            :allowDownloads="allowDownloads"
-            :currentCardViewStyle="currentSearchCardViewStyle"
-            :hideCardViewToggle="true"
-            :results="results"
-            :removeFilterTag="removeFilterTag"
-            :clearSearch="clearSearch"
-            :moreLoading="moreLoading"
-            :searchMore="searchMore"
-            :searchTerms="searchTerms"
-            :searchLoading="searchLoading"
-            :more="more"
-            @setCardStyle="style => currentSearchCardViewStyle = style"
-            @setSidePanelMetadataContent="content => metadataSidePanelContent = content"
-          />
-        </div>
-      </main>
-
-      <!-- Side Panels for filtering and searching  -->
-      <SearchPanelModal
-        v-if="!windowIsLarge && sidePanelIsOpen"
-        v-model="searchTerms"
-        :mobileSearchActive="mobileSearchActive"
-        :topicMore="topicMore"
-        :topics="topics"
-        :topicsLoading="topicMoreLoading"
-        @searchTerms="newTerms => searchTerms = newTerms"
-        @currentCategory="handleShowSearchModal"
-        @loadMoreTopics="handleLoadMoreInTopic"
-        @close="sidePanelIsOpen = false"
-      />
-
-      <!-- Embedded Side panel is on larger views, and exists next to content -->
-      <ToggleHeaderTabs
-        v-if="!!windowIsLarge"
-        :topic="topic"
-        :topics="topics"
-        :style="tabPosition"
-      />
-      <SearchFiltersPanel
-        v-if="!!windowIsLarge"
-        ref="sidePanel"
-        v-model="searchTerms"
-        :topicsListDisplayed="!desktopSearchActive"
-        class="side-panel"
-        topicPage="True"
-        :topics="topics"
-        :topicsLoading="topicMoreLoading"
-        :more="topicMore"
-        :width="`${sidePanelWidth}px`"
-        :showChannels="false"
-        position="embedded"
-        :style="sidePanelStyleOverrides"
-        @currentCategory="handleShowSearchModal"
-        @loadMoreTopics="handleLoadMoreInTopic"
-      />
-      <!-- The full screen side panel is used on smaller screens, and toggles as an overlay -->
-      <!-- FullScreen is a container component, and then the SearchFiltersPanel sits within -->
-      <SidePanelModal
-        v-if="!windowIsLarge && sidePanelIsOpen"
-        class="full-screen-side-panel"
-        alignment="left"
-        :closeButtonIconType="closeButtonIcon"
-        @closePanel="closeEventHandler()"
-        @shouldFocusFirstEl="findFirstEl()"
-      >
+        <!-- Side Panels for filtering and searching  -->
+        <SearchPanelModal
+          v-if="!windowIsLarge && sidePanelIsOpen"
+          v-model="searchTerms"
+          :mobileSearchActive="mobileSearchActive"
+          :topicMore="topicMore"
+          :topics="topics"
+          :topicsLoading="topicMoreLoading"
+          @searchTerms="newTerms => searchTerms = newTerms"
+          @currentCategory="handleShowSearchModal"
+          @loadMoreTopics="handleLoadMoreInTopic"
+          @close="sidePanelIsOpen = false"
+        />
+
+        <!-- Embedded Side panel is on larger views, and exists next to content -->
+        <ToggleHeaderTabs
+          v-if="!!windowIsLarge"
+          :topic="topic"
+          :topics="topics"
+          :style="tabPosition"
+        />
         <SearchFiltersPanel
-          v-if="!currentCategory"
-          ref="embeddedPanel"
+          v-if="!!windowIsLarge"
+          ref="sidePanel"
           v-model="searchTerms"
-          :topicsListDisplayed="!mobileSearchActive"
+          :topicsListDisplayed="!desktopSearchActive"
+          class="side-panel"
           topicPage="True"
           :topics="topics"
           :topicsLoading="topicMoreLoading"
           :more="topicMore"
+          :width="`${sidePanelWidth}px`"
           :showChannels="false"
-          position="overlay"
+          position="embedded"
+          :style="sidePanelStyleOverrides"
           @currentCategory="handleShowSearchModal"
           @loadMoreTopics="handleLoadMoreInTopic"
         />
+        <!-- The full screen side panel is used on smaller screens, and toggles as an overlay -->
+        <!-- FullScreen is a container component, and then the SearchFiltersPanel sits within -->
+        <SidePanelModal
+          v-if="!windowIsLarge && sidePanelIsOpen"
+          class="full-screen-side-panel"
+          alignment="left"
+          :closeButtonIconType="closeButtonIcon"
+          @closePanel="closeEventHandler()"
+          @shouldFocusFirstEl="findFirstEl()"
+        >
+          <SearchFiltersPanel
+            v-if="!currentCategory"
+            ref="embeddedPanel"
+            v-model="searchTerms"
+            :topicsListDisplayed="!mobileSearchActive"
+            topicPage="True"
+            :topics="topics"
+            :topicsLoading="topicMoreLoading"
+            :more="topicMore"
+            :showChannels="false"
+            position="overlay"
+            @currentCategory="handleShowSearchModal"
+            @loadMoreTopics="handleLoadMoreInTopic"
+          />
+          <CategorySearchModal
+            v-if="currentCategory && windowIsSmall"
+            :selectedCategory="currentCategory"
+            @cancel="currentCategory = null"
+            @input="handleCategory"
+          />
+        </SidePanelModal>
         <CategorySearchModal
-          v-if="currentCategory && windowIsSmall"
+          v-if="currentCategory"
           :selectedCategory="currentCategory"
           @cancel="currentCategory = null"
           @input="handleCategory"
         />
-      </SidePanelModal>
-      <CategorySearchModal
-        v-if="currentCategory"
-        :selectedCategory="currentCategory"
-        @cancel="currentCategory = null"
-        @input="handleCategory"
-      />
+
+      </div>
 
 
       <!-- Side panel for showing the information of selected content with a link to view it -->

From 8eea33366fea157b1cfc4dbf92591bb1039293f0 Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Tue, 4 Apr 2023 15:10:14 -0700
Subject: [PATCH 06/27] lessonplaylistpage << kcircularloader when loading

---
 .../learn/assets/src/views/classes/LessonPlaylistPage.vue        | 1 +
 1 file changed, 1 insertion(+)

diff --git a/kolibri/plugins/learn/assets/src/views/classes/LessonPlaylistPage.vue b/kolibri/plugins/learn/assets/src/views/classes/LessonPlaylistPage.vue
index 67f71ad27f6..1a0324a622c 100644
--- a/kolibri/plugins/learn/assets/src/views/classes/LessonPlaylistPage.vue
+++ b/kolibri/plugins/learn/assets/src/views/classes/LessonPlaylistPage.vue
@@ -39,6 +39,7 @@
           :link="genContentLinkBackLinkCurrentPage(content.id, true)"
         />
       </section>
+      <KCircularLoader v-else-if="$store.state.core.loading" />
       <p v-else class="no-resources-message">
         {{ $tr('noResourcesInLesson') }}
       </p>

From 97f6a9976aeb06405e715c41530b3edac99bcfba Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Tue, 11 Apr 2023 14:44:12 -0700
Subject: [PATCH 07/27] use core vuex loading state in LearnAppBarPage rather
 than taking prop

---
 .../learn/assets/src/views/classes/LessonPlaylistPage.vue        | 1 -
 1 file changed, 1 deletion(-)

diff --git a/kolibri/plugins/learn/assets/src/views/classes/LessonPlaylistPage.vue b/kolibri/plugins/learn/assets/src/views/classes/LessonPlaylistPage.vue
index 1a0324a622c..67f71ad27f6 100644
--- a/kolibri/plugins/learn/assets/src/views/classes/LessonPlaylistPage.vue
+++ b/kolibri/plugins/learn/assets/src/views/classes/LessonPlaylistPage.vue
@@ -39,7 +39,6 @@
           :link="genContentLinkBackLinkCurrentPage(content.id, true)"
         />
       </section>
-      <KCircularLoader v-else-if="$store.state.core.loading" />
       <p v-else class="no-resources-message">
         {{ $tr('noResourcesInLesson') }}
       </p>

From d500a973b4520a320fe299ef116966ef706bd362 Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Wed, 17 May 2023 12:30:41 -0700
Subject: [PATCH 08/27] ManageChannelsPage KCircularLoader while loading
 channels

---
 .../src/views/ManageContentPage/index.vue     | 24 +++++++++++--------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/kolibri/plugins/device/assets/src/views/ManageContentPage/index.vue b/kolibri/plugins/device/assets/src/views/ManageContentPage/index.vue
index 159e5739cd1..fbbed99d8f8 100644
--- a/kolibri/plugins/device/assets/src/views/ManageContentPage/index.vue
+++ b/kolibri/plugins/device/assets/src/views/ManageContentPage/index.vue
@@ -45,20 +45,23 @@
           @clearall="handleClickClearAll"
         />
 
-        <p v-if="!channelsAreInstalled">
+        <p v-if="!channelsAreInstalled && !channelListLoading">
           {{ $tr('emptyChannelListMessage') }}
         </p>
 
         <div class="channels-list">
-          <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)"
-          />
+          <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>
 
         <SelectTransferSourceModal :pageName="pageName" />
@@ -134,6 +137,7 @@
         'managedTasks',
       ]),
       ...mapState('manageContent/wizard', ['pageName']),
+      ...mapState('manageContent', ['channelListLoading']),
       pageTitle() {
         return deviceString('deviceManagementTitle');
       },

From c47fbacc5c83bf3a206f634421f590f4605371ab Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Wed, 17 May 2023 15:52:32 -0700
Subject: [PATCH 09/27] CoreTable accepts dataLoading prop; show loader when
 loading

---
 kolibri/core/assets/src/views/CoreTable.vue | 25 +++++++++++++++++----
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/kolibri/core/assets/src/views/CoreTable.vue b/kolibri/core/assets/src/views/CoreTable.vue
index d55d9a88dba..8f28e279119 100644
--- a/kolibri/core/assets/src/views/CoreTable.vue
+++ b/kolibri/core/assets/src/views/CoreTable.vue
@@ -1,9 +1,11 @@
 <script>
 
   import get from 'lodash/get';
+  import KCircularLoader from 'kolibri-design-system/lib/loaders/KCircularLoader';
 
   export default {
     name: 'CoreTable',
+    components: { KCircularLoader },
     props: {
       selectable: {
         type: Boolean,
@@ -14,6 +16,11 @@
         type: String,
         default: null,
       },
+      dataLoading: {
+        type: Boolean,
+        default: false,
+        required: false,
+      },
     },
     computed: {
       tHeadStyle() {
@@ -73,9 +80,19 @@
         }
       });
 
-      // Insert an empty message as a <p> at the end if it is provided and the
-      // table has no rows.
-      const showEmptyMessage = this.emptyMessage && !tableHasRows;
+      // If we have loaded the data, but have no empty message and no rows, we log an error.
+      if (!this.dataLoading && this.emptyMessage && !tableHasRows) {
+        console.error('CoreTable: No rows in table, but no empty message provided.');
+      }
+
+      /*
+       * If data is still loading, then we show a loader. Otherwise, we show the
+       * empty message if there are no rows in the table. If we have loaded data, have
+       * an emptyMessage and have no rows.
+       */
+      var noDataEl = this.dataLoading
+        ? createElement('p', [createElement(KCircularLoader)])
+        : createElement('p', this.emptyMessage);
 
       return createElement('div', { class: 'core-table-container' }, [
         createElement('table', { class: 'core-table' }, [
@@ -83,7 +100,7 @@
           theadEl,
           tbodyCopy,
         ]),
-        showEmptyMessage && createElement('p', this.emptyMessage),
+        noDataEl,
       ]);
     },
   };

From dd4c4ddf0db99f963c121523810c2b8944974bc2 Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Wed, 17 May 2023 15:54:23 -0700
Subject: [PATCH 10/27] manage permissions loading state, drill to CoreTable

---
 .../assets/src/modules/managePermissions/handlers.js       | 4 ++++
 .../device/assets/src/modules/managePermissions/index.js   | 4 ++++
 .../assets/src/views/ManagePermissionsPage/UserGrid.vue    | 7 ++++++-
 .../assets/src/views/ManagePermissionsPage/index.vue       | 3 +++
 4 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/kolibri/plugins/device/assets/src/modules/managePermissions/handlers.js b/kolibri/plugins/device/assets/src/modules/managePermissions/handlers.js
index 697b754ae1b..eab3a558ef0 100644
--- a/kolibri/plugins/device/assets/src/modules/managePermissions/handlers.js
+++ b/kolibri/plugins/device/assets/src/modules/managePermissions/handlers.js
@@ -19,6 +19,7 @@ function fetchFacilityUsers() {
 
 export function showManagePermissionsPage(store) {
   const shouldResolve = samePageCheckGenerator(store);
+  store.commit('managePermissions/SET_LOADING_FACILITY_USERS', true);
   const promises = Promise.all([fetchFacilityUsers(store), fetchDevicePermissions()]);
   return promises
     .then(function onSuccess([users, permissions]) {
@@ -31,5 +32,8 @@ export function showManagePermissionsPage(store) {
     })
     .catch(function onFailure(error) {
       shouldResolve() ? store.dispatch('handleError', error) : null;
+    })
+    .finally(() => {
+      store.commit('managePermissions/SET_LOADING_FACILITY_USERS', false);
     });
 }
diff --git a/kolibri/plugins/device/assets/src/modules/managePermissions/index.js b/kolibri/plugins/device/assets/src/modules/managePermissions/index.js
index e73f4b5536f..9288cd5239d 100644
--- a/kolibri/plugins/device/assets/src/modules/managePermissions/index.js
+++ b/kolibri/plugins/device/assets/src/modules/managePermissions/index.js
@@ -1,5 +1,6 @@
 function defaultState() {
   return {
+    loadingFacilityUsers: false,
     facilityUsers: [],
     permissions: {},
   };
@@ -15,5 +16,8 @@ export default {
     RESET_STATE(state) {
       Object.assign(state, defaultState());
     },
+    SET_LOADING_FACILITY_USERS(state, loadingFacilityUsers) {
+      Object.assign(state, { loadingFacilityUsers });
+    },
   },
 };
diff --git a/kolibri/plugins/device/assets/src/views/ManagePermissionsPage/UserGrid.vue b/kolibri/plugins/device/assets/src/views/ManagePermissionsPage/UserGrid.vue
index 8a2f428ac5a..85aba55de40 100644
--- a/kolibri/plugins/device/assets/src/views/ManagePermissionsPage/UserGrid.vue
+++ b/kolibri/plugins/device/assets/src/views/ManagePermissionsPage/UserGrid.vue
@@ -2,7 +2,7 @@
 
   <div>
 
-    <CoreTable :emptyMessage="emptyMessage">
+    <CoreTable :emptyMessage="emptyMessage" :dataLoading="dataLoading">
       <template #headers>
         <th>{{ coreString('fullNameLabel') }}</th>
         <th>{{ coreString('usernameLabel') }}</th>
@@ -82,6 +82,11 @@
         type: Function,
         default: () => null,
       },
+      dataLoading: {
+        type: Boolean,
+        default: false,
+        required: false,
+      },
     },
     computed: {
       ...mapGetters(['facilities', 'currentUserId']),
diff --git a/kolibri/plugins/device/assets/src/views/ManagePermissionsPage/index.vue b/kolibri/plugins/device/assets/src/views/ManagePermissionsPage/index.vue
index 3d5264de7b0..7f9e1ec80a7 100644
--- a/kolibri/plugins/device/assets/src/views/ManagePermissionsPage/index.vue
+++ b/kolibri/plugins/device/assets/src/views/ManagePermissionsPage/index.vue
@@ -15,6 +15,7 @@
       </div>
 
       <PaginatedListContainer
+        :dataLoading="loadingFacilityUsers"
         :items="usersFilteredByDropdown"
         :filterPlaceholder="$tr('searchPlaceholder')"
       >
@@ -44,6 +45,7 @@
         </template>
         <template #default="{ items, filterInput }">
           <UserGrid
+            :dataLoading="loadingFacilityUsers"
             :searchFilter="searchFilterText"
             :facilityUsers="items"
             :userPermissions="userPermissions"
@@ -98,6 +100,7 @@
       ...mapState('managePermissions', {
         facilityUsers: state => state.facilityUsers,
         userPermissions: state => userid => state.permissions[userid],
+        loadingFacilityUsers: state => state.loadingFacilityUsers,
       }),
       ...mapState({
         query: state => state.query,

From 773edc4573c9173240271294647af9e87d61bed7 Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Thu, 18 May 2023 10:38:23 -0700
Subject: [PATCH 11/27] usertable accepts and passes a dataLoading prop to
 coretable

---
 kolibri/core/assets/src/views/UserTable/index.vue | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/kolibri/core/assets/src/views/UserTable/index.vue b/kolibri/core/assets/src/views/UserTable/index.vue
index 268f203c1ff..2394f41ff69 100644
--- a/kolibri/core/assets/src/views/UserTable/index.vue
+++ b/kolibri/core/assets/src/views/UserTable/index.vue
@@ -17,7 +17,7 @@
       data-test="selectAllCheckbox"
       @change="selectAll($event)"
     />
-    <CoreTable>
+    <CoreTable :emptyMessage="emptyMessage" :dataLoading="dataLoading">
       <template #headers>
         <th data-test="fullNameHeader" :style="{ minWidth: '32px' }">
           <span v-if="selectable" class="visuallyhidden">
@@ -195,13 +195,6 @@
       </template>
     </CoreTable>
 
-    <p
-      v-if="(!users || !users.length) && !$store.state.core.loading"
-      class="empty-message"
-    >
-      {{ emptyMessage }}
-    </p>
-
   </div>
 
 </template>
@@ -277,6 +270,10 @@
         type: String,
         default: '',
       },
+      dataLoading: {
+        type: Boolean,
+        default: false,
+      },
     },
     computed: {
       showSelectAllCheckbox() {

From db9602b2abcfb50b25ceed5e28e8b761ffeabf60 Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Thu, 18 May 2023 10:43:13 -0700
Subject: [PATCH 12/27] facility class*Management loading state in local vuex,
 remove unused isBusy

---
 .../assets/src/modules/classEditManagement/handlers.js      | 4 +++-
 .../assets/src/modules/classEditManagement/index.js         | 6 +++---
 .../facility/assets/src/modules/classManagement/index.js    | 6 +++---
 kolibri/plugins/facility/assets/src/modules/shared.js       | 6 +++---
 4 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/kolibri/plugins/facility/assets/src/modules/classEditManagement/handlers.js b/kolibri/plugins/facility/assets/src/modules/classEditManagement/handlers.js
index c0f99b0389a..97ef562786f 100644
--- a/kolibri/plugins/facility/assets/src/modules/classEditManagement/handlers.js
+++ b/kolibri/plugins/facility/assets/src/modules/classEditManagement/handlers.js
@@ -18,8 +18,11 @@ export function showClassEditPage(store, classId) {
     ClassroomResource.fetchCollection({ getParams: { parent: facilityId }, force: true }),
   ];
   const shouldResolve = samePageCheckGenerator(store);
+  store.commit('classEditManagement/SET_DATA_LOADING', true);
   Promise.all(promises).then(
     ([facilityUsers, classroom, classrooms]) => {
+      store.commit('classEditManagement/SET_DATA_LOADING', false);
+
       if (shouldResolve()) {
         store.commit('classEditManagement/SET_STATE', {
           modalShown: false,
@@ -28,7 +31,6 @@ export function showClassEditPage(store, classId) {
           classLearners: sortUsersByFullName(facilityUsers).map(_userState),
           classCoaches: sortUsersByFullName(classroom.coaches).map(_userState),
         });
-        store.commit('CORE_SET_PAGE_LOADING', false);
       }
     },
     error => {
diff --git a/kolibri/plugins/facility/assets/src/modules/classEditManagement/index.js b/kolibri/plugins/facility/assets/src/modules/classEditManagement/index.js
index f1361e25e39..a3b10821ba1 100644
--- a/kolibri/plugins/facility/assets/src/modules/classEditManagement/index.js
+++ b/kolibri/plugins/facility/assets/src/modules/classEditManagement/index.js
@@ -1,4 +1,4 @@
-import { displayModal, SET_BUSY, SET_ERROR, SET_MODAL } from '../shared';
+import { displayModal, SET_DATA_LOADING, SET_ERROR, SET_MODAL } from '../shared';
 import { removeClassLearner, removeClassCoach, updateClass } from './actions';
 
 function defaultState() {
@@ -8,7 +8,7 @@ function defaultState() {
     classes: [],
     currentClass: null,
     error: '',
-    isBusy: false,
+    dataLoading: false,
     modalShown: false,
   };
 }
@@ -23,7 +23,7 @@ export default {
     RESET_STATE(state) {
       Object.assign(state, defaultState());
     },
-    SET_BUSY,
+    SET_DATA_LOADING,
     SET_ERROR,
     SET_MODAL,
     UPDATE_CLASS(state, { id, updatedClass }) {
diff --git a/kolibri/plugins/facility/assets/src/modules/classManagement/index.js b/kolibri/plugins/facility/assets/src/modules/classManagement/index.js
index 54d37a285ab..62967580ace 100644
--- a/kolibri/plugins/facility/assets/src/modules/classManagement/index.js
+++ b/kolibri/plugins/facility/assets/src/modules/classManagement/index.js
@@ -1,11 +1,11 @@
-import { displayModal, SET_BUSY, SET_ERROR, SET_MODAL } from '../shared';
+import { displayModal, SET_DATA_LOADING, SET_ERROR, SET_MODAL } from '../shared';
 import { createClass } from './actions';
 
 function defaultState() {
   return {
     classes: [],
     error: '',
-    isBusy: false,
+    dataLoading: false,
     modalShown: false,
   };
 }
@@ -20,7 +20,7 @@ export default {
     RESET_STATE(state) {
       Object.assign(state, defaultState());
     },
-    SET_BUSY,
+    SET_DATA_LOADING,
     SET_ERROR,
     SET_MODAL,
     ADD_CLASS(state, classroom) {
diff --git a/kolibri/plugins/facility/assets/src/modules/shared.js b/kolibri/plugins/facility/assets/src/modules/shared.js
index e6f95b98d57..712d640ff79 100644
--- a/kolibri/plugins/facility/assets/src/modules/shared.js
+++ b/kolibri/plugins/facility/assets/src/modules/shared.js
@@ -2,8 +2,8 @@ export function SET_MODAL(state, modalName) {
   state.modalShown = modalName;
 }
 
-export function SET_BUSY(state, isBusy) {
-  state.isBusy = isBusy;
+export function SET_DATA_LOADING(state, dataLoading) {
+  state.dataLoading = dataLoading;
 }
 
 export function SET_ERROR(state, error) {
@@ -13,5 +13,5 @@ export function SET_ERROR(state, error) {
 export function displayModal(store, modalName) {
   store.commit('SET_MODAL', modalName);
   store.commit('SET_ERROR', '');
-  store.commit('SET_BUSY', false);
+  store.commit('SET_DATA_LOADING', false);
 }

From d942bdad794e7054b97595b9b0bddef2402943fa Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Thu, 18 May 2023 12:36:04 -0700
Subject: [PATCH 13/27] conditionalize emptyMessage properly in CoreTable

---
 kolibri/core/assets/src/views/CoreTable.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/kolibri/core/assets/src/views/CoreTable.vue b/kolibri/core/assets/src/views/CoreTable.vue
index 8f28e279119..c2424b1ad7f 100644
--- a/kolibri/core/assets/src/views/CoreTable.vue
+++ b/kolibri/core/assets/src/views/CoreTable.vue
@@ -88,11 +88,11 @@
       /*
        * If data is still loading, then we show a loader. Otherwise, we show the
        * empty message if there are no rows in the table. If we have loaded data, have
-       * an emptyMessage and have no rows.
+       * an emptyMessage and have no rows. If we have rows, then we show the table alone
        */
-      var noDataEl = this.dataLoading
+      var dataStatusEl = this.dataLoading
         ? createElement('p', [createElement(KCircularLoader)])
-        : createElement('p', this.emptyMessage);
+        : !tableHasRows && createElement('p', this.emptyMessage); // Only show message if no rows
 
       return createElement('div', { class: 'core-table-container' }, [
         createElement('table', { class: 'core-table' }, [
@@ -100,7 +100,7 @@
           theadEl,
           tbodyCopy,
         ]),
-        noDataEl,
+        dataStatusEl,
       ]);
     },
   };

From 6d0e51c2a0a63602a8daff043a66a67e4708a6ef Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Thu, 18 May 2023 12:37:43 -0700
Subject: [PATCH 14/27] class edit page tables pass dataloading

---
 .../plugins/facility/assets/src/views/ClassEditPage/index.vue  | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/kolibri/plugins/facility/assets/src/views/ClassEditPage/index.vue b/kolibri/plugins/facility/assets/src/views/ClassEditPage/index.vue
index 62cded7dd1a..40e898a64ad 100644
--- a/kolibri/plugins/facility/assets/src/views/ClassEditPage/index.vue
+++ b/kolibri/plugins/facility/assets/src/views/ClassEditPage/index.vue
@@ -65,6 +65,7 @@
       <UserTable
         :users="classCoaches"
         :emptyMessage="$tr('noCoachesInClassMessge')"
+        :dataLoading="dataLoading"
         isCoach
       >
         <!-- Don't need template in Vue 2.5+ -->
@@ -100,6 +101,7 @@
 
       <UserTable
         :users="classLearners"
+        :dataLoading="dataLoading"
         :emptyMessage="$tr('noLearnersInClassMessage')"
       >
         <template #action="userRow">
@@ -153,6 +155,7 @@
         'classes',
         'currentClass',
         'modalShown',
+        'dataLoading',
       ]),
       classDetails() {
         // No errors due to race condition around currentClass being undefined

From fb76682229ccbc8611145dcba23eb1b69139d8dc Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Thu, 18 May 2023 12:38:45 -0700
Subject: [PATCH 15/27] remove unnedeeded core.loading check in usertable

---
 kolibri/core/assets/src/views/UserTable/index.vue | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/kolibri/core/assets/src/views/UserTable/index.vue b/kolibri/core/assets/src/views/UserTable/index.vue
index 2394f41ff69..ca1c8af89bf 100644
--- a/kolibri/core/assets/src/views/UserTable/index.vue
+++ b/kolibri/core/assets/src/views/UserTable/index.vue
@@ -62,14 +62,7 @@
       </template>
 
       <template #tbody>
-        <tbody v-if="$store.state.core.loading">
-          <tr style="overflow:hidden;">
-            <td>
-              <KCircularLoader class="center-loader" />
-            </td>
-          </tr>
-        </tbody>
-        <tbody v-else>
+        <tbody>
           <tr
             v-for="user in users"
             :key="user.id"

From b4a797a58189ae1feda252b65414ed54151ac22f Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Thu, 18 May 2023 12:44:43 -0700
Subject: [PATCH 16/27] facility userpage manages dataloading state for table

---
 .../src/modules/userManagement/handlers.js    | 33 ++++++++++---------
 .../src/modules/userManagement/index.js       |  1 +
 .../assets/src/views/UserPage/index.vue       |  3 +-
 3 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/kolibri/plugins/facility/assets/src/modules/userManagement/handlers.js b/kolibri/plugins/facility/assets/src/modules/userManagement/handlers.js
index ff7b4b933ee..bf80b33bcb7 100644
--- a/kolibri/plugins/facility/assets/src/modules/userManagement/handlers.js
+++ b/kolibri/plugins/facility/assets/src/modules/userManagement/handlers.js
@@ -4,7 +4,7 @@ import samePageCheckGenerator from 'kolibri.utils.samePageCheckGenerator';
 import { _userState } from '../mappers';
 // An action for setting up the initial state of the app by fetching data from the server
 export function showUserPage(store, toRoute, fromRoute) {
-  store.dispatch('loading');
+  store.commit('userManagement/SET_STATE', { dataLoading: true });
   if (toRoute.name !== fromRoute.name) {
     store.dispatch('preparePage');
   }
@@ -19,19 +19,22 @@ export function showUserPage(store, toRoute, fromRoute) {
       user_type: toRoute.query.user_type,
     }),
     force: true,
-  }).then(
-    users => {
-      if (shouldResolve()) {
-        store.commit('userManagement/SET_STATE', {
-          facilityUsers: users.results.map(_userState),
-          totalPages: users.total_pages,
-          usersCount: users.count,
-        });
-        store.dispatch('notLoading');
+  })
+    .then(
+      users => {
+        if (shouldResolve()) {
+          store.commit('userManagement/SET_STATE', {
+            facilityUsers: users.results.map(_userState),
+            totalPages: users.total_pages,
+            usersCount: users.count,
+          });
+        }
+      },
+      error => {
+        shouldResolve() ? store.dispatch('handleError', error) : null;
       }
-    },
-    error => {
-      shouldResolve() ? store.dispatch('handleError', error) : null;
-    }
-  );
+    )
+    .finally(() => {
+      store.commit('userManagement/SET_STATE', { dataLoading: false });
+    });
 }
diff --git a/kolibri/plugins/facility/assets/src/modules/userManagement/index.js b/kolibri/plugins/facility/assets/src/modules/userManagement/index.js
index 5958e481de6..c387794c853 100644
--- a/kolibri/plugins/facility/assets/src/modules/userManagement/index.js
+++ b/kolibri/plugins/facility/assets/src/modules/userManagement/index.js
@@ -5,6 +5,7 @@ function defaultState() {
     facilityUsers: [],
     totalPages: 0,
     usersCount: 0,
+    dataLoading: false,
   };
 }
 
diff --git a/kolibri/plugins/facility/assets/src/views/UserPage/index.vue b/kolibri/plugins/facility/assets/src/views/UserPage/index.vue
index 7e815741af7..266895a6b2b 100644
--- a/kolibri/plugins/facility/assets/src/views/UserPage/index.vue
+++ b/kolibri/plugins/facility/assets/src/views/UserPage/index.vue
@@ -61,6 +61,7 @@
           <UserTable
             class="move-down user-roster"
             :users="facilityUsers"
+            :dataLoading="dataLoading"
             :emptyMessage="emptyMessageForItems(facilityUsers, search)"
             :showDemographicInfo="true"
           >
@@ -151,7 +152,7 @@
         'userIsMultiFacilityAdmin',
         'facilityPageLinks',
       ]),
-      ...mapState('userManagement', ['facilityUsers', 'totalPages', 'usersCount']),
+      ...mapState('userManagement', ['facilityUsers', 'totalPages', 'usersCount', 'dataLoading']),
       Modals: () => Modals,
       userKinds() {
         return [

From aaa1c8476ff52adcb129efa4fed3d6f3e573d7ba Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Thu, 18 May 2023 12:52:01 -0700
Subject: [PATCH 17/27] manageclasspage classes list uses dataLoading

---
 .../src/modules/classManagement/handlers.js   | 31 +++++++++++--------
 .../src/views/ManageClassPage/index.vue       | 11 ++-----
 2 files changed, 20 insertions(+), 22 deletions(-)

diff --git a/kolibri/plugins/facility/assets/src/modules/classManagement/handlers.js b/kolibri/plugins/facility/assets/src/modules/classManagement/handlers.js
index 6dc76655a3f..989a583e01f 100644
--- a/kolibri/plugins/facility/assets/src/modules/classManagement/handlers.js
+++ b/kolibri/plugins/facility/assets/src/modules/classManagement/handlers.js
@@ -3,23 +3,28 @@ import samePageCheckGenerator from 'kolibri.utils.samePageCheckGenerator';
 
 export function showClassesPage(store, toRoute) {
   store.dispatch('preparePage');
+  store.commit('classManagement/SET_STATE', { dataLoading: true });
   const facilityId = toRoute.params.facility_id || store.getters.activeFacilityId;
   const shouldResolve = samePageCheckGenerator(store);
   return ClassroomResource.fetchCollection({
     getParams: { parent: facilityId },
     force: true,
-  }).then(
-    classrooms => {
-      if (shouldResolve()) {
-        store.commit('classManagement/SET_STATE', {
-          modalShown: false,
-          classes: [...classrooms],
-        });
-        store.commit('CORE_SET_PAGE_LOADING', false);
+  })
+    .then(
+      classrooms => {
+        if (shouldResolve()) {
+          store.commit('classManagement/SET_STATE', {
+            modalShown: false,
+            classes: [...classrooms],
+          });
+          store.commit('CORE_SET_PAGE_LOADING', false);
+        }
+      },
+      error => {
+        shouldResolve() ? store.dispatch('handleError', error) : null;
       }
-    },
-    error => {
-      shouldResolve() ? store.dispatch('handleError', error) : null;
-    }
-  );
+    )
+    .finally(() => {
+      store.commit('classManagement/SET_STATE', { dataLoading: false });
+    });
 }
diff --git a/kolibri/plugins/facility/assets/src/views/ManageClassPage/index.vue b/kolibri/plugins/facility/assets/src/views/ManageClassPage/index.vue
index 379cf4109a1..462ca5d3196 100644
--- a/kolibri/plugins/facility/assets/src/views/ManageClassPage/index.vue
+++ b/kolibri/plugins/facility/assets/src/views/ManageClassPage/index.vue
@@ -36,7 +36,7 @@
         </KGridItem>
       </KGrid>
 
-      <CoreTable>
+      <CoreTable :dataLoading="dataLoading" :emptyMessage="$tr('noClassesExist')">
         <caption class="visuallyhidden">
           {{ $tr('tableCaption') }}
         </caption>
@@ -93,10 +93,6 @@
         </template>
       </CoreTable>
 
-      <p v-if="noClassesExist">
-        {{ $tr('noClassesExist') }}
-      </p>
-
       <ClassDeleteModal
         v-if="Boolean(classToDelete)"
         :classToDelete="classToDelete"
@@ -152,11 +148,8 @@
       };
     },
     computed: {
-      ...mapState('classManagement', ['modalShown', 'classes']),
+      ...mapState('classManagement', ['modalShown', 'classes', 'dataLoading']),
       ...mapGetters(['userIsMultiFacilityAdmin', 'facilityPageLinks']),
-      noClassesExist() {
-        return this.classes.length === 0;
-      },
       Modals: () => Modals,
       sortedClassrooms() {
         return orderBy(this.classes, [classroom => classroom.name.toUpperCase()], ['asc']);

From ed70564a380db52669290b58713380af66804e4b Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Thu, 18 May 2023 14:08:04 -0700
Subject: [PATCH 18/27] coach:86 busy, add dataLoading state; implement in
 *ClassListPage's coretable

---
 kolibri/plugins/coach/assets/src/modules/pluginModule.js | 9 +++++++--
 .../coach/assets/src/views/CoachClassListPage.vue        | 9 +++------
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/modules/pluginModule.js b/kolibri/plugins/coach/assets/src/modules/pluginModule.js
index 376fc501aba..6330dc60e1b 100644
--- a/kolibri/plugins/coach/assets/src/modules/pluginModule.js
+++ b/kolibri/plugins/coach/assets/src/modules/pluginModule.js
@@ -21,7 +21,7 @@ const logging = logger.getLogger(__filename);
 export default {
   state() {
     return {
-      busy: false,
+      dataLoading: false,
       classList: [],
       pageName: '',
       toolbarRoute: {},
@@ -38,6 +38,9 @@ export default {
     SET_TOOLBAR_TITLE(state, title) {
       state.toolbarTitle = title;
     },
+    SET_DATA_LOADING(state, dataLoading) {
+      state.dataLoading = dataLoading;
+    },
     SET_TOOLBAR_ROUTE(state, toolbarRoute) {
       state.toolbarRoute = toolbarRoute;
     },
@@ -60,13 +63,15 @@ export default {
   },
   actions: {
     setClassList(store, facilityId) {
+      store.commit('SET_DATA_LOADING', true);
       return ClassroomResource.fetchCollection({
         getParams: { parent: facilityId || store.getters.currentFacilityId, role: 'coach' },
       })
         .then(classrooms => {
           store.commit('SET_CLASS_LIST', classrooms);
         })
-        .catch(error => store.dispatch('handleApiError', error));
+        .catch(error => store.dispatch('handleApiError', error))
+        .finally(() => store.commit('SET_DATA_LOADING', false));
     },
     /**
       * Handle coach page errors.
diff --git a/kolibri/plugins/coach/assets/src/views/CoachClassListPage.vue b/kolibri/plugins/coach/assets/src/views/CoachClassListPage.vue
index 016a6fd76ae..51e7a4eb373 100644
--- a/kolibri/plugins/coach/assets/src/views/CoachClassListPage.vue
+++ b/kolibri/plugins/coach/assets/src/views/CoachClassListPage.vue
@@ -17,18 +17,15 @@
       <h1>{{ coreString('classesLabel') }}</h1>
       <p>{{ $tr('classPageSubheader') }}</p>
 
-      <p v-if="classList.length === 0">
+      <p v-if="classList.length === 0 && !dataLoading">
         <KExternalLink
           v-if="isAdmin && createClassUrl"
           :text="$tr('noClassesDetailsForAdmin')"
           :href="createClassUrl"
         />
-        <span v-else>
-          {{ emptyStateDetails }}
-        </span>
       </p>
 
-      <CoreTable v-else>
+      <CoreTable v-else :dataLoading="dataLoading" :emptyMessage="emptyStateDetails">
         <template #headers>
           <th>{{ coreString('classNameLabel') }}</th>
           <th>{{ coreString('coachesLabel') }}</th>
@@ -83,7 +80,7 @@
     mixins: [commonCoach, commonCoreStrings],
     computed: {
       ...mapGetters(['isAdmin', 'isClassCoach', 'isFacilityCoach', 'userIsMultiFacilityAdmin']),
-      ...mapState(['classList']),
+      ...mapState(['classList', 'dataLoading']),
       // Message that shows up when state.classList is empty
       emptyStateDetails() {
         if (this.isClassCoach) {

From f5153e9e55c058b4b6d9921968b580bf594aace7 Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Tue, 30 May 2023 15:26:31 -0700
Subject: [PATCH 19/27] reset coach class list when calling action to get new
 list

---
 kolibri/plugins/coach/assets/src/modules/pluginModule.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/kolibri/plugins/coach/assets/src/modules/pluginModule.js b/kolibri/plugins/coach/assets/src/modules/pluginModule.js
index 6330dc60e1b..c6fb68862d7 100644
--- a/kolibri/plugins/coach/assets/src/modules/pluginModule.js
+++ b/kolibri/plugins/coach/assets/src/modules/pluginModule.js
@@ -64,6 +64,7 @@ export default {
   actions: {
     setClassList(store, facilityId) {
       store.commit('SET_DATA_LOADING', true);
+      store.commit('SET_CLASS_LIST', []); // Reset the list if we're loading a new one
       return ClassroomResource.fetchCollection({
         getParams: { parent: facilityId || store.getters.currentFacilityId, role: 'coach' },
       })

From 30dd238871e930d87806092910b7817f2bb009d5 Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Tue, 30 May 2023 15:32:55 -0700
Subject: [PATCH 20/27] remove unused style in usertable

---
 kolibri/core/assets/src/views/UserTable/index.vue | 15 ---------------
 1 file changed, 15 deletions(-)

diff --git a/kolibri/core/assets/src/views/UserTable/index.vue b/kolibri/core/assets/src/views/UserTable/index.vue
index ca1c8af89bf..d5aca01adff 100644
--- a/kolibri/core/assets/src/views/UserTable/index.vue
+++ b/kolibri/core/assets/src/views/UserTable/index.vue
@@ -386,19 +386,4 @@
     max-width: 120px;
   }
 
-  .center-loader {
-    &.ui-progress-circular {
-      position: static !important;
-      width: 100% !important;
-      overflow: hidden;
-    }
-
-    /deep/ svg {
-      top: 48px;
-      width: 32px;
-      height: 32px;
-      overflow: hidden;
-    }
-  }
-
 </style>

From 678da96f72417afd7bb76549d613d39b1627183e Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Tue, 30 May 2023 15:37:51 -0700
Subject: [PATCH 21/27] just assign to the state variable directly for
 loadingFacilityUsers

---
 .../device/assets/src/modules/managePermissions/index.js        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/kolibri/plugins/device/assets/src/modules/managePermissions/index.js b/kolibri/plugins/device/assets/src/modules/managePermissions/index.js
index 9288cd5239d..019fac706df 100644
--- a/kolibri/plugins/device/assets/src/modules/managePermissions/index.js
+++ b/kolibri/plugins/device/assets/src/modules/managePermissions/index.js
@@ -17,7 +17,7 @@ export default {
       Object.assign(state, defaultState());
     },
     SET_LOADING_FACILITY_USERS(state, loadingFacilityUsers) {
-      Object.assign(state, { loadingFacilityUsers });
+      state.loadingFacilityUsers = loadingFacilityUsers;
     },
   },
 };

From 70179a817dcc28fb7691a009f4f70ef101ba3ce9 Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Tue, 30 May 2023 15:39:44 -0700
Subject: [PATCH 22/27] Core/AppBarPage prop.loading default from core vuex;
 drill LearnABP.loading

---
 kolibri/core/assets/src/views/CorePage/AppBarPage.vue      | 4 +++-
 kolibri/plugins/learn/assets/src/views/LearnAppBarPage.vue | 6 +++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/kolibri/core/assets/src/views/CorePage/AppBarPage.vue b/kolibri/core/assets/src/views/CorePage/AppBarPage.vue
index 6590ef7c76c..cd1da022c61 100644
--- a/kolibri/core/assets/src/views/CorePage/AppBarPage.vue
+++ b/kolibri/core/assets/src/views/CorePage/AppBarPage.vue
@@ -100,7 +100,9 @@
       },
       loading: {
         type: Boolean,
-        default: null,
+        default() {
+          return this.$store.state.core.loading;
+        },
       },
     },
     data() {
diff --git a/kolibri/plugins/learn/assets/src/views/LearnAppBarPage.vue b/kolibri/plugins/learn/assets/src/views/LearnAppBarPage.vue
index 989f12b9233..4a4d374f843 100644
--- a/kolibri/plugins/learn/assets/src/views/LearnAppBarPage.vue
+++ b/kolibri/plugins/learn/assets/src/views/LearnAppBarPage.vue
@@ -4,7 +4,7 @@
     :is="page"
     :appBarTitle="appBarTitle"
     :appearanceOverrides="appearanceOverrides"
-    :loading="$store.state.core.loading"
+    :loading="loading"
     :primary="false"
     :route="route"
     :title="appBarTitle"
@@ -69,6 +69,10 @@
           return {};
         },
       },
+      loading: {
+        type: Boolean,
+        default: false,
+      },
     },
     computed: {
       page() {

From ce235f39133c11051b842b9a50ec7ac3508e65c9 Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Tue, 30 May 2023 15:43:39 -0700
Subject: [PATCH 23/27] remove samePageCheck business from classEditManagement
 handler

---
 .../modules/classEditManagement/handlers.js   | 21 +++++++------------
 1 file changed, 8 insertions(+), 13 deletions(-)

diff --git a/kolibri/plugins/facility/assets/src/modules/classEditManagement/handlers.js b/kolibri/plugins/facility/assets/src/modules/classEditManagement/handlers.js
index 97ef562786f..43090e67733 100644
--- a/kolibri/plugins/facility/assets/src/modules/classEditManagement/handlers.js
+++ b/kolibri/plugins/facility/assets/src/modules/classEditManagement/handlers.js
@@ -1,4 +1,3 @@
-import samePageCheckGenerator from 'kolibri.utils.samePageCheckGenerator';
 import { ClassroomResource, FacilityUserResource } from 'kolibri.resources';
 import { localeCompare } from 'kolibri.utils.i18n';
 import { _userState } from '../mappers';
@@ -17,24 +16,20 @@ export function showClassEditPage(store, classId) {
     ClassroomResource.fetchModel({ id: classId, force: true }),
     ClassroomResource.fetchCollection({ getParams: { parent: facilityId }, force: true }),
   ];
-  const shouldResolve = samePageCheckGenerator(store);
   store.commit('classEditManagement/SET_DATA_LOADING', true);
   Promise.all(promises).then(
     ([facilityUsers, classroom, classrooms]) => {
       store.commit('classEditManagement/SET_DATA_LOADING', false);
-
-      if (shouldResolve()) {
-        store.commit('classEditManagement/SET_STATE', {
-          modalShown: false,
-          currentClass: classroom,
-          classes: classrooms,
-          classLearners: sortUsersByFullName(facilityUsers).map(_userState),
-          classCoaches: sortUsersByFullName(classroom.coaches).map(_userState),
-        });
-      }
+      store.commit('classEditManagement/SET_STATE', {
+        modalShown: false,
+        currentClass: classroom,
+        classes: classrooms,
+        classLearners: sortUsersByFullName(facilityUsers).map(_userState),
+        classCoaches: sortUsersByFullName(classroom.coaches).map(_userState),
+      });
     },
     error => {
-      shouldResolve() ? store.dispatch('handleError', error) : null;
+      store.dispatch('handleError', error);
     }
   );
 }

From caa644955052d6addb6e6618cad625926ab734ce Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Tue, 30 May 2023 15:48:28 -0700
Subject: [PATCH 24/27] nix another samePageCheck in facility handlers; use
 more common promise chaining

---
 .../modules/classEditManagement/handlers.js   | 11 +++-----
 .../src/modules/classManagement/handlers.js   | 26 +++++++------------
 2 files changed, 14 insertions(+), 23 deletions(-)

diff --git a/kolibri/plugins/facility/assets/src/modules/classEditManagement/handlers.js b/kolibri/plugins/facility/assets/src/modules/classEditManagement/handlers.js
index 43090e67733..fd5319e00ba 100644
--- a/kolibri/plugins/facility/assets/src/modules/classEditManagement/handlers.js
+++ b/kolibri/plugins/facility/assets/src/modules/classEditManagement/handlers.js
@@ -17,8 +17,8 @@ export function showClassEditPage(store, classId) {
     ClassroomResource.fetchCollection({ getParams: { parent: facilityId }, force: true }),
   ];
   store.commit('classEditManagement/SET_DATA_LOADING', true);
-  Promise.all(promises).then(
-    ([facilityUsers, classroom, classrooms]) => {
+  Promise.all(promises)
+    .then(([facilityUsers, classroom, classrooms]) => {
       store.commit('classEditManagement/SET_DATA_LOADING', false);
       store.commit('classEditManagement/SET_STATE', {
         modalShown: false,
@@ -27,9 +27,6 @@ export function showClassEditPage(store, classId) {
         classLearners: sortUsersByFullName(facilityUsers).map(_userState),
         classCoaches: sortUsersByFullName(classroom.coaches).map(_userState),
       });
-    },
-    error => {
-      store.dispatch('handleError', error);
-    }
-  );
+    })
+    .catch(error => store.dispatch('handleError', error));
 }
diff --git a/kolibri/plugins/facility/assets/src/modules/classManagement/handlers.js b/kolibri/plugins/facility/assets/src/modules/classManagement/handlers.js
index 989a583e01f..75bab96ee51 100644
--- a/kolibri/plugins/facility/assets/src/modules/classManagement/handlers.js
+++ b/kolibri/plugins/facility/assets/src/modules/classManagement/handlers.js
@@ -1,29 +1,23 @@
 import { ClassroomResource } from 'kolibri.resources';
-import samePageCheckGenerator from 'kolibri.utils.samePageCheckGenerator';
 
 export function showClassesPage(store, toRoute) {
   store.dispatch('preparePage');
   store.commit('classManagement/SET_STATE', { dataLoading: true });
   const facilityId = toRoute.params.facility_id || store.getters.activeFacilityId;
-  const shouldResolve = samePageCheckGenerator(store);
   return ClassroomResource.fetchCollection({
     getParams: { parent: facilityId },
     force: true,
   })
-    .then(
-      classrooms => {
-        if (shouldResolve()) {
-          store.commit('classManagement/SET_STATE', {
-            modalShown: false,
-            classes: [...classrooms],
-          });
-          store.commit('CORE_SET_PAGE_LOADING', false);
-        }
-      },
-      error => {
-        shouldResolve() ? store.dispatch('handleError', error) : null;
-      }
-    )
+    .then(classrooms => {
+      store.commit('classManagement/SET_STATE', {
+        modalShown: false,
+        classes: [...classrooms],
+      });
+      store.commit('CORE_SET_PAGE_LOADING', false);
+    })
+    .catch(error => {
+      store.dispatch('handleError', error);
+    })
     .finally(() => {
       store.commit('classManagement/SET_STATE', { dataLoading: false });
     });

From 97e3d28aa327435177deff6f17fcf116b5537bcd Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Tue, 30 May 2023 15:51:13 -0700
Subject: [PATCH 25/27] CoreTable use logging.error

---
 kolibri/core/assets/src/views/CoreTable.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/kolibri/core/assets/src/views/CoreTable.vue b/kolibri/core/assets/src/views/CoreTable.vue
index c2424b1ad7f..15663d0a0a6 100644
--- a/kolibri/core/assets/src/views/CoreTable.vue
+++ b/kolibri/core/assets/src/views/CoreTable.vue
@@ -1,8 +1,11 @@
 <script>
 
   import get from 'lodash/get';
+  import logger from 'kolibri.lib.logging';
   import KCircularLoader from 'kolibri-design-system/lib/loaders/KCircularLoader';
 
+  const logging = logger.getLogger(__filename);
+
   export default {
     name: 'CoreTable',
     components: { KCircularLoader },
@@ -82,7 +85,7 @@
 
       // If we have loaded the data, but have no empty message and no rows, we log an error.
       if (!this.dataLoading && this.emptyMessage && !tableHasRows) {
-        console.error('CoreTable: No rows in table, but no empty message provided.');
+        logging.error('CoreTable: No rows in table, but no empty message provided.');
       }
 
       /*

From 818d765040126dcadc6342cdf0d0626f57d54c4e Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Fri, 2 Jun 2023 11:57:25 -0700
Subject: [PATCH 26/27] remove all uses of finally() outside of JS spec files

---
 .../assets/src/views/ExamReport/index.vue     |  5 ++--
 .../coach/assets/src/modules/pluginModule.js  |  7 ++++--
 .../src/modules/managePermissions/handlers.js |  9 +++----
 .../src/modules/classManagement/handlers.js   |  3 +--
 .../src/modules/userManagement/handlers.js    | 25 ++++++++-----------
 5 files changed, 24 insertions(+), 25 deletions(-)

diff --git a/kolibri/core/assets/src/views/ExamReport/index.vue b/kolibri/core/assets/src/views/ExamReport/index.vue
index 61ca2cbb72a..240bfaef057 100644
--- a/kolibri/core/assets/src/views/ExamReport/index.vue
+++ b/kolibri/core/assets/src/views/ExamReport/index.vue
@@ -437,13 +437,14 @@
         MasteryLogResource.fetchMostRecentDiff(this.getParams())
           .then(currentTry => {
             this.currentTry = currentTry;
+            this.loading = false;
           })
           .catch(err => {
             if (err.response && err.response.status_code === 404) {
               this.$emit('noCompleteTries');
             }
-          })
-          .finally(() => (this.loading = false));
+            this.loading = false;
+          });
       },
       loadAllTries() {
         MasteryLogResource.fetchCollection({ getParams: this.getParams(), force: true }).then(
diff --git a/kolibri/plugins/coach/assets/src/modules/pluginModule.js b/kolibri/plugins/coach/assets/src/modules/pluginModule.js
index c6fb68862d7..9f79651f07f 100644
--- a/kolibri/plugins/coach/assets/src/modules/pluginModule.js
+++ b/kolibri/plugins/coach/assets/src/modules/pluginModule.js
@@ -70,9 +70,12 @@ export default {
       })
         .then(classrooms => {
           store.commit('SET_CLASS_LIST', classrooms);
+          store.commit('SET_DATA_LOADING', false);
         })
-        .catch(error => store.dispatch('handleApiError', error))
-        .finally(() => store.commit('SET_DATA_LOADING', false));
+        .catch(error => {
+          store.dispatch('handleApiError', error);
+          store.commit('SET_DATA_LOADING', false);
+        });
     },
     /**
       * Handle coach page errors.
diff --git a/kolibri/plugins/device/assets/src/modules/managePermissions/handlers.js b/kolibri/plugins/device/assets/src/modules/managePermissions/handlers.js
index eab3a558ef0..1eab560ac1b 100644
--- a/kolibri/plugins/device/assets/src/modules/managePermissions/handlers.js
+++ b/kolibri/plugins/device/assets/src/modules/managePermissions/handlers.js
@@ -22,18 +22,17 @@ export function showManagePermissionsPage(store) {
   store.commit('managePermissions/SET_LOADING_FACILITY_USERS', true);
   const promises = Promise.all([fetchFacilityUsers(store), fetchDevicePermissions()]);
   return promises
-    .then(function onSuccess([users, permissions]) {
+    .then(([users, permissions]) => {
       if (shouldResolve()) {
         store.commit('managePermissions/SET_STATE', {
           facilityUsers: users,
           permissions,
         });
       }
+      return store.commit('managePermissions/SET_LOADING_FACILITY_USERS', false);
     })
-    .catch(function onFailure(error) {
-      shouldResolve() ? store.dispatch('handleError', error) : null;
-    })
-    .finally(() => {
+    .catch(error => {
       store.commit('managePermissions/SET_LOADING_FACILITY_USERS', false);
+      return shouldResolve() ? store.dispatch('handleError', error) : null;
     });
 }
diff --git a/kolibri/plugins/facility/assets/src/modules/classManagement/handlers.js b/kolibri/plugins/facility/assets/src/modules/classManagement/handlers.js
index 75bab96ee51..3b2c18b1016 100644
--- a/kolibri/plugins/facility/assets/src/modules/classManagement/handlers.js
+++ b/kolibri/plugins/facility/assets/src/modules/classManagement/handlers.js
@@ -14,11 +14,10 @@ export function showClassesPage(store, toRoute) {
         classes: [...classrooms],
       });
       store.commit('CORE_SET_PAGE_LOADING', false);
+      store.commit('classManagement/SET_STATE', { dataLoading: false });
     })
     .catch(error => {
       store.dispatch('handleError', error);
-    })
-    .finally(() => {
       store.commit('classManagement/SET_STATE', { dataLoading: false });
     });
 }
diff --git a/kolibri/plugins/facility/assets/src/modules/userManagement/handlers.js b/kolibri/plugins/facility/assets/src/modules/userManagement/handlers.js
index bf80b33bcb7..d715ea42b46 100644
--- a/kolibri/plugins/facility/assets/src/modules/userManagement/handlers.js
+++ b/kolibri/plugins/facility/assets/src/modules/userManagement/handlers.js
@@ -20,21 +20,18 @@ export function showUserPage(store, toRoute, fromRoute) {
     }),
     force: true,
   })
-    .then(
-      users => {
-        if (shouldResolve()) {
-          store.commit('userManagement/SET_STATE', {
-            facilityUsers: users.results.map(_userState),
-            totalPages: users.total_pages,
-            usersCount: users.count,
-          });
-        }
-      },
-      error => {
-        shouldResolve() ? store.dispatch('handleError', error) : null;
+    .then(users => {
+      if (shouldResolve()) {
+        store.commit('userManagement/SET_STATE', {
+          facilityUsers: users.results.map(_userState),
+          totalPages: users.total_pages,
+          usersCount: users.count,
+        });
       }
-    )
-    .finally(() => {
+      store.commit('userManagement/SET_STATE', { dataLoading: false });
+    })
+    .catch(error => {
+      shouldResolve() ? store.dispatch('handleError', error) : null;
       store.commit('userManagement/SET_STATE', { dataLoading: false });
     });
 }

From c15cbe6f8882c8c1a73615f0e0b0c69a823c51e0 Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Fri, 2 Jun 2023 15:18:23 -0700
Subject: [PATCH 27/27] make querying the loading state default to false to
 appease tests

---
 kolibri/core/assets/src/views/CorePage/AppBarPage.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/kolibri/core/assets/src/views/CorePage/AppBarPage.vue b/kolibri/core/assets/src/views/CorePage/AppBarPage.vue
index cd1da022c61..f0e18d38f2c 100644
--- a/kolibri/core/assets/src/views/CorePage/AppBarPage.vue
+++ b/kolibri/core/assets/src/views/CorePage/AppBarPage.vue
@@ -54,6 +54,7 @@
 
   import { mapGetters } from 'vuex';
   import { get } from '@vueuse/core';
+  import _get from 'lodash/get';
   import LanguageSwitcherModal from 'kolibri.coreVue.components.LanguageSwitcherModal';
   import ScrollingHeader from 'kolibri.coreVue.components.ScrollingHeader';
   import useKResponsiveWindow from 'kolibri.coreVue.composables.useKResponsiveWindow';
@@ -101,7 +102,7 @@
       loading: {
         type: Boolean,
         default() {
-          return this.$store.state.core.loading;
+          return _get(this, '$store.state.core.loading', false);
         },
       },
     },