Add disabled state to pagination navigation buttons

- Disable decrement button when on first page (page <= 1)
- Disable increment button when on last page (page >= lastPage)
- Prevents users from triggering invalid page navigation requests
- Improves UX by providing visual feedback for boundary conditions

This change prevents unnecessary API calls and improves user experience by clearly indicating when navigation bounds have been reached. The buttons will now be disabled at the appropriate boundaries, matching the behavior already present in the numbered page navigation section.
This commit is contained in:
2026-03-22 21:17:20 -04:00
parent d841fee1e7
commit 6bbe0f0f48

View File

@@ -158,6 +158,7 @@
id="decrement-button" id="decrement-button"
on:click={() => ChangeWatchListPage(page - 1)} on:click={() => ChangeWatchListPage(page - 1)}
class="bg-gray-700 hover:bg-gray-600 border-gray-600 border rounded-s-lg p-3 h-11 focus:ring-gray-700 focus:ring-2 focus:outline-none" class="bg-gray-700 hover:bg-gray-600 border-gray-600 border rounded-s-lg p-3 h-11 focus:ring-gray-700 focus:ring-2 focus:outline-none"
disabled={page <= 1}
> >
<svg <svg
class="w-3 h-3 text-white" class="w-3 h-3 text-white"
@@ -195,6 +196,7 @@
id="increment-button" id="increment-button"
on:click={() => ChangeWatchListPage(page + 1)} on:click={() => ChangeWatchListPage(page + 1)}
class="hover:bg-gray-600 border-gray-600 border rounded-e-lg p-3 h-11 focus:ring-gray-700 focus:ring-2 focus:outline-none" class="hover:bg-gray-600 border-gray-600 border rounded-e-lg p-3 h-11 focus:ring-gray-700 focus:ring-2 focus:outline-none"
disabled={page >= aniListWatchListLoaded.data.Page.pageInfo.lastPage}
> >
<svg <svg
class="w-3 h-3 text-white" class="w-3 h-3 text-white"