derrickpelletier / react-loading-overlay Goto Github PK

Styled components could use a version bump

This is the error I'm getting when trying to run the command to install.

I'm trying to style the overlay and spinner using plain CSS (to reduce the amount of code as LoadingOverlay is used throughout the app) .

Here is my CSS:
._loading_overlay_overlay {
background: rgba(0, 0, 0, 0.2) !important;
border-radius: 10px !important;
}
._loading_overlay_spinner {
width: 100px !important;
}
._loading_overlay_spinner svg circle: {
stroke: rgba(0, 135, 196, 0.8) !important;
}

The first two work, because they're operating directly on an element with a specified class.

The third one, to modify the stroke on the SVG circle, doesn't work. I can get it to work using the style={{}} syntax and '& svg circle', but that involves duplicating the code repeatedly.

Can class selectors be added to the SVG and circle elements so they can be styled directly? It seems like the selector '._loading_overlay_spinner svg circle' or '._loading_overlay_spinner::before svg circle' or '._loading_overlay_spinner > svg > circle' should work, but they don't.

Thanks!

Loader works for the first time next time it renders but doesnt get any style so the screen becomes white, is it because of Material UI which I am using in my project

  <Loadable
    active={this.props.showLoader}
    spinner
    text={this.props.loaderText}>
    <Switch>
      <Route exact path="/" component={Login} />
      <Route exact path="/login" component={Login} />
      <Route exact path="/register" component={Registration} />
      <Route exact path="/dashboard" component={Dashboard} />
      {/* <Route component={404Component} /> */}
    </Switch>
    <NotificationContainer />
  </Loadable>

Hi guys,

I used this library in my project created by create-react-app, which use webpack 3.8.1. But I keep getting this errors:>

invariant.js:42 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of LoadingOverlayWrapper.

Any ideas on this?

Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.
at LoadingOverlayWrapper.componentDidMount (LoadingOverlay.js?a257:94)
at commitLifeCycles (react-dom.development.js?cada:8770)
at commitAllLifeCycles (react-dom.development.js?cada:9946)
at HTMLUnknownElement.callCallback (react-dom.development.js?cada:542)
at Object.invokeGuardedCallbackDev (react-dom.development.js?cada:581)
at invokeGuardedCallback (react-dom.development.js?cada:438)
at commitRoot (react-dom.development.js?cada:10050)
at performWorkOnRoot (react-dom.development.js?cada:11017)
at performWork (react-dom.development.js?cada:10967)
at requestWork (react-dom.development.js?cada:10878)

i am using version "react-loading-overlay": "^1.0.0"
trying to wrap my login component with

path-parse has a dependency in version 1.0.6: https://snyk.io/vuln/SNYK-JS-PATHPARSE-1077067

A fix would be to upgrade react-loading-overlay to the new version of emotion(https://www.npmjs.com/package/emotion) which doesn't depend on anything.

I use this component something like this:

class App extends React.Component {
  state = {loading: true}
  componentDidMount() {
    window.setTimeout(() => { this.setState({loading: false}, 3000);
  }
  render() {
    <Loadable
            active={this.state.loading}
            spinner
            background="rgba(256, 256, 256, 0.92)"
            color="#000"
            spinnerSize="140px"
            text="Loading the app..."
          >
      <Rest>
        <OfThe>
          <AppStuff/>
        </OfThe>
      </Rest>
    </Loadable>

  }
}

The only problem is that at the very very beginning you can see black text on white background for a couple hundred milliseconds, then it all fades out to white and the spinner appears. After about the page is loaded (see the 3,000ms timeout in componentDidMount the white overlay fades out and all is well.

What I would ideally like is for it to start immediately with the overlay on.

I think this could be achieved by not having a 500ms transitionEnterTimeout but I'm only speculating.

It's hard to take a screenshot at that first render, but here's what it looks like after about 1-2 seconds after loading the page:

When I try to install it in my project, I get a dependency error and it only accepts React 16 and earlier.

Hi, I may have found a way to have my own custom spinner icon by over-riding the text props but I'm receiving an error but it works perfectly. Take a look at my screenshots

Code:

Output:

Error message:

This is what I was looking for. Thank you very much, you've made very good job.

Getting the following warning when using the overlay. The overlay and content work fine but the warning appears still.

"Warning: Failed prop type: LoadingOverlayWrapper: prop type styles.content is invalid; it must be a function, usually from the prop-types package, but received undefined."

Steps to reproduce:
Try using an overlay with content (as in the examples given in the docs). This happens both when the content property is a function, or an object

Note: ReactTransitionGroup and ReactCSSTransitionGroup are both deprecated as of React v15.5.0. The recommendation is to use TransitionGroup and CSSTransitionGroup from 'react-transition-group' instead.

Referring to this document:
https://facebook.github.io/react/docs/animation.html

I'm sure I could work around this, but npm is complaining about this module while I'm trying to upgrade my project to react 17.

Is it possible to add a prop to cover the whole page and not just the parent component? Or is there a quick way to have it with custom styling ?

Hi, after bumping this dependency from 0.2.5 to 0.2.8 I'm starting to see an error related with LoadingOverlayWrapper.

invariant.js?7313:42 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of LoadingOverlayWrapper.

Going back to 0.2.5 fixed the issue for me.

Description

I will try display props at wrapper component.
If the display property is not changed to none, the overlayed component does not disappear.

Component

LodaingOverlay Component

Overrided Style Line 104 ~ 111

theme

Code

<BaseLoadingOverlay
        active={isFetching}
        spinner
        styles={{
            wrapper: (base) => ({
                ...base,
                position: 'absolute',
                width: '100%',
                height: '100%',
                overflow: 'scroll',
                display: isFetching ? 'unset' : 'none',
            }),
            spinner: (base) => ({
                 ...base,
                 width: 80,
            }),
            content: (base) => ({
                ...base,
                fontSize: 33,
            }),
        }}
        text="Loading..."
 />

Image

Hello, this loader is not working in IE.. I just see an overlay and the spinner looks like a dot..

First, styled-components is listed in package.json as a dev dependency but it's apparently a regular dependency. I had to install it after npm installing react-loading-overlay. After fixing that, it's still not working for me. My render code looks like this:

if (conceptStats && typeof conceptCount !== 'undefined') {
  concepts =  <Concepts  
                conceptStats={conceptStats} 
                conceptCount={conceptCount} 
              />;
}
return  <Loadable
          active={isLoading}
          spinner={true}
          text='Loading concept stats...'
          >
            {concepts}
        </Loadable>

I see nothing whether my data is loaded or not.

It would be nice, btw, not to have to test that in the render explicitly -- if Loadable is active, it shouldn't even try to display the children.

Thanks!

I am using React 16.2 with Redux 3.7.2. I get an error using this component but only when setting spinner or animate to true.

Here is the basic structure of my component:

import React from 'react';
import Loadable from 'react-loading-overlay';

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
    	<div>
	    	<Loadable
			active={this.props.loading}
			spinner
			text="Loading..."
		>
			<MySubComponent .../>
	    	</Loadable>
		...
	</div>
    }
}

Here is the error:

app.bundle.js:14462 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `LoadingOverlayWrapper`.
    in LoadingOverlayWrapper (created by MyComponent)
    in div (created by MyComponent)
    ...

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

My guess is FirstChild is returning null/undefined in the CSSTransitionGroup here: https://github.com/derrickpelletier/react-loading-overlay/blob/master/src/LoadingOverlay.js#L39

Please advise.

styled-components is listed in package.json as a dev dependency but it's apparently a regular dependency

I have a long page with a button, onClick the loader shows.

However, the page is still scrollable even with the loader present which is not great.
Is there something I'm missing ?

Apparently setting the body overflow style to hidden fixes the issue, but I couldn't find a way to do it dynamically if I'm dealing with states.

In IE11, the spinner is positioned at the top of whatever container you place it in. In Chrome and FireFox, the spinner is always positioned in the center of the container.

IE11:

Chrome:

Any help is appreciated. Code added to standard create-react-app:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import LoadingOverlay from 'react-loading-overlay';

class App extends Component {
  render() {
    return (
      <div className="App">
        <LoadingOverlay active spinner animate text='Loading...'>
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            
              <p>
                Edit <code>src/App.js</code> and save to reload.
              </p>
            
            <a
              className="App-link"
              href="https://reactjs.org"
              target="_blank"
              rel="noopener noreferrer"
            >
              Learn React
            </a>
          </header>
        </LoadingOverlay>
      </div>
    );
  }
}

export default App;

I have a code :

<LoadingOverlay active={this.state.isLoading} spinner text={this.state.loadingMsg} > <div className="div-area-child-list"> {mainContent} </div> </LoadingOverlay>

and class for "div-area-child-list" :

.div-area-child-list { position: fixed; top: 8%; bottom: 14%; left: 0%; right: 0%; overflow-y: scroll; }

Then the Loading is not shown at all...

How to solve this?

I know my way around float:left but that's about it. I'm using your wonderful library on https://workon.app and one thing I've noticed is that it doesn't extend all the way up. See:

I clicked around with the Inspector to see if anything had a padding or margin but they all say 0px.

What I did find, but can't explain, is that if I "remove" the position:relative on the overlay wrapper, the overlay extends all the way. See:

Is it a bug? Or is it a problem with Bulma? Or something in this lib's instructions that I couldn't find?

This component doesn't work on IE11. It crashes when active prop switches from true to false.
Didn't have time to debug it, but it looks like this is because the following code:
css(this.getStyles('wrapper', active && overflowCSS)) for the active={false} returns [{Object}, false] array and later Object.keys() method is called on each item from this array (from _objectSpread(target) method). Calling Object.keys(false) on IE11 throws en exception, however on Chrome it evaluates to [].

To reproduce run the below code on IE11:

<LoadingOverlay
  active={false}
  >
  <p>Some content</p>
</LoadingOverlay>

To workaround this you can use below code:

<LoadingOverlay active={loading ? true : undefined}>
  <p>Some content</p>
</LoadingOverlay>

It works because _objectSpread(target) method checks if an item is null/undefined and if so, it replaces it with an empty object {}.

This project uses React's Legacy Context API and needs to be updated to use the new Context API so it does not throw an error in console.

https://reactjs.org/docs/context.html#legacy-api

HI @derrickpelletier firslty, thanks this awesome repo, I'm going to use it in my site prodject, however, I found seems like we can not custom the styles on LoadingOverlay component: https://github.com/derrickpelletier/react-loading-overlay/blob/master/src/LoadingOverlay.js#L93

If yes, I think it will be useful to have this customization feature and I can open a PR for it
How do you said?

Regards,
Allen

A demo and working screenshot of this project would help people understand it at a glance. I would recommend a jsbin/webpackbin since that's easiest to set up.

FWIW, I used webpackbin to try it out. Here's my super basic webpackbin:
https://www.webpackbin.com/bins/-KrXKsbxORpKQSS5AVtl

The package logs to the console after each render the object of the loader. Is there any way i can remove this behaviour, since i do not want them to show to the client.

I ended up making my own wrapper to inherit display properties to fix this. Curious why this isn't the default?

import React from 'react';
import PropTypes from 'prop-types';
import LoadingOverlay from 'react-loading-overlay';

const Loading = ({ active, text, children }) => (
    <LoadingOverlay
        active={active}
        spinner text={text}
        styles={{
            wrapper: {
                display: 'inherit',
                'flex-grow': 'inherit'
            }
        }}>
        {children}
    </LoadingOverlay>
);

Loading.propTypes = {
    active: PropTypes.bool,
    text: PropTypes.string,
    children: PropTypes.node
};

export default Loading;

I've tried to set border-radius: 4px using wrapper and content styles override but it didn't work. Is there a way to specify rounded corners for the overlay?

I am trying to use https://github.com/davidhu2000/react-spinners

and when I use it, the spinner is not aligned with text

<LoadingOverlay active={!this.state.isLoaded} spinner={<PulseLoader color={"var(--bluePrimary)"} />} text="Loading data..." fadeSpeed={0} styles={{ wrapper: { width: "100%", height: "100%" } }} >

If the document is longer than the viewport, the spinner can only be seen when the middle of the document is scrolled into view.

I would have expected the overlay panel to fill the viewport and float over the document (at least as an option, even if there is a good reason to have it work the current way sometimes)

using the latest react versions, I'm receiving a warning message about this deprecation issue:

Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.

the stack trace points to LoadingOverlay.js

I did not find styles.content in my usage, so something from the package?

branch: pass-props

When setting a height on the wrapper and forcing it to scroll, the overlay scrolls with the content... which is undesirable.

I think we just need to override the overflow with hidden, while the overlay is active.