derrickpelletier / react-loading-overlay Goto Github PK
View Code? Open in Web Editor NEWLoading overlays with fade, spinner, message support.
License: MIT License
Loading overlays with fade, spinner, message support.
License: MIT License
I will try display props at wrapper component.
If the display property is not changed to none, the overlayed component does not disappear.
Overrided Style Line 104 ~ 111
<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..."
/>
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?
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)
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 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.
Hello, this loader is not working in IE.. I just see an overlay and the spinner looks like a dot..
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.
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?
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 ?
<form action="#" size="sm">
<p className="field-label"> Email </p>
<div className="field">
<span className="fa fa-user"></span>
<input
name="emailid"
autoComplete="none"
value={capitalLogin.emailid}
onChange={(e) => handleCapitalLoginChange(e)}
type="text"
required
/>
</div>
<p className="field-label"> Password </p>
<div className="field space">
<span className="fa fa-lock"></span>
<input
name="password"
value={capitalLogin.password}
onChange={(e) => handleCapitalLoginChange(e)}
type="password"
className="pass-key"
required
/>
</div>
{/* <div className="pass">
<a href="#">Forgot Password?</a>
</div> */}
<div className="field">
<input
className="login-btn"
type="submit"
onClick={changeIsRegister}
value="LOGIN"
/>
</div>
<div className="closing-form-btn" onClick={closeLoginPopUp}>
Back
</div>
</form>
</div>
</div>
</div>
</LoadingOverlay>
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.
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>
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:
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
Styled components could use a version bump
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
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.
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 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%" } }} >
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.
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?
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.
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 {}
.
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
styled-components is listed in package.json as a dev dependency but it's apparently a regular dependency
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.
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!
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
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.
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!
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
This is what I was looking for. Thank you very much, you've made very good job.
When I try to install it in my project, I get a dependency error and it only accepts React 16 and earlier.
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.
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.