There are lots of npm packages or ready made react components that you can use. But if you want to customize that loading effect as you like it will be better to create your own. Because using a npm package will limit you to its features and functions. If you know how to load components properly on scroll it will be easier for you to adjust your code to meet client needs.
Lazy loading is a concept where we delay the loading of the object until the point where we need it. Loading all the data at once will take much time and as a result page load time increase. 40% of people abandon a website that takes more than 3 seconds to load so it is always better to take actions to reduce page load time. That may reduce customer satisfaction and loss of traffic to your site.
Lazy loading or delay loading content when needed is the solution. Because if you have long list of items loading all of them at once is not good. Because sometime users will have no interest in going through all the items even though all the items are loaded. Loading them when user requested is the best solution. Through that you can have good page loading time.
Lazy loading or Delay loading content using ReactJs
Click here for Demo
Step 1: Set required states