TMP: feat: add "Load more" button to paginator for better well-being

Author: shuuji3

app/components/common/CommonPaginator.vue

@@ -45,7 +45,15 @@ defineSlots<{
 const { t } = useI18n()
 const nuxtApp = useNuxtApp()
 
-const { items, prevItems, update, state, endAnchor, error } = usePaginator(paginator, toRef(() => stream), eventType, preprocess)
+const {
+  items,
+  prevItems,
+  update,
+  state,
+  endAnchor,
+  error,
+  canLoadMore,
+} = usePaginator(paginator, toRef(() => stream), eventType, preprocess)
 
 nuxtApp.hook('elk-logo:click', () => {
   update()
@@ -117,5 +125,18 @@ defineExpose({ createEntry, removeEntry, updateEntry })
     <div v-else-if="state === 'error'" p5 text-secondary>
       {{ t('common.error') }}: {{ error }}
     </div>
+    <!-- TODO: debug -->
+    <div flex="~ center col">
+      <button
+        flex btn-solid mt-1
+        :title="$t('settings.notifications.push_notifications.warning.enable_close')"
+        @click="canLoadMore = true"
+      >
+        Load more
+      </button>
+      <p m-y-4>
+        debug: canLoadMore="{{ canLoadMore }}" / state="{{ state }}"
+      </p>
+    </div>
   </div>
 </template>

app/composables/paginator.ts

@@ -18,6 +18,7 @@ export function usePaginator<T, P, U = T>(
   const items = ref<U[]>([])
   const nextItems = ref<U[]>([])
   const prevItems = ref<T[]>([])
+  const canLoadMore = ref<boolean>(false)
 
   const endAnchor = ref<HTMLDivElement>()
   const bound = useElementBounding(endAnchor)
@@ -70,7 +71,7 @@ export function usePaginator<T, P, U = T>(
   }, { immediate: true })
 
   async function loadNext() {
-    if (state.value !== 'idle')
+    if (state.value !== 'idle' || !canLoadMore.value)
       return
 
     state.value = 'loading'
@@ -99,6 +100,7 @@ export function usePaginator<T, P, U = T>(
       error.value = e
       state.value = 'error'
     }
+    canLoadMore.value = false
 
     await nextTick()
     bound.update()
@@ -123,6 +125,7 @@ export function usePaginator<T, P, U = T>(
           && state.value === 'idle'
           // No new content is loaded when the keepAlive page enters the background
           && deactivated.value === false
+          && canLoadMore.value
         ) {
           loadNext()
         }
@@ -137,5 +140,6 @@ export function usePaginator<T, P, U = T>(
     state,
     error,
     endAnchor,
+    canLoadMore,
   }
 }