Build the HackerNews Reader with VueJS 3 — Part 3, infinite loading with ES2018 syntax

Photo by Angely Acevedo on Unsplash

Objectives

Continue from previous parts [ 1][ 2] in this part, we will go through a few advanced techniques to implement the infinite loading feature to get more posts from HackerNews and skeleton gradient animation to deliver the best user experience. Although there are Vue Plugins to support infinite loading, in this tutorial, we will build from scratch so that we could learn deeply through the progress. Finally, due to the limitation of HackerNews API, we have a chance to try the new feature of ES2018 await for of As usual, I will go through step by step with detailed explanations on why and how we code.

Analysis

Firstly, we need to analyze the API from HackerNews to draft a basic design to implement infinite loading. From the official document, HackerNews API is built on top of Firebase and we can only query up to 500 recent items. The result is a list of IDs below.

Hence, in order to paginate items, we may slice as below:

Design

Next step, we design the functions to handle data from API and then render it when the user scrolls to load. From the previous tutorials, we just load all of them at once, so this isn’t gonna be a problem. However, when we gonna implement the infinite loading feature, this could cause an issue. Let’s examine, firstly, how to load items infinitely. We will use the event scroll like this:

Basically, the chunk of code above will listen on the event scroll and whenever the user reaches the bottom of the page, the function handleScroll would be invoked to render new items. However, in production, we need to make a lot of queries due to the limitation of 3rd party API.

All of these activities are asynchronous, handling by mechanism from Promise object. So, even all of these items are not resolved, the event scroll still being listened to and keeps invoking handleScroll function.

To sum up, there are technical requirements to implement:

1. A flag to prevent handleScroll to be invoked when API result still not be resolved yet
2. A flag to stop scroll event to listen, when no more items loaded from API
3. Handling pagination across topics
4. A mechanism to handle all multiple asynchronous requests at once.

Implementation

To deal with the first task, a boolean variable loading would be created in a global state, so that we could tracking when the request is initialized to turn it on and set it off when all data is settled. We also create another boolean variable endPagination to track if there are no more items to load for a particular topic. Finally, an int variable page to manipulate pagination. Then our global state configuration would be like this.

Next, we gonna handle API requests. There are a few ways to process multiple asynchronous requests such as using Promise.all(), still, I would like to introduce you to how to make use of a new and very useful feature of ES2018: asynchronous iteration for await ... of

Get Truong Phan’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

As this syntax is fairly new, so we need babel to make it works on browsers.

Firstly, install a few plugins and @babel/core

yarn add -D @babel/core @rollup/plugin-babel @babel/plugin-proposal-async-generator-functions

Create new file .babelrc

{
"plugins": ["@babel/plugin-proposal-async-generator-functions"]
}

Then modify vite.config.js

You can read more about the babel transform plugin here. Then, we are good to go. To implement this feature, we gonna write an async function generator.

The above async function will generate values, which conform to the async iterable protocol, then they can be looped using for await ... of The mechanism is crucial, to synchronize requesting activities so that we can handle the event on as I mentioned from the beginning. You can check out the complete code store\index.js from the Github repo.

Skeleton Loading

Skeleton loading pattern is not new and is widely adopted, to enhance the user experience when loading more content. It’s not difficult to apply it to our project. So that, I just briefly write up about how it works, the code is already in the Github repo.

All we need to do is to create another Vue Component with the required CSS in order to style and animate the background. The trick is we need to set how the number of skeleton posts, conformed with the pagination system. To achieve that goal, we write a concise function to generate a list of number to be used with v-for

You can check out the complete code components\Skeleton.vue in the repo

Bonus

There is another new component components\Modal.vue to create modal effect for text posts such as Ask. This component is used a new Vue 3 API, teleport . I will leave it for your own exploration. It's quite easy to follow.

Conclusion

In this part, I think the most important lesson is how we analyze, plan and implement desired features. By planning ahead, we gonna avoid many bugs and save a lot of time in the coding implementation stage. More than that, we also have a chance to get familiar with ES2018 syntax for await ... of in a practical project.

Live demo
Github repo

Originally published at my personal blog.