Add loading state for admin settings spaces and groups (#10929)

* Add loading state for admin settings spaces and groups * Add changelog item
owncloud · May 17, 2024 · efdb1a4 · efdb1a4
1 parent ce0c57d
commit efdb1a4
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 34 deletions.
diff --git a/changelog/unreleased/enhancement-add-loading-spinner-to-admin-settings-spaces-and-groups b/changelog/unreleased/enhancement-add-loading-spinner-to-admin-settings-spaces-and-groups
@@ -0,0 +1,7 @@
+Enhancement: Add loading spinner to admin settings spaces and groups
+
+We've added a loading spinner to the spaces and groups view in the admin settings to indicate loading task,
+when the server needs time to respond.
+
+https://github.com/owncloud/web/pull/10929
+https://github.com/owncloud/web/issues/10922
diff --git a/packages/web-app-admin-settings/src/views/Groups.vue b/packages/web-app-admin-settings/src/views/Groups.vue
@@ -28,23 +28,26 @@
         </div>
       </template>
       <template #mainContent>
-        <no-content-message
-          v-if="!groups.length"
-          id="admin-settings-groups-empty"
-          class="files-empty"
-          icon="user"
-        >
-          <template #message>
-            <span v-translate>No groups in here</span>
-          </template>
-        </no-content-message>
-        <div v-else>
-          <groups-list>
-            <template #contextMenu>
-              <context-actions :action-options="{ resources: selectedGroups }" />
+        <app-loading-spinner v-if="isLoading" />
+        <template v-else>
+          <no-content-message
+            v-if="!groups.length"
+            id="admin-settings-groups-empty"
+            class="files-empty"
+            icon="user"
+          >
+            <template #message>
+              <span v-translate>No groups in here</span>
             </template>
-          </groups-list>
-        </div>
+          </no-content-message>
+          <div v-else>
+            <groups-list>
+              <template #contextMenu>
+                <context-actions :action-options="{ resources: selectedGroups }" />
+              </template>
+            </groups-list>
+          </div>
+        </template>
       </template>
     </app-template>
   </div>
@@ -60,6 +63,7 @@ import MembersPanel from '../components/Groups/SideBar/MembersPanel.vue'
 import { useGroupSettingsStore } from '../composables'
 import { useGroupActionsCreateGroup, useGroupActionsDelete } from '../composables/actions/groups'
 import {
+  AppLoadingSpinner,
   NoContentMessage,
   SideBarPanel,
   SideBarPanelContext,
@@ -75,6 +79,7 @@ import { storeToRefs } from 'pinia'
 
 export default defineComponent({
   components: {
+    AppLoadingSpinner,
     AppTemplate,
     GroupsList,
     NoContentMessage,
@@ -109,6 +114,10 @@ export default defineComponent({
       )
     })
 
+    const isLoading = computed(() => {
+      return loadResourcesTask.isRunning || !loadResourcesTask.last
+    })
+
     const sideBarPanelContext = computed<SideBarPanelContext<unknown, unknown, Group>>(() => {
       return {
         parent: null,
@@ -168,7 +177,8 @@ export default defineComponent({
       sideBarAvailablePanels,
       sideBarPanelContext,
       createGroupAction,
-      groupSettingsStore
+      groupSettingsStore,
+      isLoading
     }
   },
   computed: {

diff --git a/packages/web-app-admin-settings/src/views/Spaces.vue b/packages/web-app-admin-settings/src/views/Spaces.vue
@@ -21,23 +21,26 @@
         />
       </template>
       <template #mainContent>
-        <no-content-message
-          v-if="!spaces.length"
-          id="admin-settings-spaces-empty"
-          class="spaces-empty"
-          icon="layout-grid"
-        >
-          <template #message>
-            <span v-translate>No spaces in here</span>
-          </template>
-        </no-content-message>
-        <div v-else>
-          <spaces-list :class="{ 'spaces-table-squashed': isSideBarOpen }">
-            <template #contextMenu>
-              <context-actions :items="selectedSpaces" />
+        <app-loading-spinner v-if="isLoading" />
+        <template v-else>
+          <no-content-message
+            v-if="!spaces.length"
+            id="admin-settings-spaces-empty"
+            class="spaces-empty"
+            icon="layout-grid"
+          >
+            <template #message>
+              <span v-translate>No spaces in here</span>
             </template>
-          </spaces-list>
-        </div>
+          </no-content-message>
+          <div v-else>
+            <spaces-list :class="{ 'spaces-table-squashed': isSideBarOpen }">
+              <template #contextMenu>
+                <context-actions :items="selectedSpaces" />
+              </template>
+            </spaces-list>
+          </div>
+        </template>
       </template>
     </app-template>
   </div>
@@ -67,7 +70,8 @@ import {
   useSpaceActionsDisable,
   useSpaceActionsRestore,
   useSpaceActionsEditQuota,
-  useConfigStore
+  useConfigStore,
+  AppLoadingSpinner
 } from '@ownclouders/web-pkg'
 import { buildSpace, call, SpaceResource } from '@ownclouders/web-client'
 import { computed, defineComponent, onBeforeUnmount, onMounted, ref, unref } from 'vue'
@@ -81,6 +85,7 @@ import { Quota } from '@ownclouders/web-client/graph/generated'
 export default defineComponent({
   name: 'SpacesView',
   components: {
+    AppLoadingSpinner,
     SpacesList,
     AppTemplate,
     NoContentMessage,
@@ -126,6 +131,10 @@ export default defineComponent({
       spaceSettingsStore.setSpaces(drives)
     })
 
+    const isLoading = computed(() => {
+      return loadResourcesTask.isRunning || !loadResourcesTask.last
+    })
+
     const breadcrumbs = computed(() => [
       { text: $gettext('Administration Settings'), to: { path: '/admin-settings' } },
       {
@@ -254,6 +263,7 @@ export default defineComponent({
       selectedSpaces,
       sideBarAvailablePanels,
       sideBarPanelContext,
+      isLoading,
       template
     }
   }