Loading Data in Page Builder Elements

Introduction

It’s not uncommon to have a custom page element that loads data from an external remote HTTP API and displays it on the page.

For example, you might want to display a list of products or a list of blog posts that are loaded from Webiny’s Headless CMS GraphQL API. Another examples is listing rocket and dragon spacecrafts from an external SpaceX API, which is covered in the Create a Custom Page Element guide.

In this guide, we’ll show you how to efficiently load data in Page Builder elements using the useLoader React hook.

TheuseLoaderReact Hook

The useLoader React hook is a utility hook that helps you load data in custom page elements. It’s main purpose is to ensure that, once the data is loaded in the page prerendering process, it is captured and properly cached. This way, the loaded data is immediately available when the published page is delivered to the end user, which improves page performance and user experience.

To better illustrate the difference between loading data with and without the useLoader hook, we can take a look at the following videos. Both videos show a custom page element that loads a list of countries from a remote API. The first video shows the page element loading the data without the useLoader hook, while the second video shows the page element loading the data with the useLoader hook.

Loading data without the useLoader hook

(click to enlarge)

Loading data with the useLoader hook

(click to enlarge)

As we can see, in the first video, in the network tab, the request for the countries.json file is made after the page is rendered. This causes the data to be displayed in the custom page element after the page is rendered, which results in a flicker effect. In the second video, the data is immediately available when the page is rendered, which results in a smooth and seamless user experience.

Using theuseLoaderReact Hook

Let’s analyze the code that was used to create the page element we saw in the videos above. More specifically, we’ll be looking at the code of the React component that renders the custom page element.

As we can see, the useLoader hook is used to load the data from the https://my-api.com/countries.json endpoint. Within the hook, we use the fetch function to make a request to the endpoint and load the data. Once the data is loaded, we map over it and return an array of country names.

Ultimately, the hook returns an object with two properties: data and loading. The data property contains the loaded data, while the loading property is a boolean that indicates whether the data is still being loaded.

If the data is still being loaded, the Loading… message is displayed. If the data is not found, the No countries found. message is displayed. Otherwise, the list of countries is displayed.

Conclusion

In this guide, we learned how to efficiently load data in Page Builder elements using the useLoader React hook. By using this hook, we can ensure that the data is loaded in the page prerendering process and is immediately available when the published page is delivered to the end user. This improves page performance and user experience.