fix(list): adds loaded indicator and fix load more

Author: dvcol

src/components/common/list/ListEmpty.vue

@@ -48,7 +48,9 @@ const emit = defineEmits<{
 
 <style scoped lang="scss">
 .empty {
-  margin-top: 0.5rem;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 1rem;
   color: var(--n-text-color);
   transition: color 0.3s var(--n-bezier);
 

src/components/common/list/ListLoadMore.vue

@@ -1,11 +1,27 @@
 <script setup lang="ts">
 import { NButton } from 'naive-ui';
 
+import { computed, toRefs } from 'vue';
+
 import { useI18n } from '~/utils/i18n.utils';
 
 const i18n = useI18n('list', 'more');
 
-defineProps({
+const props = defineProps({
+  search: {
+    type: String,
+    required: false,
+  },
+  items: {
+    type: Number,
+    required: false,
+    default: 0,
+  },
+  itemCount: {
+    type: Number,
+    required: false,
+    default: 0,
+  },
   page: {
     type: Number,
     required: false,
@@ -29,37 +45,58 @@ const emit = defineEmits<{
     pagination: { page: number; pageCount: number; pageSize: number },
   ): void;
 }>();
+
+const { page, pageCount } = toRefs(props);
+
+const showButton = computed(() => page.value < pageCount.value);
 </script>
 
 <template>
-  <template v-if="page && pageCount">
-    <div class="row">
-      {{ i18n('pages_line_1') }} <span class="page"> {{ page }} </span>
-      {{ i18n('pages_line_2') }} <span class="page"> {{ pageCount }} </span>
-      {{ i18n('pages_line_3') }}
-    </div>
-    <div class="row">
-      {{ i18n('current_page_size') }} <span class="page"> {{ pageSize }} </span>.
-    </div>
-    <template v-if="page < pageCount">
-      <NButton
-        class="button"
-        tertiary
-        round
-        type="primary"
-        @click="emit('onLoadMore', { page, pageCount, pageSize })"
-      >
-        Load more Pages
-      </NButton>
-    </template>
-  </template>
+  <div v-if="items && itemCount" class="row items" :class="{ offset: !showButton }">
+    <span class="page"> {{ items }} </span> {{ i18n('out_of') }}
+    <span class="page"> {{ itemCount }} </span>
+    {{ i18n('pages') }}
+  </div>
+  <div class="row">
+    <span class="page"> {{ page }} </span> {{ i18n('out_of') }}
+    <span class="page"> {{ pageCount }} </span>
+    {{ i18n('items') }}
+  </div>
+  <div class="row">
+    {{ i18n('page_size') }} <span class="page"> {{ pageSize }} </span>
+  </div>
+  <Transition name="fade">
+    <NButton
+      v-if="showButton"
+      class="button"
+      tertiary
+      round
+      type="primary"
+      @click="emit('onLoadMore', { page, pageCount, pageSize })"
+    >
+      {{ i18n('load_more') }}
+    </NButton>
+  </Transition>
 </template>
 
 <style scoped lang="scss">
+@use '~/styles/transition' as transition;
+@include transition.fade;
+
 .row {
   margin-top: 0.5rem;
   color: var(--n-text-color);
-  transition: color 0.3s var(--n-bezier);
+  transition:
+    color 0.3s var(--n-bezier),
+    margin 0.3s var(--n-bezier);
+
+  &:first-child {
+    margin-top: 1.5rem;
+
+    &.offset {
+      margin-top: 2rem;
+    }
+  }
 
   .page {
     color: var(--color-primary-disabled);

src/components/common/list/ListScroll.vue

@@ -232,7 +232,7 @@ const listPaddingBottom = computed(() => listOptions?.value?.paddingBottom ?? 8)
         <slot v-if="item.type === ListScrollItemType.LoadMore" name="load-more">
           <NFlex
             class="load-more"
-            justify="center"
+            justify="flex-start"
             align="center"
             vertical
             size="small"
@@ -242,11 +242,32 @@ const listPaddingBottom = computed(() => listOptions?.value?.paddingBottom ?? 8)
             <ListLoadMore
               :page="pagination?.page"
               :page-count="pagination?.pageCount"
+              :items="items.length > 1 ? items.length - 1 : 0"
+              :item-count="pagination?.itemCount"
               :page-size="pageSize"
               @on-load-more="onLoadMore"
             />
           </NFlex>
         </slot>
+        <slot v-else-if="item.type === ListScrollItemType.AllLoaded" name="empty">
+          <NFlex
+            class="all-loaded"
+            justify="flex-start"
+            align="center"
+            vertical
+            size="small"
+            :theme-overrides="{ gapSmall: '0' }"
+            :style="`height: ${listOptions?.itemSize ?? defaultSize}px;`"
+          >
+            <ListLoadMore
+              :page="pagination?.page"
+              :page-count="pagination?.pageCount"
+              :items="items.length > 1 ? items.length - 1 : 0"
+              :item-count="pagination?.itemCount"
+              :page-size="pageSize"
+            />
+          </NFlex>
+        </slot>
         <ListItem
           v-else
           :key="item.id"
@@ -294,8 +315,8 @@ const listPaddingBottom = computed(() => listOptions?.value?.paddingBottom ?? 8)
   height: var(--full-height);
   margin-top: calc(0% - #{layout.$safe-navbar-height});
 
+  .all-loaded,
   .load-more {
-    margin-top: 1rem;
     opacity: 0;
     animation: fade-in 0.5s forwards;
     animation-delay: 0.25s;

src/i18n/en/list/list.json

@@ -1,23 +1,27 @@
 {
   "list__empty__no_data": {
-    "message": "No data found.",
+    "message": "No data found",
     "description": "Empty message when there is no data to display in the list."
   },
-  "list__more__pages_line_1": {
-    "message": "Searched",
-    "description": "First line of the list empty pagination message."
-  },
-  "list__more__pages_line_2": {
+  "list__more__out_of": {
     "message": "out of",
-    "description": "Second line of the list empty pagination message."
+    "description": "Second line of the list load more pagination message."
+  },
+  "list__more__pages": {
+    "message": "pages",
+    "description": "Third line of the list load more pagination message."
+  },
+  "list__more__items": {
+    "message": "items",
+    "description": "Third line of the list load more pagination message."
   },
-  "list__more__pages_line_3": {
-    "message": "pages.",
-    "description": "Third line of the list empty pagination message."
+  "list__more__page_size": {
+    "message": "page size",
+    "description": "page size label."
   },
-  "list__more__current_page_size": {
-    "message": "Current page size is",
-    "description": "Current page size label."
+  "list__more__load_more": {
+    "message": "Load more Pages",
+    "description": "Load more Pages."
   },
   "list__item__placeholder_empty": {
     "message": "Nothing on this day.",