fakiolinho/react-loading

React component for loading animations

react-loading

Easy to use loading animations for React projects. Uses SVG animations from Brent Jackson's loading project.

Installation

npm i react-loading

or

yarn add react-loading

Demo

Check here

Loading Types

• blank
• balls
• bars
• bubbles
• cubes
• cylon
• spin
• spinningBubbles
• spokes

Examples

import React from 'react';
import ReactLoading from 'react-loading';

const Example = ({ type, color }) => (
	<ReactLoading type={type} color={color} height={667} width={375} />
);

export default Example;

import React from 'react';
import ReactLoading from 'react-loading';

const Example = ({ type, color }) => (
	<ReactLoading type={type} color={color} height={'20%'} width={'20%'} />
);

export default Example;

Props

Name	Type	Default Value
type	String	balls
color	String	#ffffff
delay	Number	0 (msecs)
height	Number or String	64 (px)
width	Number or String	64 (px)
className	String	''

License

MIT

react-loading's Issues

TypeError: Cannot read property 'string' of undefined

I'm getting below error.
I'm using,
"react": "^16.2.0",
"react-loading": "^1.0.3",

TypeError: Cannot read property 'string' of undefined
(anonymous function)
node_modules/react-loading/dist/react-loading.js:138

exports['default'] = Loading;

Loading.propTypes = {
color: _react.PropTypes.string,
delay: _react.PropTypes.number,
height: _react.PropTypes.oneOfType([_react.PropTypes.number, _react.PropTypes.string]),
type: _react.PropTypes.string,

Demo site is down

http://cezarywojtkowski.com/react-loading/ is not working =[

could you remove sourceMappingURL from react-loading.js

I find When I use webpack to build my app,the part of react-loading module was too big. the reason was that you encode sourceMappingURL as base64 (/*#sourceMappingURL=data:application/json;base64,eyJ2ZXJza */)
and put it as comment in the react-loading.js .

I use UglifyJsPlugin to compress my bundle and use its default config.

            new UglifyJsPlugin({
                cache: true,
                parallel: true,
                sourceMap: true
            })

When I use the config to build my app, the compressed react-loading module size is 101k.
When I remove the comments(above 100k), the compressed react-loading module size is 44k.

Needs a maintainer

Hello,

Unfortunately I haven't had the time to maintain this project. Rather than let it stagnate and potentially break projects I'd be more than happy to transfer github and npm ownership over to anyone interested.

'ReactLoading' cannot be used as a JSX component.

Just importing ReactLoading like this:

import ReactLoading from 'react-loading';

Gives me this error:

ERROR in src/components/newDesign/pages/login/LoginPage.tsx:93:38
TS2786: 'ReactLoading' cannot be used as a JSX component.
  Its instance type 'Loading' is not a valid JSX element.
    The types returned by 'render()' are incompatible between these types.
      Type 'React.ReactNode' is not assignable to type 'import("C:/Users/PC/OneDrive/Desktop/iplant/frontend/iplant/node_modules/@types/react-table/node_modules/@types/react/index").ReactNode'.
        Type '{}' is not assignable to type 'ReactNode'.
    91 |                                         <InputItem fullWidth type='password' {...register("password")} />
    92 |                                     </FormItemContainer>
  > 93 |                                     <ReactLoading type='bubbles' color="white" />
       |                                      ^^^^^^^^^^^^
    94 |                                     <FormButton type="submit" disabled={isSubmitting}>
    95 |                                         {isSubmitting ? 'loading' : 'Login'}
    96 |                                     </FormButton>

delay in loading

Our team is using react-loading in several sites and I notice there's an approx. delay of ~300ms before the loading icon renders. I've tried some simple surface debugging but no luck :-(

any help is appreciated.

Demo link is dead

Warning - setState({...}) on unmounted component

Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component.

Here's my code:

componentDidMount() {
 this.fetchUsers(); // will make request to server and setState
}

render(){
    if (this.state.users.length === 0) {
      return ( <Loading type='balls' color='#e3e3e3' />);
    }
    else {
      return (
       {this.userList()}
      );
    }
}

When I remove the console warning goes away which leads me to point the finger at react-loading.

Warning: Unknown DOM property tabindex. Did you mean tabIndex?

Hi, I try to using this lib. But, React warn me.
Why this message show?

Eating classNames

Component eats className prop.

E.g. <Loading type='bubbles' className='foo'/>
renders into <div style="fill: rgb(255, 255, 255); height: 64px; width: 64px;">

Warning: setState(...): Can only update a mounting component.

Warning: setState(...): Can only update a mounting component. This usually means 
you called setState() outside componentWillMount() on the server. This is a no-op. 

Warning: Unknown prop `delay` on <div> tag. Remove this prop from the element.

Hi everything works great, thanks! But I get the following warning:

Warning: Unknown prop delay on

tag. Remove this prop from the element.

I'm using Chrome Version 61.0.3163.100 (Official Build) (64-bit)

I get the same warning on the example page https://www.webpackbin.com/bins/-KmrzFstbIElhoFgQX96

Publish the latest version please

I can't install the latest version with npm install.
Please publish.
Thank you.

svg is always square-sized

The svg viewbox should be rendered accordign to the provided h/w properties.
The square format is ok for circular effects (like spin), but leaves a lot of empty space for linear effects (like cylon)

Any updates for React 18?

The new version of React breaks the react-loading unfortunately. Is there any plans to update it?

how can i display this component inline

          <span>
            Some Text Here
            <div style={{ display: "inline" }}>
              <ReactLoading color="#c1c1c1" height={"5%"} width={"5%"} />
            </div>
          </span>

spinning-bubbles broken

Hi there,

Thank you for your great library! I could get all the other loaders to work except for the spinning-bubbles one. Does anyone else experience this?

SVG's SMIL animations (<animate>, <set>, etc.) are deprecated and will be removed. Please use CSS animations or Web animations instead.

Alert by react.js

Enhance: Define component in outside of render by styled-components

Hi. Thank you for making react-loading. This package is great!!
Below code occur warning like this.
the component styled.div with the id of "sc-eCYdqJ" has been created dynamically.
That warning is because of title.

import React from 'react'
import styled, { keyframes } from 'styled-components'

interface Props {
  size?: string
  margin?: string
  background?: string
  duration?: string
  dots?: any
}

const defaultProps: Props = {
  dots: 3,
}

export const Loading: React.FC<Props> = ({
  size,
  margin,
  background,
  duration,
  dots,
}) => {
  const Wraper = styled.div`
    display: flex;
    justify-content: center;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  `

  const bounceLoading = keyframes`
  to {
    opacity: 0.3;
    transform: translate3d(0, -1.5rem, 0);
  }
  `

  const Dot = styled.div`
    width: ${size ? size : '1.5rem'};
    height: ${size ? size : '1.5rem'};
    margin: 0 ${margin ? margin : '1rem'};
    background: ${background ? background : 'rgb(202, 57, 57)'};
    border-radius: 50%;
    animation: ${duration ? duration : '0.8s'} ${bounceLoading} infinite
      alternate;
    &:nth-child(2n + 0) {
      animation-delay: 0.3s;
    }

    &:nth-child(3n + 0) {
      animation-delay: 0.6s;
    }
  `

  let dotList = []
  for (let i = 0; i < dots; i++) {
    dotList.push(i)
  }

  const dotRender = dotList.map(dot => <Dot key={dot}></Dot>)

  return <Wraper>{dotRender}</Wraper>
}

Loading.defaultProps = defaultProps

Open to flow types PR?

Projects using flow and flow-typed package to install flow types see this message:

 • react-loading@^2.0.2
    └> flow-typed/npm/react-loading_vx.x.x.js

!! No [email protected] libdefs found in flow-typed for the above untyped dependencies !!

I've generated `any`-typed stubs for these packages, but consider submitting 
libdefs for them to https://github.com/flowtype/flow-typed/

ReactLoading doesn't work if the parent component is placed in a bootstrap row div

Default delay should be changed to 0

I had a short load that I wanted to show to the client no matter how long it takes and the default delay was too long for it to show. I had to go back to the docs and try to understand why and after searching a bit I found the default delay is set to 1000ms.
Why isn't it set to 0 by default?

component not working with browserify

Hi @cezary I'm tying to use this module in my project, by I'm using browserify instead of webpack to build my js file.

Since you have define the main file from the lib directory "main": "lib/react-loading.js", which has code to load svg files, that works for webpack but browserify does not know how to load it.

Can you have a fix? Or you can just update the main file to read from dist/react-loading.js?

Problem on IE 10, 11, Edge

Hi,

I have a problem with your component.
I use your loading component in this way: <Loading type={"spin"} color='#666666'/>.

While the Loading spins/rotates on Firefox and Chrome, it doesn't rotate on Internet Explorer 10,11 and Edge.

Could you resolve this problem please?

Example in docs seems wrong

1. The example presents using props like this:

<ReactLoading type={type} color={color} height='667' width='375' />
However not specifying px in height and width results in a weird behaviour (it's either not working or it occupies the entire page.
This seems to be the correct way:
<ReactLoading height='25px' width='25px' />

2. This also applies to "delay" props:
   <ReactLoading delay="10ms" /> - the way to make it work, but still throws a warning.
   <ReactLoading delay="10" /> - throws a warning.

the warning is:

Cannot read property '__reactAutoBindMap' of null

I'm getting this error when I try to use the component in my app. It also comes with these warnings:
Warning: This JSX uses a plain function. Only React components are valid in React's JSX transform.
react-loading.js:6168
Warning: Something is calling a React component directly. Use a factory or JSX instead. See: https://fb.me/react-legacyfactory

I'm using 0.12.0 with react/addons. So might be a conflict with react versions?

Warning: Failed prop type: Invalid prop `width` of type `string` supplied to `Loading`, expected `number`.

After updating to 2.0.2 I am getting this warning:

Warning: Failed prop type: Invalid prop `width` of type `string` supplied to `Loading`, expected `number`.
		in Loading (at Loader.js:22)
		in Loader (at App.js:214)
		in div (at App.js:218)
		in App (created by Connect(App))
		in Connect(App) (at index.js:16)
		in Provider (at index.js:15)

I am currently using width={'20%'} height={'20%'} to size it relative to the containing div. It seems to still be working but it now displays warning. Is it possible to allow strings in addition to numbers for width and height specifically for this use case?

Is this package still maintained?

Invariant Violation: View config not found for name div

I'm trying to use react-loading on my react-native app. This is my code

import React, { Component } from 'react';
import ReactLoading from 'react-loading';

class Tags extends Component{
  render(){
      return (
        <ReactLoading type='spinningBubbles' color='#03A9F4' />
      );
  }
}

export default Tags;

But I'm getting an error when I run this. This is the console error I'm getting.

Invariant Violation: View config not found for name div

This error is located at:
    in div
    in Loading (at tags.js:7)
    in Tags (at App.js:30)
    in RCTView (at View.js:113)
    in View (at App.js:27)
    in App (created by AwakeInDevApp)
    in RCTView (at View.js:113)
    in View (created by AwakeInDevApp)
    in AwakeInDevApp (at registerRootComponent.js:34)
    in RootErrorBoundary (at registerRootComponent.js:33)
    in ExpoRootComponent (at renderApplication.js:35)
    in RCTView (at View.js:113)
    in View (at AppContainer.js:102)
    in RCTView (at View.js:113)
    in View (at AppContainer.js:122)
    in AppContainer (at renderApplication.js:34)_

Why is that ? Is this an issue or I'm doing something wrong ?

no default export

As per the Readme I add the following to the top of my component:

import ReactLoading from 'react-loading';

I'm getting the following compile error when I try to import.

Module '"/Users/sauciello/work/project-ultron/node_modules/react-loading/index"' has no default export

Things I would like to have

• es6 support
• only loading svg I really use
• implementation of delay - only render indicator if component is still mounted after Xms, where recommended value is 1000.

Demo

The demo wasn't working so here's something i put together!

https://codesandbox.io/s/mqx0ql55qp

Feel free to use it!

Passing a css classes

Hi, great and simple to use component!
I would like to suggest 2 features:

1. Add an optional prop for passing css classes/
2. Add an optional prop for displaying the loader as overlay.

Delay Default Value

Just out of curiosity and feedback, should the delay parameter have a default value already? I don't know about anyone else, but I like having the loading show up as soon as it's rendered.

Should this be changed to a default value of zero?

Hopefully this feedback is helpful!

process is not defined

Hi everyone,

I am trying to use react-loading as externals in webpack with "react-loading": "^2.0.3" and "webpack": "^5.37.0":

webpack.prod.js:

externals: {
   react: 'React',
   axios: 'axios',
   moment: 'moment',
   'react-dom': 'ReactDOM',
   'react-router-dom': 'ReactRouterDOM',
   'react-loading': 'react-loading'
}

template.prod.html

 <body>
    <div id="root"></div>
     ....
    <script crossorigin src="https://unpkg.com/[email protected]/dist/react-loading.js"></script>
    ....
  </body>

As soon as I start it and open it in the browser, I get the following error:

index.js:3 Uncaught ReferenceError: process is not defined
    at Object.<anonymous> (index.js:3)
    at __webpack_require__ (bootstrap 6feda731dd4ebaacd003:19)
    at Object.<anonymous> (react-loading.jsx:1)
    at __webpack_require__ (bootstrap 6feda731dd4ebaacd003:19)
    at bootstrap 6feda731dd4ebaacd003:62
    at bootstrap 6feda731dd4ebaacd003:62
    at webpackUniversalModuleDefinition (universalModuleDefinition:9)
    at universalModuleDefinition:10

The problem seems to be here (https://unpkg.com/[email protected]/dist/react-loading.js) in the following lines and also maybe in other lines where "process" exists:

if (process.env.NODE_ENV !== 'production') {
  validateFormat = function validateFormat(format) {
    if (format === undefined) {
      throw new Error('invariant requires an error message argument');
    }
  };
}

I tried to use DefinePlugin like this in my webpack.prod.js file:

new DefinePlugin({
  'process.env.NODE_ENV': JSON.stringify('production')
}),

Besides, I also added ProvidePlugin with the following config after running npm install process:

new ProvidePlugin({
  process: 'process/browser',
}),

Unfortunately none of those solved the problem.

What am I doing wrong?

Thanks in advance!

Update React peer dependency

This component currently only supports versions ^0.12.1 of React. It would be helpful if it could also be used on the latest versions.

ReactLoading center?

How to make ReactLoading's component center in div?

not support ssr ?

not support ssr

Color fill not working in ES6 with Webpack

The loader displays and the delay works but we can't change the color.

<Loading type='bars' color='#1e90ff' delay={250} />

I have attached screen shots of our console.

Seems to be causing problems with webpack currently

For some reason this module includes the "process" shim which causes DefinePlugin to be unable to replace process.env.NODE_ENV in any module included after this one.
webpack-contrib/uglifyjs-webpack-plugin#206

Uncaught Invariant Violation: Loading.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

Any time I try and return the react-loading component on Android 4.4 WebView (via a PhoneGap app) I get the following error:

"Uncaught Invariant Violation: Loading.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object."

The same code is working perfectly fine on newer versions of Android and iOS UIWebView, and is also working fine on all browsers I tried (including Chrome).

Relevant code on my App looks like:

     return (<ReactLoading type="spin" height='30px' width='30px' />)  

If I replace that code with the following I don't get an error which is another reason I think the issue is with the component rather than my code.

    return (<div>loading...</div>)  

I'm having issues with the source map not working, so don't have a better stack trace for now other than the following:

"Error: Loading.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.
at invariant (file:///android_asset/www/bundle.js:2315:15)
at ReactCompositeComponent._renderValidatedComponent (file:///android_asset/www/bundle.js:116621:143)
at ReactCompositeComponent.performInitialMount (file:///android_asset/www/bundle.js:116152:30)
at ReactCompositeComponent.mountComponent (file:///android_asset/www/bundle.js:116048:21)
at Object.ReactReconciler.mountComponent (file:///android_asset/www/bundle.js:12014:35)
at ReactDOMComponent.ReactMultiChild.Mixin.mountChildren (file:///android_asset/www/bundle.js:120536:44)
at ReactDOMComponent.Mixin._createInitialChildren (file:///android_asset/www/bundle.js:117512:32)
at ReactDOMComponent.Mixin.mountComponent (file:///android_asset/www/bundle.js:117331:12)
at Object.ReactReconciler.mountComponent (file:///android_asset/www/bundle.js:12014:35)
at ReactDOMComponent.ReactMultiChild.Mixin.mountChildren (file:///android_asset/www/bundle.js:120536:44)"

I am using version 0.1.4.

using the Loading component with TypeScript

Would you care to have a look at this stackoverflow issue and maybe help me use this with TypeScript