Note

This package is not made my me. I just fix it to use in next js. The real package name is react-promise-loader. Here is the link of original package: https://www.npmjs.com/package/react-promise-loader

Installation

You need to install promise loader and promise tracker packages:

npm install next-js-promise-loader react-promise-tracker

You can use yarn:

yarn add next-js-promise-loader react-promise-tracker

Getting started

Wrap promises that you would like to track as in the following example:

+ import { trackPromise} from 'react-promise-tracker';
//...

+ trackPromise(
    fetchUsers(); // You function that returns a promise
+ );

Then you need to add the Loader component and send data from the react-promise-tracker:

+ import { usePromiseTracker } from 'react-promise-tracker';
+ import Loader from 'next-js-promise-loader';

const App = () => (
  <div className="app">
    ...
+     <Loader promiseTracker={usePromiseTracker} color={'#3d5e61'} background={'rgba(255,255,255,.5)'} />
  </div>
);
export default App;

The settings of the component

| Parameter | Type | Description | Default | | ------------------ | ------- | ----------------------------------------------------------------------------- | ---------------------- | | background | string | Sets the color for the background in any format that supports css | rgba(255,255,255,.5) | | color | string | Sets the color of the spinner | #000 | | promiseTracker | boolean | You need to set usePromiseTracker function from the react-promise-tracker | false | | loading | boolean | If you need to run the loader without tracking promises you should set true | false | | zIndex | number | You can change the z-index to distribute the layers correctly | 999 |

Contributing

Please read through our CONTRIBUTING.md.