Hi,
I Love your work!
Can I use another component i.e spinner instead of the loading message?
Thanks!

I started seeing these warnings in my tests recently:

console.error node_modules/fbjs/lib/warning.js:33
      Warning: Failed prop type: The prop `transitionConfig` is marked as required in `Loader`, but its value is `undefined`.
          in Loader

Is transitionConfig now required on all usages?

I found the change in this diff: ec0bd46

Hi, thanks for writing this component. Been using it with a React + Typescript app and was just wondering if you would accept a PR that adds type information (a single index.d.ts file, looking a bit like this one)?

I am getting - No matching version found for wolfy87-eventemitter@^5.2.2 error while installing using command: npm install react-loader-advanced --save. And I am using react version ~15.5.4.

Hi,
This is a package that I have used in all of my react projects and kind of a mandatory package for me. Thank you for this amazing package.

Problem:

There are two warning messages that are getting displayed on my browser console. One is regarding usage of componentWillMount and another is componentWillReceiveProps.

Here are the warning messages:

Warning: componentWillMount has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.

* Move code with side effects to componentDidMount, and set initial state in the constructor.
* Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.

Please update the following components: Loader

Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.

* Move data fetching code or side effects to componentDidUpdate.
* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.

Please update the following components: Loader

Here is the screenshot of what is being displayed:

Packages used:

I am using these package versions:

"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-loader-advanced": "^1.7.1"

Thank you again for this amazing package.

I am unsure if this has something to do with the react-loader-advanced, or the table component, but a column of the table is showing through.

Would this have something to do with the z-order of the table poking through?

When I linked against this component for a browser app, a global 'events' object was used in my bundle.js that I had not installed. I installed an events lib to see if that would fix the require(), but it did not. Is this an unresolved devDependency, or a moved package within React?

I'm building with rollupjs rather than webpack, fyi.

Hi,

Great plug-in!

I have a question though. I am using the contentBlur attribute and adding a <Spinner /> in the message. Both of these combined with a CSSTransitionGroup transitionConfig applied to the loader.

Right when the show attribute is changed, the content blur is removed and the Spinner resets to its starting position while the "fade out" animation begins. This makes for a jumpy animation.

Is this a limitation of using CSSTransitionGroup or could something be worked inside the Loader component?

Thanks.

Hi I've been enjoying your component, but I recently came across a need to alter the loader__content div styles by adding "height: 100%". Since you provided classes I was able to accomplish it using a stylesheet, however I'm using inline styles everywhere else so I hate to have a stylesheet just for this one little fix.

I'd be happy to submit a pull request for the ability to override the content container via props if I thought you'd accept it. Or perhaps having the content div include "height: 100%" would be good default behavior.

Regardless, thanks for all your work!

possible EventEmitter memory leak detected. 11 listeners added. Use emitter.setMaxListeners() to increase limit.

Every instance of Loader adds a 'change' event listener in componentDidMount to the same EventEmitter. By default, if over 10 listeners are added with the same type (i.e. 'change') to a EventEmitter, events.js throws this error (should be warning imo) in the console.

It is a common scenario to use more than 10 loaders on one page, for example a dashboard of multiple async cards.

To reproduce, simply mount multiple loaders. (Code below untested)

import React from 'react'
import ReactDOM from 'react-dom'
import Loader from 'react-loader-advanced'

const App = () => (
  <div>
    <Loader show><div /></Loader>
    <Loader show><div /></Loader>
    <Loader show><div /></Loader>
    <Loader show><div /></Loader>
    <Loader show><div /></Loader>
    <Loader show><div /></Loader>
    <Loader show><div /></Loader>
    <Loader show><div /></Loader>
    <Loader show><div /></Loader>
    <Loader show><div /></Loader>
    <Loader show><div /></Loader>
  </div>
)

ReactDOM.render(<App />, document.body)

Possible to enhance and use ReactTransitionGroup to do mount/unmount animations on the loader div?
Maybe the callbacks can be to add some class/styles object - when hiding or showing the loader.
It will end up looking much smoother.

The README says to use backgroundBlur, but the correct property is contentBlur

Here are 2 screenshots from Chrome Dev Tools:

I'm creating around 1000 elements with loaders in them (Wont be the case in prod, but wanted to check perf)

I added the Loader as follows:

<Loader show={this.props.page.isFetching} message={spinner} hideContentOnLoad={true} backgroundStyle={{backgroundColor: 'transparent'}} foregroundStyle={{color: '#333'}}>
  <About page={this.props.page} about={this.props.about} social={this.props.social} />
</Loader>

When this runs, I receive the following error in the console:

Warning: div was passed a style object that has previously been mutated. Mutating style is deprecated. Consider cloning it beforehand. Check the render of Loader. Previous style: {display: "table", width: "100%", height: "100%", textAlign: "center", zIndex: 20, color: "#333"}. Mutated style: {display: "table", width: "100%", height: "100%", textAlign: "center", zIndex: 20, color: "transparent"}.

I got the following warning while installing through npm:

npm WARN deprecated [email protected]: This package is deprecated and will no longer work with React 16+. We recommend you use CSSTransitionGroup from 'react-transition-group' instead.
[email protected] /Users/thirumaleshc/PlayWing/playwing-publisher-portal-ui/playwing-ui
└─┬ [email protected]
  ├── [email protected]
  └── [email protected]