Simply provides a pool and wrapper to manage the promises that generate loading status and percentage information based on the execution of tasks.
Install loadio as a dependency
# Yarn
$ yarn add loadio
# NPM
$ npm install loadioimport React from "react";
import { withPool } from "loadio";
const fetch = withPool(global.fetch);
class HomePage extends React.Component {
render(){
const { isLoading } = this.props;
return (
<>
{isLoading ? "Loading..." : "Loaded!"}
<button onClick={() => fetch("get/data")}>Get</button>
</>
);
}
}
export default withStatus(HomePage);Hook
import { withPool, useStatus } from "loadio";
const fetch = withPool(global.fetch);
function HomePage() {
const status = useStatus();
return (
<>
{status.isLoading ? "Loading..." : "Loaded!"}
<button onClick={() => fetch("get/data")}>Get</button>
</>
);
}Promises can also be added directly to the pool without wrapping it
import { PoolManager, useStatus } from "loadio";
function HomePage() {
const status = useStatus();
return (
<>
{status.isLoading ? "Loading..." : "Loaded!"}
<button onClick={() => PoolManager.append(fetch("get/data"))}>Get</button>
</>
);
}For this example, loading component will automatically appear when wrapped fetch function called Wrap the function you want to show while running
import { withPool } from "loadio";
export const fetch = withPool(global.fetch); Wrap the main component with 'withStatus()' to inject pool information.
The information to be added to the component is as follows:
{
// default
isLoading?: 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 empty
statusList?: any[] {
[customPoolKey:string]:{
isLoading?: boolean,
percentage?: number,
runningTasks?: number
},
...
}
}import { withStatus } from "loadio";
class Main extends React.Component {
render() {
const { isLoading, percentage } = this.props;
return (
<>
<MyLoadingComponent open={isLoading} percentage={percentage} />
<ExamplePage />
</>
);
}
}
export default withStatus(Main);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
const fetch = 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");
}; The withPool wrapper can be created with a different key and can be used in different screens. Second parameter value is 'default' by default.
import { withPool } from "loadio";
export const fetch = withPool(global.fetch, "fetch"); import { withPool } from "loadio";
function myLongRunningTask() {
return new Promise((resolve) => setTimeout(resolve, 10000));
}
export const longRunningTask = withPool(myLongRunningTask, "longRunningTask"); 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";
class Main extends React.Component {
render() {
const { isLoading, percentage, statusList } = this.props;
var fetchStatus = statusList["fetch"] ?? {};
var lrtStatus = statusList["longRunningTask"] ?? {};
return (
<>
<MyLoadingComponent
open={fetchStatus.isLoading}
percentage={fetchStatus.percentage}
/>
<MyLoadingComponent
open={lrtStatus.isLoading}
percentage={lrtStatus.percentage}
/>
<ExamplePage />
</>
);
}
}
export default withStatus(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";
class Main extends React.Component {
render() {
const { isLoading, percentage, statusList } = this.props;
return (
<>
<MyLoadingComponent
open={isLoading}
percentage={percentage}
/>
<ExamplePage />
</>
);
}
}
export default withStatus(Main, {
poolKey: "longRunningTask",
});Check here for the API document
MIT - Mustafa Kuru