About

Simply provides a pool and wrapper to manage the promises that generate loading status and percentage information based on the execution of tasks.

Demo

Installation

Install loadio as a dependency

# Yarn
$ yarn add loadio
# NPM
$ npm install loadio

Usage

importReactfrom"react";import{withPool}from"loadio";constfetch=withPool(global.fetch);classHomePageextendsReact.Component{render(){const{ isLoading }=this.props;return(<>{isLoading ? "Loading..." : "Loaded!"}<buttononClick={()=>fetch("get/data")}>Get</button></>);}}exportdefaultwithStatus(HomePage);

Hook

import{withPool,useStatus}from"loadio";constfetch=withPool(global.fetch);functionHomePage(){conststatus=useStatus();return(<>{status.isLoading ? "Loading..." : "Loaded!"}<buttononClick={()=>fetch("get/data")}>Get</button></>);}

Promises can also be added directly to the pool without wrapping it

import{PoolManager,useStatus}from"loadio";functionHomePage(){conststatus=useStatus();return(<>{status.isLoading ? "Loading..." : "Loaded!"}<buttononClick={()=>PoolManager.append(fetch("get/data"))}>Get</button></>);}

Example

For this example, loading component will automatically appear when wrapped fetch function called Wrap the function you want to show while running

fetch.js

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

Wrap the main component with 'withStatus()' to inject pool information. The information to be added to the component is as follows:

{// defaultisLoading?: boolean,percentage?: number,runningTasks?: number,// This property will only be filled to when using a different pool than 'default'// Pool keys must be given while wrapping otherwise this value is emptystatusList?: any[]{[customPoolKey:string]:{isLoading?: boolean,percentage?: number,runningTasks?: number},
...
}}

index.js

import{withStatus}from"loadio";classMainextendsReact.Component{render(){const{ isLoading, percentage }=this.props;return(<><MyLoadingComponentopen={isLoading}percentage={percentage}/><ExamplePage/></>);}}exportdefaultwithStatus(Main);

ExamplePage.jsx

Call the wrapped promise anywhere to show loading screen When run multiple times at the same time, it will also create a percentage rate until all promises are finished.

import{fetch}from"./fetch.js";getData=()=>{fetch("http://example.com/movies.json");};

Or

constfetch=withPool(global.fetch);getData=()=>{fetch("http://example.com/movies.json");};

Or it can be created multiple times dynamically.

getData=()=>{withPool(global.fetch)("http://example.com/movies.json");};

Multiple usage

The withPool wrapper can be created with a different key and can be used in different screens. Second parameter value is 'default' by default.

fetch.js

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

longRunningTask.js

import{withPool}from"loadio";functionmyLongRunningTask(){returnnewPromise((resolve)=>setTimeout(resolve,10000));}exportconstlongRunningTask=withPool(myLongRunningTask,"longRunningTask");

index.js

The root loading props(isLoading, percentage, runningTasks) come null when using multiple pool keys except for the 'statusList' prop. Both pools can be connected to a single page or can be used individually.

import{withStatus}from"loadio";classMainextendsReact.Component{render(){const{ isLoading, percentage, statusList }=this.props;varfetchStatus=statusList["fetch"]??{};varlrtStatus=statusList["longRunningTask"]??{};return(<><MyLoadingComponentopen={fetchStatus.isLoading}percentage={fetchStatus.percentage}/><MyLoadingComponentopen={lrtStatus.isLoading}percentage={lrtStatus.percentage}/><ExamplePage/></>);}}exportdefaultwithStatus(Main,{poolKey: ["longRunningTask","fetch"],});

Or bind only one pool 'longRunningTask' instead of 'default'. Thus, instead of coming statuses as the list, the bound pool status comes from the props in the root directly.

import{withStatus}from"loadio";classMainextendsReact.Component{render(){const{ isLoading, percentage, statusList }=this.props;return(<><MyLoadingComponentopen={isLoading}percentage={percentage}/><ExamplePage/></>);}}exportdefaultwithStatus(Main,{poolKey: "longRunningTask",});

API

Check here for the API document

License

MIT - Mustafa Kuru