https://github.com/hepter/loadio
Simply provides a pool and wrapper to manage the promises that generate loading status and percentage information based on the execution of tasks
https://github.com/hepter/loadio
javascript loading manager promise react reactjs
Last synced: 9 months ago
JSON representation
Simply provides a pool and wrapper to manage the promises that generate loading status and percentage information based on the execution of tasks
- Host: GitHub
- URL: https://github.com/hepter/loadio
- Owner: hepter
- License: mit
- Created: 2021-04-24T04:57:14.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2021-05-09T01:27:40.000Z (about 5 years ago)
- Last Synced: 2025-08-09T10:07:54.470Z (10 months ago)
- Topics: javascript, loading, manager, promise, react, reactjs
- Language: JavaScript
- Homepage:
- Size: 950 KB
- Stars: 12
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[![Npm Version][npm-version-image]][npm-version-url] [![License][license-image]][license-url]
## 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
[](https://codesandbox.io/s/example-usage-loadio-loz1y?fontsize=14&hidenavigation=1&theme=dark)
## Installation
Install loadio as a dependency
```shell
# Yarn
$ yarn add loadio
# NPM
$ npm install loadio
```
## Usage
```js
import 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!"}
fetch("get/data")}>Get
>
);
}
}
export default withStatus(HomePage);
```
Hook
```js
import { withPool, useStatus } from "loadio";
const fetch = withPool(global.fetch);
function HomePage() {
const status = useStatus();
return (
<>
{status.isLoading ? "Loading..." : "Loaded!"}
fetch("get/data")}>Get
>
);
}
```
Promises can also be added directly to the pool without wrapping it
```js
import { PoolManager, useStatus } from "loadio";
function HomePage() {
const status = useStatus();
return (
<>
{status.isLoading ? "Loading..." : "Loaded!"}
PoolManager.append(fetch("get/data"))}>Get
>
);
}
```
## 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
```js
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:
```ts
{
// 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
},
...
}
}
```
##### index.js
```jsx
import { withStatus } from "loadio";
class Main extends React.Component {
render() {
const { isLoading, percentage } = this.props;
return (
<>
>
);
}
}
export default withStatus(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.
```js
import { fetch } from "./fetch.js";
getData = () => {
fetch("http://example.com/movies.json");
};
```
Or
```js
const fetch = withPool(global.fetch);
getData = () => {
fetch("http://example.com/movies.json");
};
```
Or it can be created multiple times dynamically.
```js
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
```js
import { withPool } from "loadio";
export const fetch = withPool(global.fetch, "fetch");
```
##### longRunningTask.js
```js
import { withPool } from "loadio";
function myLongRunningTask() {
return new Promise((resolve) => setTimeout(resolve, 10000));
}
export const longRunningTask = 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.
```jsx
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 (
<>
>
);
}
}
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.
```jsx
import { withStatus } from "loadio";
class Main extends React.Component {
render() {
const { isLoading, percentage, statusList } = this.props;
return (
<>
>
);
}
}
export default withStatus(Main, {
poolKey: "longRunningTask",
});
```
## API
Check [here](https://hepter.github.io/loadio/modules) for the API document
## License
MIT - Mustafa Kuru
[license-image]: http://img.shields.io/npm/l/loadio.svg
[license-url]: LICENSE
[npm-version-image]: https://img.shields.io/npm/v/loadio.svg
[npm-version-url]: https://www.npmjs.com/package/loadio