This content originally appeared on Level Up Coding - Medium and was authored by Glory Katende
Loading More Results On Scroll with Svelte JS and RESTFul APIs
Infinite loading on scroll can be a great way to provide your users with a better navigation experience.
It removes the need to trigger the loading of more data manually on the client’s side. It also allows your server to serve up just the right amount of data to the user since more can still be fetched if the user is interested in scrolling down the page.
In this article, we’ll learn how to do it in few simple steps.
Create A Svelte App
First of all, create a svelte app by entering the following command.
npx degit sveltejs/template svelte-infinite-scroll-app
cd svelte-infinite-scroll-app && yarn
#Or if you are using npm
npx degit sveltejs/template svelte-infinite-scroll-app
cd svelte-infinite-scroll-app && npm install
Add the dependencies we’ll need
We’ll need the dependencies below for our project.
yarn add -D axios svelte-inview
#Or if you are using npm
npm install axios svelte-inview --save-dev
svelte-inview will trigger an action when an element is in or out of the view frame. It’ll help us know when the user has reached the last fetched item and trigger a new fetch for more results.
Now that you have your project setup, let’s get into the code.
We’ll create an app that fetches user posts in chunks from the JSON placeholder API.
Getting the PostCard Component ready
In your project directory, create a component named PostCard.svelte
./src/components/PostCard.svelte
We’ll use this component later…
Loading More Posts On Scroll
That’s it!
Thanks for taking the time to read!
Hit me up if you run into any issues and I’ll be more than happy to help out!
Did you enjoy this article? leave feedback and share it with someone who might find it useful.
Infinite Scrolling with Svelte was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Level Up Coding - Medium and was authored by Glory Katende
Glory Katende | Sciencx (2021-06-07T16:01:35+00:00) Infinite Scrolling with Svelte. Retrieved from https://www.scien.cx/2021/06/07/infinite-scrolling-with-svelte/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.