Load More Pagination

Overview

In e-commerce, pagination refers to the process of dividing search results or product listings into multiple pages, which allows users to navigate through the pages of products. It is used to split large sets of products into smaller, more manageable chunks, which can improve the performance of the website and also user experience.

Load More Pagination includes a “Load More” button, so users can load the next set of products at their own discretion. This can be beneficial for users that may want to control the amount of information they see at once and also, it can be helpful for the website to limit the amount of data loaded at once to improve the performance.

Usage

// importing component
import { LoadMorePagination } from "@unbxd-ui/react-search-components";
 
// import the style for the component
import "@unbxd-ui/react-search-components/styles/loadMorePagination.css";

If the styles import does not work, use the following code to import it:

require.resolve("@unbxd-ui/react-search-components/styles/loadMorePagination.css")

Live Demo

// code for the above example
import { UnbxdSearchWrapper } from "@unbxd-ui/react-search-hooks";
import { LoadMorePagination, Products } from "@unbxd-ui/react-search-components";
 
<UnbxdSearchWrapper>
	...
	<LoadMorePagination LoaderComponent={Loader}>
		<Products />
	</LoadMorePagination>
	...
</UnbxdSearchWrapper>

Props

• A functional component that will be rendered as the pre-loader to render the previous set of products.
• The LoaderComponent is highly customisable:
  1. A bare basic component with just a loading text can be used. The following code is the default value of this component:

const LoaderComponent = ({ className }) => {
    return (
        <div className={className}>
            Loading...
        </div>
    );
};

2. You can also choose to add an animated gif or svg as your LoaderComponent as follows:

const LoaderComponent = = ({ className }) => {
    return <div className={className}>
        <img src={"/blueLoader.svg"} alt="loader" />
    </div>
};

3. If you want to keep the product grid flow going, you can create a LoaderComponent which is similar to the following example.

const LoaderComponent = ({ className }) => {
    return (
        <div className={className}>
            {[1, 2, 3, 4].map(idx => (
                <div key={idx} className="product-card loader-container">
                    <div className="loading-image"></div>
                    <div className="loading-title"></div>
                    <div className="loading-price"></div>
                </div>
            ))}
        </div>
    );
};

• Determines if the LoaderComponent must be shown on clicking the "Load More" button. Can be used to indicate to the user that the next set of products are loading.
• Default Value: true.

• This prop will be used to style the component.
• The value must use a defined structure (the structure can be seen in the following example).
• The keys in the structure must be the same while the values can changed as per the user's choice.

styles={{ 
	wrapper: "pagination-wrapper", // used for the entire pagination component
	loader: "loader", // used for the pre-loader
	buttonWrapper: "load-more-button-wrapper", // used for the load more button wrapper
    button: "load-more-button" // used for the load more button
}}

Related Hook

To use the Unbxd React Search SDK without the pre-built LoadMorePagination component, add the functionality to your custom component using the usePagination hook. Refer to the documentation for more details.

Related Components

Fixed PaginationInfinite Scroll Pagination