DEV Community

loading...
Cover image for Managing loading status for React is much easier with loadio

Managing loading status for React is much easier with loadio

hepter profile image Mustafa KURU Updated on ・2 min read

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
Enter fullscreen mode Exit fullscreen mode

Wrap the method you want to follow the status information.

import { withPool } from "loadio"; 
const fetch = withPool(global.fetch);
Enter fullscreen mode Exit fullscreen mode

Or add promise directly into it with PoolManager

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

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>
    </>
  );
}
Enter fullscreen mode Exit fullscreen mode

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

{
    isLoading?: boolean,
    percentage?: number,
    runningTasks?: number
}
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

Demo

Edit Example usage - loadio

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.

Discussion (4)

Collapse
cariehl profile image
Cooper Riehl

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?

Collapse
hepter profile image
Mustafa KURU Author

Firstly, thanks for your response.

1 - Exactly as you said. They are automatically part of the component when you export the component using "withStatus"

2 - Yes it looks like I made a small typo. That "withStatus" needs to be imported. Thank you for noticing. I made the necessary correction.

Collapse
aalphaindia profile image
Pawan Pawar

Good one!

Collapse
hepter profile image
Forem Open with the Forem app