Improve loading state (#209)

Co-authored-by: Nicolas Kempf Le Stanc <[email protected]>
datagouv · Dec 16, 2024 · e126734 · e126734
1 parent 6daf0db
commit e126734
Show file tree

Hide file tree

Showing 17 changed files with 452 additions and 415 deletions.
diff --git a/components/AdminTable/AdminCommunityResourcesTable/AdminCommunityResourcesTable.vue b/components/AdminTable/AdminCommunityResourcesTable/AdminCommunityResourcesTable.vue
@@ -1,5 +1,5 @@
 <template>
-  <AdminTable :loading>
+  <AdminTable>
     <thead>
       <AdminTableTh
         :sorted="sorted('title')"
@@ -77,11 +77,10 @@ import AdminBadge from '../../../components/AdminBadge/AdminBadge.vue'
 import AdminTable from '../../../components/AdminTable/Table/AdminTable.vue'
 import AdminTableTh from '../../../components/AdminTable/Table/AdminTableTh.vue'
 import AdminContentWithTooltip from '../../../components/AdminContentWithTooltip/AdminContentWithTooltip.vue'
-import type { AdminBadgeState, AdminBadgeType, CommunityResourceSortedBy, SortDirection } from '~/types/types'
+import type { AdminBadgeType, CommunityResourceSortedBy, SortDirection } from '~/types/types'
 
 const props = defineProps<{
   communityResources: Array<CommunityResource>
-  loading: boolean
   sortedBy: CommunityResourceSortedBy
   sortDirection: SortDirection
 }>()

diff --git a/components/AdminTable/AdminDataservicesTable/AdminDataservicesTable.vue b/components/AdminTable/AdminDataservicesTable/AdminDataservicesTable.vue
@@ -1,5 +1,5 @@
 <template>
-  <AdminTable :loading>
+  <AdminTable>
     <thead>
       <tr>
         <AdminTableTh
@@ -46,12 +46,18 @@
           </AdminContentWithTooltip>
         </td>
         <td>
-          <AdminBadge size="xs" :type="getStatus(dataservice).type">
+          <AdminBadge
+            size="xs"
+            :type="getStatus(dataservice).type"
+          >
             {{ getStatus(dataservice).label }}
           </AdminBadge>
         </td>
         <td>
-          <AdminBadge size="xs" :type="getAccess(dataservice).type">
+          <AdminBadge
+            size="xs"
+            :type="getAccess(dataservice).type"
+          >
             {{ getAccess(dataservice).label }}
           </AdminBadge>
         </td>
@@ -71,11 +77,10 @@ import AdminBadge from '../../../components/AdminBadge/AdminBadge.vue'
 import AdminTable from '../../../components/AdminTable/Table/AdminTable.vue'
 import AdminTableTh from '../../../components/AdminTable/Table/AdminTableTh.vue'
 import AdminContentWithTooltip from '../../../components/AdminContentWithTooltip/AdminContentWithTooltip.vue'
-import type { AdminBadgeState, AdminBadgeType, DataserviceSortedBy, SortDirection } from '~/types/types'
+import type { AdminBadgeType, DataserviceSortedBy, SortDirection } from '~/types/types'
 
 const props = defineProps<{
   dataservices: Array<Dataservice>
-  loading: boolean
   sortedBy: DataserviceSortedBy
   sortDirection: SortDirection
 }>()

diff --git a/components/AdminTable/AdminDatasetsTable/AdminDatasetsTable.vue b/components/AdminTable/AdminDatasetsTable/AdminDatasetsTable.vue
@@ -1,5 +1,5 @@
 <template>
-  <AdminTable :loading>
+  <AdminTable>
     <thead>
       <tr>
         <AdminTableTh
@@ -121,7 +121,10 @@
           </AdminContentWithTooltip>
         </td>
         <td>
-          <AdminBadge size="xs" :type="getStatus(dataset).type">
+          <AdminBadge
+            size="xs"
+            :type="getStatus(dataset).type"
+          >
             {{ getStatus(dataset).label }}
           </AdminBadge>
         </td>
@@ -175,15 +178,14 @@ import AdminContentWithTooltip from '../../AdminContentWithTooltip/AdminContentW
 import AdminTable from '../Table/AdminTable.vue'
 import AdminTableTh from '../Table/AdminTableTh.vue'
 import Tooltip from '../../Tooltip/Tooltip.vue'
-import type { AdminBadgeState, AdminBadgeType, DatasetSortedBy, SortDirection } from '~/types/types'
+import type { AdminBadgeType, DatasetSortedBy, SortDirection } from '~/types/types'
 
 const emit = defineEmits<{
   (event: 'sort', column: DatasetSortedBy, direction: SortDirection): void
 }>()
 
 const props = defineProps<{
   datasets: Array<Dataset | DatasetV2>
-  loading: boolean
   sortDirection?: SortDirection
   sortedBy?: DatasetSortedBy
 }>()

diff --git a/components/AdminTable/AdminDiscussionsTable/AdminDiscussionsTable.vue b/components/AdminTable/AdminDiscussionsTable/AdminDiscussionsTable.vue
@@ -1,5 +1,5 @@
 <template>
-  <AdminTable :loading>
+  <AdminTable>
     <thead>
       <tr>
         <AdminTableTh
@@ -108,7 +108,6 @@ import { getDiscussionUrl, getSubject, getSubjectTypeIcon, getSubjectTitle } fro
 
 const props = defineProps<{
   discussions: Array<Thread>
-  loading: boolean
   sortDirection: SortDirection
   sortedBy: DiscussionSortedBy
 }>()

diff --git a/components/AdminTable/AdminReusesTable/AdminReusesTable.vue b/components/AdminTable/AdminReusesTable/AdminReusesTable.vue
@@ -1,5 +1,5 @@
 <template>
-  <AdminTable :loading>
+  <AdminTable>
     <thead>
       <tr>
         <AdminTableTh
@@ -89,7 +89,10 @@
           </AdminContentWithTooltip>
         </td>
         <td>
-          <AdminBadge size="xs" :type="getStatus(reuse).type">
+          <AdminBadge
+            size="xs"
+            :type="getStatus(reuse).type"
+          >
             {{ getStatus(reuse).label }}
           </AdminBadge>
         </td>
@@ -120,11 +123,10 @@ import AdminTable from '../../../components/AdminTable/Table/AdminTable.vue'
 import AdminTableTh from '../../../components/AdminTable/Table/AdminTableTh.vue'
 import AdminContentWithTooltip from '../../../components/AdminContentWithTooltip/AdminContentWithTooltip.vue'
 import Tooltip from '../../../components/Tooltip/Tooltip.vue'
-import type { AdminBadgeState, AdminBadgeType, ReuseSortedBy, SortDirection } from '~/types/types'
+import type { AdminBadgeType, ReuseSortedBy, SortDirection } from '~/types/types'
 
 const props = defineProps<{
   reuses: Array<Reuse>
-  loading: boolean
   sortedBy: ReuseSortedBy
   sortDirection: SortDirection
 }>()
@@ -133,7 +135,6 @@ defineEmits<{
   (event: 'sort', column: ReuseSortedBy, direction: SortDirection): void
 }>()
 
-const config = useRuntimeConfig()
 const { t } = useI18n()
 
 function sorted(column: ReuseSortedBy) {

diff --git a/components/CommunityResources/AdminCommunityResourcesPage.vue b/components/CommunityResources/AdminCommunityResourcesPage.vue
@@ -32,7 +32,7 @@
     <div class="fr-grid-row fr-grid-row--gutters fr-grid-row--middle">
       <div class="fr-col">
         <h2
-          v-if="status === 'success' && pageData.total"
+          v-if="pageData && pageData.total"
           class="subtitle subtitle--uppercase fr-m-0"
         >
           {{ t('{n} community resources', pageData.total) }}
@@ -42,33 +42,36 @@
         <!-- Buttons -->
       </div>
     </div>
-    <AdminCommunityResourcesTable
-      v-if="status === 'pending' || (status === 'success' && pageData.total > 0)"
-      :community-resources="pageData ? pageData.data : []"
-      :loading="status === 'pending'"
-      :sort-direction="direction"
-      :sorted-by
-      @sort="sort"
-    />
+
+    <LoadingBlock :status>
+      <div v-if="pageData && pageData.total > 0">
+        <AdminCommunityResourcesTable
+          :community-resources="pageData ? pageData.data : []"
+          :sort-direction="direction"
+          :sorted-by
+          @sort="sort"
+        />
+        <Pagination
+          :page="page"
+          :page-size="pageSize"
+          :total-results="pageData.total"
+          @change="(changedPage: number) => page = changedPage"
+        />
+      </div>
+    </LoadingBlock>
+
     <div
-      v-else
+      v-if="pageData && !pageData.total"
       class="flex flex-col items-center"
     >
-      <!-- <nuxt-img
-        src="/illustrations/dataset.svg"
+      <nuxt-img
+        src="/illustrations/schema.svg"
         class="h-20"
-      /> -->
+      />
       <p class="fr-text--bold fr-my-3v">
         {{ t(`You haven't published a community resource yet`) }}
       </p>
     </div>
-    <Pagination
-      v-if="status === 'success' && pageData.total > pageSize"
-      :page="page"
-      :page-size="pageSize"
-      :total-results="pageData.total"
-      @change="(changedPage: number) => page = changedPage"
-    />
   </div>
 </template>
 

diff --git a/components/Dataservices/AdminDataservicesPage.vue b/components/Dataservices/AdminDataservicesPage.vue
@@ -32,7 +32,7 @@
     <div class="fr-grid-row fr-grid-row--gutters fr-grid-row--middle">
       <div class="fr-col">
         <h2
-          v-if="status === 'success' && pageData.total"
+          v-if="pageData && pageData.total"
           class="subtitle subtitle--uppercase fr-m-0"
         >
           {{ t('{n} dataservices', pageData.total) }}
@@ -46,16 +46,26 @@
         />
       </div>
     </div>
-    <AdminDataservicesTable
-      v-if="status === 'pending' || (status === 'success' && pageData.total > 0)"
-      :dataservices="pageData ? pageData.data : []"
-      :loading="status === 'pending'"
-      :sort-direction="direction"
-      :sorted-by
-      @sort="sort"
-    />
+
+    <LoadingBlock :status>
+      <div v-if="pageData && pageData.total > 0">
+        <AdminDataservicesTable
+          :dataservices="pageData ? pageData.data : []"
+          :sort-direction="direction"
+          :sorted-by
+          @sort="sort"
+        />
+        <Pagination
+          :page="page"
+          :page-size="pageSize"
+          :total-results="pageData.total"
+          @change="(changedPage: number) => page = changedPage"
+        />
+      </div>
+    </LoadingBlock>
+
     <div
-      v-else
+      v-if="pageData && !pageData.total"
       class="flex flex-col items-center"
     >
       <nuxt-img
@@ -67,13 +77,6 @@
       </p>
       <AdminPublishButton type="dataservice" />
     </div>
-    <Pagination
-      v-if="status === 'success' && pageData.total > pageSize"
-      :page="page"
-      :page-size="pageSize"
-      :total-results="pageData.total"
-      @change="(changedPage: number) => page = changedPage"
-    />
   </div>
 </template>