Avoid hiding PaginationArrow component when disabled

[kcubero27]

Hi team! 👋🏻
I was using the pagination component when I realized that I couldn't find a way to disable it. As soon as I pass the disabled property to true, the component is hidden. My idea was more to disable the component when the user is trying to load more items so that they cannot fetch twice the same request but still see the component. A workaround at the moment is to remove the loading property from the disabled and verify on the onClick it's loading or not.

Here I have a code example:

<Pagination label="custom label pagination navigation">
          <PaginationItems>
            <PaginationArrow
              label="Go to previous"
              variant="back"
              visibleLabel={buttonText.prev}
              disabled={disablePrev || loading}
              onClick={handlePrev}
            />
            <PaginationArrow
              label="Go to next"
              variant="forward"
              visibleLabel={buttonText.next}
              disabled={disableNext || loading}
              onClick={handleNext}
            />
          </PaginationItems>
        </Pagination>

As you can see on the code itself, as soon as the property is set to true, the component is hidden: https://github.com/twilio-labs/paste/blob/main/packages/paste-core/components/pagination/src/PaginationArrow/PaginationArrowButton.tsx#L33

I would like to ask if it's possible to change this behavior and be able to show the component with a different opacity or color (similar to what happens to buttons when they are disabled). What are your thoughts on this?

[shleewhite]

Hi @kcubero27!

For this situation, we actually recommend handling this outside of the pagination button. In your onClick function, you can add a debounce or cancel a request if another one happens in rapid succession. The reason being, it would be frustrating for an end user if they want to jump forward 3 pages, you have to press next and then wait each time for the data to load.

Also, when the data is loading, you should use the Skeleton Loader component.

Please let us know if you have any more questions!