SharePoint online - 'Load More' button click event to show more items using PnPjs

Requirement : There is one list called "News". Initially on page load user wants to see only 10 news items on page and after that on load more button user wants to see another 10 items to improve performance of site. So rather than loading all items in one go we can use PnPjs or REST API to achieve this.

Here I am going to show you how to achieve above requirement using PnPjs.

CDN paths for these files are as below:

1. JQuery.js: https://code.jquery.com/jquery-3.3.1.min.js
2. e6-Promise.js: https://cdnjs.cloudflare.com/ajax/libs/es6-promise/4.1.1/es6-promise.js
   • A lightweight library that provides tools for organizing asynchronous code.
3. fetch.js: https://cdnjs.cloudflare.com/ajax/libs/fetch/3.0.0/fetch.js
   • This JavaScript is a Promise-based mechanism to request web from browser programmatically.
4. PnP.js: https://cdnjs.cloudflare.com/ajax/libs/sp-pnp-js/3.0.10/pnp.min.js

Note: Please add script references of above JS files in the same order as provided above.

Logic : 
var newsItems=$pnp.sp.web.lists.getByTitle("News")
    .items.filter("'StartDate le datetime'" +GetToday +"' and EndDate ge datetime'")
    .select("ID,Title,StartDate,EndDate")
    .orderBy("StartDate,Title")
    .top(10);

  
newsItems.getPaged().then(items=> {
Console.log(items.results.map(x=>x.ID));
return items.getNext();
})

.then(items=> {
Console.log(items.results.map(x=>x.ID));
return items.getNext();
})

.then(items=> {
Console.log(items.results.map(x=>x.ID));
return items.getNext();
})

Output : 

Actual Code for "Load More" button :

var News = {};
News.LocalNewsData = [];

function getNewsList(){
$pnp.sp.web.lists.getByTitle("News")
    .items.filter("'StartDate le datetime'" +GetToday +"' and EndDate ge datetime'")
    .select("ID,Title,StartDate,EndDate")
    .orderBy("StartDate,Title")
    .top(10).getPaged().then(paged=>{
        News.getNewsListArray (paged,true);
})
})
}

News.getNewsListArray = function (paged, isFirstTimeLoad) {
  News.PagedItemCollection = paged;
  if (isFirstTimeLoad) {
    News.LocalNewsData = [];
  }
  News.hasNext = paged["hasNext"];
  paged.results.forEach((item) => {
    var localNewsDataArray = {};
    localNewsDataArray.ID = item.ID;
    News.NewsTitle = item.Title;
    News.LocalNewsData.push(localNewsDataArray);
  });
  News.displayHTML(News.LocalNewsData); //bind html code to display
}
and on "Load More" button click : 

News.clickLoadMore = function () {
  $(".view-more-div").on('click', '#load-more-button', function () {
    setTimeout(function () {
      News.PagedItemCollection.getNext().then((paged) => {
        News.getNewsListArray (paged, false);
      });
    }, 3000);
  });
}

Explanation :
This is what you will receive after every PnPjs call : 

paged['hasNext'] : boolean 
    It will check if next call has next set of items available then return : true
    else if no items in next call : false 
paged['nextUrl'] : string : 
    It will give "href" link to the next set of items.

Hope it helps you.