Managing loading status for React is much easier with loadio

#react #npm #javascript #webdev

Introduction

Many projects contain asynchronous calls. The operation of these may be unaware of the user, or the user may need to know about that status.

In order to notify the user of this, the loading component is shown on the screen and the user is informed that something is running. At this point, the management of asynchronous methods should be managed in various ways and the component should be demonstrated.

Today, I will show you how you can handle this in an easy way with loadio.

loadio

This package is a simple to use tool that allows you to manage status information with promises.

Install it with:

# Yarn
$ yarn add loadio

# NPM
$ npm install loadio

Wrap the method you want to follow the status information.

import { withPool } from "loadio"; 
const fetch = withPool(global.fetch);

Or add promise directly into it with PoolManager

import { PoolManager } from "loadio"; 
PoolManager.append(fetch("get/data"));

And that's all. You can easily view the status on your home page by calling the new method you have wrapped in place of the old one.

import { useStatus } from "loadio";
function HomePage() {
  const status = useStatus();
  return (
    <>
      {status.isLoading ? "Loading..." : "Loaded!"}
      <button onClick={() => myWrappedfetch("get/data")}>Get</button>
    </>
  );
}

It also generates a percentage of information according to the number of tasks.

{
    isLoading?: boolean,
    percentage?: number,
    runningTasks?: number
}

A complete example with React Component is as follows.

import React from "react";
import { withPool, withStatus } from "loadio"; 
const fetch = withPool(global.fetch);

class HomePage extends React.Component {

  render(){
    const { isLoading, percentage } = this.props;  
    return (
      <>
        {isLoading ? "Loading..." : "Loaded!"}
        {percentage + "%"}
        <button onClick={() => fetch("get/data")}>Get</button>
      </>
    );
  }
}
export default withStatus(HomePage);

Demo

Conclusion

By wrapping promise methods or else adding them directly, we have made it easy to show the loading status with percentage information.
You can view the details of the package by clicking here.
Thanks.

Top comments (4)

Cooper Riehl • Apr 28 '21

Awesome article, thank you for sharing! I had a couple questions about your final code snippet example.

I'm new to React, and I'm a little confused about how to access the task information properties (isLoading, percentage, runningTasks). Are those automatically part of the component's props when I export the component using withStatus?

Also, where does withStatus come from? I don't see it in the imports at the top - is it supposed to be there, or is that actually supposed to be useStatus?