feat(pagination): can now click to load next page as fallback

Rule-34 · Jan 30, 2024 · e5442c2 · e5442c2
1 parent d6a42e4
commit e5442c2
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 6 deletions.
diff --git a/pages/posts/[domain].vue b/pages/posts/[domain].vue
@@ -654,9 +654,27 @@
 
         <!-- Next Pagination -->
         <PostsPagination @load-next-page="onLoadNextPostPage">
-          <span v-if="isFetchingNextPage">Loading more&hellip;</span>
-          <span v-else-if="hasNextPage">Reach here to load more</span>
-          <span v-else>Nothing more to load</span>
+          <span
+            v-if="isFetchingNextPage"
+            class="block rounded-md px-1.5 py-1"
+          >
+            Loading more&hellip;
+          </span>
+
+          <button
+            v-else-if="hasNextPage"
+            class="focus-visible:focus-outline-util hover:hover-bg-util hover:hover-text-util rounded-md px-1.5 py-1"
+            @click="onLoadNextPostPage"
+          >
+            Scroll here or click me to load more
+          </button>
+
+          <span
+            v-else
+            class="block rounded-md px-1.5 py-1"
+          >
+            Nothing more to load
+          </span>
         </PostsPagination>
       </div>
     </section>

diff --git a/pages/premium/saved-posts/[domain].vue b/pages/premium/saved-posts/[domain].vue
@@ -502,9 +502,27 @@
 
         <!-- Next Pagination -->
         <PostsPagination @load-next-page="onLoadNextPostPage">
-          <span v-if="isFetchingNextPage">Loading more&hellip;</span>
-          <span v-else-if="hasNextPage">Reach here to load more</span>
-          <span v-else>Nothing more to load</span>
+          <span
+            v-if="isFetchingNextPage"
+            class="block rounded-md px-1.5 py-1"
+          >
+            Loading more&hellip;
+          </span>
+
+          <button
+            v-else-if="hasNextPage"
+            class="focus-visible:focus-outline-util hover:hover-bg-util hover:hover-text-util rounded-md px-1.5 py-1"
+            @click="onLoadNextPostPage"
+          >
+            Scroll here or click me to load more
+          </button>
+
+          <span
+            v-else
+            class="block rounded-md px-1.5 py-1"
+          >
+            Nothing more to load
+          </span>
         </PostsPagination>
       </div>
     </section>