diff --git a/kolibri/core/assets/src/views/CorePage/AppBarPage.vue b/kolibri/core/assets/src/views/CorePage/AppBarPage.vue
index 6590ef7c76c..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';
@@ -100,7 +101,9 @@
       },
       loading: {
         type: Boolean,
-        default: null,
+        default() {
+          return _get(this, '$store.state.core.loading', false);
+        },
       },
     },
     data() {
diff --git a/kolibri/core/assets/src/views/CoreTable.vue b/kolibri/core/assets/src/views/CoreTable.vue
index d55d9a88dba..15663d0a0a6 100644
--- a/kolibri/core/assets/src/views/CoreTable.vue
+++ b/kolibri/core/assets/src/views/CoreTable.vue
@@ -1,9 +1,14 @@
 <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 },
     props: {
       selectable: {
         type: Boolean,
@@ -14,6 +19,11 @@
         type: String,
         default: null,
       },
+      dataLoading: {
+        type: Boolean,
+        default: false,
+        required: false,
+      },
     },
     computed: {
       tHeadStyle() {
@@ -73,9 +83,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) {
+        logging.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. If we have rows, then we show the table alone
+       */
+      var dataStatusEl = this.dataLoading
+        ? createElement('p', [createElement(KCircularLoader)])
+        : !tableHasRows && createElement('p', this.emptyMessage); // Only show message if no rows
 
       return createElement('div', { class: 'core-table-container' }, [
         createElement('table', { class: 'core-table' }, [
@@ -83,7 +103,7 @@
           theadEl,
           tbodyCopy,
         ]),
-        showEmptyMessage && createElement('p', this.emptyMessage),
+        dataStatusEl,
       ]);
     },
   };
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/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..d5aca01adff 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">
@@ -188,13 +188,6 @@
       </template>
     </CoreTable>
 
-    <p
-      v-if="!users || !users.length"
-      class="empty-message"
-    >
-      {{ emptyMessage }}
-    </p>
-
   </div>
 
 </template>
@@ -270,6 +263,10 @@
         type: String,
         default: '',
       },
+      dataLoading: {
+        type: Boolean,
+        default: false,
+      },
     },
     computed: {
       showSelectAllCheckbox() {
diff --git a/kolibri/plugins/coach/assets/src/modules/pluginModule.js b/kolibri/plugins/coach/assets/src/modules/pluginModule.js
index 376fc501aba..9f79651f07f 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,19 @@ 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' },
       })
         .then(classrooms => {
           store.commit('SET_CLASS_LIST', classrooms);
+          store.commit('SET_DATA_LOADING', false);
         })
-        .catch(error => store.dispatch('handleApiError', error));
+        .catch(error => {
+          store.dispatch('handleApiError', error);
+          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) {
diff --git a/kolibri/plugins/device/assets/src/modules/managePermissions/handlers.js b/kolibri/plugins/device/assets/src/modules/managePermissions/handlers.js
index 697b754ae1b..1eab560ac1b 100644
--- a/kolibri/plugins/device/assets/src/modules/managePermissions/handlers.js
+++ b/kolibri/plugins/device/assets/src/modules/managePermissions/handlers.js
@@ -19,17 +19,20 @@ 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]) {
+    .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;
+    .catch(error => {
+      store.commit('managePermissions/SET_LOADING_FACILITY_USERS', false);
+      return shouldResolve() ? store.dispatch('handleError', error) : null;
     });
 }
diff --git a/kolibri/plugins/device/assets/src/modules/managePermissions/index.js b/kolibri/plugins/device/assets/src/modules/managePermissions/index.js
index e73f4b5536f..019fac706df 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) {
+      state.loadingFacilityUsers = loadingFacilityUsers;
+    },
   },
 };
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');
       },
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,
diff --git a/kolibri/plugins/facility/assets/src/modules/classEditManagement/handlers.js b/kolibri/plugins/facility/assets/src/modules/classEditManagement/handlers.js
index c0f99b0389a..fd5319e00ba 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,22 +16,17 @@ export function showClassEditPage(store, classId) {
     ClassroomResource.fetchModel({ id: classId, force: true }),
     ClassroomResource.fetchCollection({ getParams: { parent: facilityId }, force: true }),
   ];
-  const shouldResolve = samePageCheckGenerator(store);
-  Promise.all(promises).then(
-    ([facilityUsers, classroom, classrooms]) => {
-      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('CORE_SET_PAGE_LOADING', false);
-      }
-    },
-    error => {
-      shouldResolve() ? store.dispatch('handleError', error) : null;
-    }
-  );
+  store.commit('classEditManagement/SET_DATA_LOADING', true);
+  Promise.all(promises)
+    .then(([facilityUsers, classroom, classrooms]) => {
+      store.commit('classEditManagement/SET_DATA_LOADING', false);
+      store.commit('classEditManagement/SET_STATE', {
+        modalShown: false,
+        currentClass: classroom,
+        classes: classrooms,
+        classLearners: sortUsersByFullName(facilityUsers).map(_userState),
+        classCoaches: sortUsersByFullName(classroom.coaches).map(_userState),
+      });
+    })
+    .catch(error => store.dispatch('handleError', 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/handlers.js b/kolibri/plugins/facility/assets/src/modules/classManagement/handlers.js
index 6dc76655a3f..3b2c18b1016 100644
--- a/kolibri/plugins/facility/assets/src/modules/classManagement/handlers.js
+++ b/kolibri/plugins/facility/assets/src/modules/classManagement/handlers.js
@@ -1,25 +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);
+      store.commit('classManagement/SET_STATE', { dataLoading: false });
+    })
+    .catch(error => {
+      store.dispatch('handleError', error);
+      store.commit('classManagement/SET_STATE', { dataLoading: false });
+    });
 }
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);
 }
diff --git a/kolibri/plugins/facility/assets/src/modules/userManagement/handlers.js b/kolibri/plugins/facility/assets/src/modules/userManagement/handlers.js
index d49688ab958..d715ea42b46 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.commit('userManagement/SET_STATE', { dataLoading: true });
   if (toRoute.name !== fromRoute.name) {
     store.dispatch('preparePage');
   }
@@ -18,19 +19,19 @@ export function showUserPage(store, toRoute, fromRoute) {
       user_type: toRoute.query.user_type,
     }),
     force: true,
-  }).then(
-    users => {
+  })
+    .then(users => {
       if (shouldResolve()) {
         store.commit('userManagement/SET_STATE', {
           facilityUsers: users.results.map(_userState),
           totalPages: users.total_pages,
           usersCount: users.count,
         });
-        store.commit('CORE_SET_PAGE_LOADING', false);
       }
-    },
-    error => {
+      store.commit('userManagement/SET_STATE', { dataLoading: false });
+    })
+    .catch(error => {
       shouldResolve() ? store.dispatch('handleError', error) : null;
-    }
-  );
+      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/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
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']);
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/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 [
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..4a4d374f843 100644
--- a/kolibri/plugins/learn/assets/src/views/LearnAppBarPage.vue
+++ b/kolibri/plugins/learn/assets/src/views/LearnAppBarPage.vue
@@ -63,16 +63,16 @@
         type: String,
         default: null,
       },
-      loading: {
-        type: Boolean,
-        default: null,
-      },
       route: {
         type: Object,
         default() {
           return {};
         },
       },
+      loading: {
+        type: Boolean,
+        default: false,
+      },
     },
     computed: {
       page() {
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/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 -->
diff --git a/kolibri/plugins/learn/assets/src/views/classes/LessonPlaylistPage.vue b/kolibri/plugins/learn/assets/src/views/classes/LessonPlaylistPage.vue
index 26c28dec290..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>
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(),
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,