mhnpd / react-loader-spinner

Collection sets of a spinners for async operations for ReactJS

Hi, I'm Mohan 👋 💻

Find me on:

• Twitter 🐦

• Linked In 👨‍💻

Tech Stack

Stats

react-loader-spinner's Issues

ThreeDots, Puff, Rings, and Triangle loaders do not work in Safari

The ThreeDots spinner works fine in Chrome and Firefox (I've checked those) but it doesn't work in Safari.

I'm not sure if this is because of the way Safari interprets SVGs.

Clear timeout when component dismounts

If you dismount a screen using this loader spinner, when the loading timeout occurs, it raises an error because it is trying to dismount the nonexistent component.

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. in Loader (at AppLoading.js:67)

Add property to let a loader know when to render

@mhnpd - I want to propose an enhancement to the <Loader />

Scenario: Imagine you have an upload button that makes a POST request to a server. In flight, the React state is set to loading = true; which triggers the <Loader /> to render. This works great and as expected. Now, let's say you also have a delete button that deletes a resource on the server. This delete button follows the same logic as the upload button. Request is made, state is changed to true, loader renders. In this case, we have two loaders that are relying on the same state variable and thus we get both Loaders rendering even though one action was taken.

Proposal: There are a couple of ways to fix this. Currently, I'm maintaining a loading state map that tells the two loaders when to render. This allows me to have N loaders in the same component and render each one individually. However, I think it would be a better developer experience if the <Loader /> component could take in a prop function that evaluated to true or false and let the loader know to render or not. There are a couple of ways to accomplish this but the idea is that the <Loader /> could be enhanced so that it knew when to render. Thoughts? I can put together a PR if you think this is an added value.

New prop delay: to avoid flash loading spinner

inspired by react-loadable:

Avoiding Flash Of Loading Component
Sometimes components load really quickly (<200ms) and the loading screen only quickly flashes on the screen.

A number of user studies have proven that this causes users to perceive things taking longer than they really have. If you don't show anything, users perceive it as being faster.

So your loading component will also get a pastDelay prop which will only be true once the component has taken longer to load than a set delay.

function Loading(props) {
  if (props.error) {
    return <div>Error! <button onClick={ props.retry }>Retry</button></div>;
  } else if (props.pastDelay) {
    return <div>Loading...</div>;
  } else {
    return null;
  }
}

If the data doesn't come in certain time it should display something(text).

Width and Height properties on the 'Bars' Loader

Width and Height properties on the 'Bars' Loader seem to be confused with each other. So height stands for width and vice versa.

Loader is alerting on render

Looks like an alert was left in code:

https://github.com/mhnpd/react-loader-spinner/blame/master/src/index.js#L71

Typescript type missing!!!

TypeScript error: Could not find a declaration file for module 'react-loader-spinner'. '/Users/sathishjobs/work/work/2i/react/a8/a8flow-web/node_modules/react-loader-spinner/index.js' implicitly has an 'any' type.
Try npm install @types/react-loader-spinner if it exists or add a new declaration (.d.ts) file containing `declare module 'react-loader-spinner';

How do i solve this problem...

CSS pollutes global namespace

To reproduce:

• Have a site that contains one of the loader spinners. I am using Gatsby but I am fairly confident this issue will occur in all configurations.
• Elsewhere in the site, insert code like the following: <div className="shadow">content</div>
• Inspect the generated content in the browser

Expected: The .shadow div should be unstyled

Actual: The .shadow div contains the following styling:

.shadow {
	clear: left;
	padding-top: 1.5em;
}

This CSS is specific to the Loader component and should be namespaced as such, e.g. .react-loader-spinner--shadow.

None of the spinners work in Edge

None of the spinners work in Edge on Windows (all the latest).

Is this by design?

To repro open any demo page in Edge.

CSS not in the dist folder

Hi,

Thanks for your work very nice and easy to use.

When I try to use the Loader I received this error message:
./node_modules/react-loader-spinner/dist/loader/CradleLoader.js
Module not found: Can't resolve './css/CradleLoader.css' in '$myappfolder/node_modules/react-loader-spinner/dist/loader'

When I add the css folder from src to dist everything works.

High CPU usage when using some spinners in the page

I have a dashboard page, which has several charts displayed on it.
I used a lazy renderer which uses the react-loader-spinner as the component displayed before the chart is displayed.
When entering the page, the CPU usage of the browser (Firefox, Safari, Chrome) is reaching 100%.
Even on your demo page, with only one spinner showing on the screen without anything else, the CPU is at constant 25-30% CPU usage.

Bundled some Unused Spinner type

This is just my question and report.

I'm using this package with Gatsby and visualized the bundle size. Then I found that JS about the unused Spinner type was also bundled.

Is this the specification of this package? Or Is it my misconfiguration?

IF former, when using only one type (like me), and I think it inefficient to load a lot of content.
And, IF it is possible to bundle only the type of assets we use, I would like to improve it!😋

Applying class

I want to center the svg by passing in a className in react. Is this supported as a prop? I can't get it to work.

Invariant Violation: View config not found for name animate.

Invariant Violation: View config not found for name animate. Make sure to start component names with a capital letter.

This error is located at:
in animateTransform (created by Circles)
in path (created by Circles)
in svg (created by Circles)
in Circles (created by Loader)
in div (created by Loader)
in Loader (at ProgressView.js:13)

Code :

<Loader
type="Circles"
color="#00BFFF"
height={100}
width={100}
timeout={3000} //3 secs

        />

Not working in IE.

Loader animation is not working in IE11.

unmet peer dependency

Every time when I run yarn install, it says:

warning " > [email protected]" has unmet peer dependency "prop-types@^15.6.1".

How to fix this?

Why do you use the style prop instead of the default className prop?

Not only do I get warnings from the creat react-app setup, I also do not see why you would do that. It's counterintuitive.

No Loader Speed Control

No Loader Speed Control. I went control loader speed

No default jsDelivr CDN file set

This package doesn't have a default file set. You can set it via jsdelivr, browser, or main field in package.json

add string prop type to width and height?

currently the props type is

Loader.propTypes = {
  height: PropTypes.number,
  width: PropTypes.number,
  color: PropTypes.string,
  label: PropTypes.string
};

however height and width are able to receive string input, this is convenient if we want to set something like

width='3rem' height='3rem'

it works fine as far as I can see

what is the reason to not include string prop type?

Scroll remove option

By default when we place loader, the scroll should be removed in the which is missing here

2 TailSpin cannot have different colors

When there's 2 TailSpin loaders, they cannot have different colors. The color of the first one is used to draw the second spinner.

example : https://codesandbox.io/s/km60o988v3

import React from "react";
import ReactDOM from "react-dom";
import Loader from "react-loader-spinner";

import "./styles.css";

function App() {
  return (
    <div className="App">
      <Loader type="TailSpin" color="#00BFFF" height="100" width="100" />
      <Loader type="TailSpin" color="green" height="100" width="100" />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

TypeScript types definition support

Outdated dependencies?

When I run a yarn command, I get the following warning from react-loader-spinner:

warning react-loader-spinner > babel-runtime > [email protected]: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.

Can we have babel-runtime bumped please? I think they switched to @babel/runtime. Thank you!

No CONTRIBUTING.md

Hello. Was looking to contribute to this project but could not find a n appropriate way to. Please add a contributing guideline to assist with that.

Invalid DOM property `fill-opacity`. Did you mean `fillOpacity`

I used hearts as the loader type but a warning is shown in console:

Warning: Invalid DOM property fill-opacity. Did you mean fillOpacity?

Readme Image

Doesn't work with a simple npm install

journal/node_modules/react-loader-spinner/dist/loader/css/CradleLoader.css:1
(function (exports, require, module, __filename, __dirname) { .swing div {
                                                              ^

SyntaxError: Unexpected token .
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:616:28)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.defineProperty.value (journal/node_modules/react-loader-spinner/dist/loader/CradleLoader.js:5:40)
    at Object.<anonymous> (journal/node_modules/react-loader-spinner/dist/loader/CradleLoader.js:13:3)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.defineProperty.value (journal/node_modules/react-loader-spinner/dist/index.js:5:434)
    at Object.<anonymous> (journal/node_modules/react-loader-spinner/dist/index.js:13:3)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (journal/node_modules/react-loader-spinner/index.js:1:80)

CSS bleed in Triangle.css

Problem: CSS bleeds through to any other part of the app, not limited to the spinners themselves

Suggestion: add a parent class for each spinner (svg) and base all CSS rules on this.

solution for triangle.css, but the classes are fairly ambiguous in other css files as well:

svg.loader-spinner {
  -webkit-transform-origin: 50% 65%;
          transform-origin: 50% 65%;
}

svg.loader-spinner polygon {
  stroke-dasharray: 17;
  -webkit-animation: dash 2.5s cubic-bezier(0.35, 0.04, 0.63, 0.95) infinite;
          animation: dash 2.5s cubic-bezier(0.35, 0.04, 0.63, 0.95) infinite;
}

@-webkit-keyframes loader-spinner-dash {
  to {
    stroke-dashoffset: 136;
  }
}

@keyframes loader-spinner-dash {
  to {
    stroke-dashoffset: 136;
  }
}
@-webkit-keyframes loader-spinner-rotate {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes loader-spinner-rotate {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

Mutating Dots not accepting height property

Mutating Dots spinner does not accepts the height property, keeps it at the initial value of 90.

Error<animate> attribute keySplines: Invalid value, "0.175, 0.885, 0.320, 1.5; 0.175, 0.885, 0.320, 1.5". Chrome, Mutation dots not formatted correctly

Error: <animate> attribute keySplines: Invalid value, "0.175, 0.885, 0.320, 1.5; 0.175, 0.885, 0.320, 1.5".
setValueForProperty @ react-dom.development.js:1297
setInitialDOMProperties @ react-dom.development.js:5831
setInitialProperties @ react-dom.development.js:6026
finalizeInitialChildren @ react-dom.development.js:7499
completeWork @ react-dom.development.js:18978
completeUnitOfWork @ react-dom.development.js:22192
performUnitOfWork @ react-dom.development.js:22165
workLoopSync @ react-dom.development.js:22130
performSyncWorkOnRoot @ react-dom.development.js:21756
(anonymous) @ react-dom.development.js:11089
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
flushSyncCallbackQueueImpl @ react-dom.development.js:11084
flushSyncCallbackQueue @ react-dom.development.js:11072
discreteUpdates$1 @ react-dom.development.js:21893
discreteUpdates @ react-dom.development.js:806
dispatchDiscreteEvent @ react-dom.development.js:4168

<Row>
    <Card className="mx-auto col">
        <Card.Img variant="top" src={logo} alt="DBi Services" className="card-img-top-login" />
        <Card.Body>
            <Col />
            <Col className="text-center">
                <Loader type="MutatingDots" color="#1D4078" height={100} width={100} />
            </Col>
            <Col />
        </Card.Body>
    </Card>
</Row>

In Chrome getting the above error in the console. Also animation spacing not correct.

Here is and example, error doesn't seem to show up here like it does in chrome though

Example

Add a timeout props

When I started using this project, I just needed to simulate a network request or any other time-consuming processes. To do this, I had to set and manipulate states in my component and use timeouts. it would be better if we added a little bit of customization by way of props to this project.
Hence, I have created one more prop, timeout, which should be a number.
I have already forked this project and written an implementation for this. A PR will be opened if I get a go-ahead on this issue.

className type error

type error in className, however class successfully applied

currently I use // @ts-ignore to ignore the error

Module not found: Can't resolve 'react-loader-spinner'

I am getting this error.

Also I am getting following error after running : npm i react-loader-spinner

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"^17.0.1" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.6" from [email protected]
npm ERR! node_modules/react-loader-spinner
npm ERR!   react-loader-spinner@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /Users/user/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/user/.npm/_logs/2020-12-10T19_41_44_202Z-debug.log

I deleted my node folders and reinstalled packages. Deleted -lock file but didnt help.
Any suggestions?

SVG Spinners don't animate until page load completely

I'm trying to use a spinner while page is loading at first time. But as the library use svg the animation doesn't starts until page loads completely. Do you have any plan to solve this or is out of your roadmap?

bump peer dep versions for react libs

Can you bump the peer dep versions for the various react libs to include latest major?

Thanks!

There should be an onTimeout function to handle the case when timeout is there

Presently, there is no function available in props so we can specify exactly what action should happen on timeout of the loader.

loade

Grid Loader Animation Issue

The top-left dot in the Grid loader does not animate due to a typo - In src/loader/Grid.js on line 7
attributeName="fillOpacity" should read attributeName="fill-opacity".

className not in LoaderProps type

TypeScript thinks there isn't className prop in Loader

Triangle loader is not spinning

Triangle loader is not spinning. Ver. 3.1.2

unexpected token . at credleLoader.css:1

After installing the npm package and using it in my component tree, I get the message:-

/Users/apple/codebase/avenue/node_modules/react-loader-spinner/dist/loader/css/CradleLoader.css:1
.react-spinner-loader-swing div {
^

SyntaxError: Unexpected token .
    at Module._compile (internal/modules/cjs/loader.js:760:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:827:10)
    at Module.load (internal/modules/cjs/loader.js:685:32)
    at Function.Module._load (internal/modules/cjs/loader.js:620:12)
    at Module.require (internal/modules/cjs/loader.js:723:19)
    at require (internal/modules/cjs/helpers.js:14:16)
    at /Users/apple/codebase/avenue/node_modules/react-loader-spinner/dist/loader/CradleLoader.js:5:40
    at Object.<anonymous> (/Users/apple/codebase/avenue/node_modules/react-loader-spinner/dist/loader/CradleLoader.js:13:3)
    at Module._compile (internal/modules/cjs/loader.js:816:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:827:10)
    at Module.load (internal/modules/cjs/loader.js:685:32)
    at Function.Module._load (internal/modules/cjs/loader.js:620:12)
    at Module.require (internal/modules/cjs/loader.js:723:19)
    at require (internal/modules/cjs/helpers.js:14:16)
    at /Users/apple/codebase/avenue/node_modules/react-loader-spinner/dist/index.js:5:434
    at Object.<anonymous> (/Users/apple/codebase/avenue/node_modules/react-loader-spinner/dist/index.js:13:3)```

Add text to spinner

as a suggestion the package should have an option to add text on the top or on the bottom from loader

Label spinners on the demo page

Would be awesome to know what which spinner is which.
Maybe even a tip would help

Loader cannot be used as a JSX component

Hi, i got the following error:

any idea?

Div wrapper garble the styles

It seems like the div wrapper is redundant and garbles the styling of the loader-spinner.

Here is the screencast

So the loader height in the example is set to 24px, but the resulting height is bigger because of the presence of the div wrapper.

  return display ? (
    <div aria-busy="true" className={props.className} style={props.style}>
      {React.createElement(componentName(props.type), { ...props })}
    </div>
  ) : null;

Why is there a need for it in the first place? Might I ask

Apart from that, I'm using the loader-spinner on a repo with TypeScript, and it seems the type declarations are outdated. Why?
Because the declarations for props doesn't include className or styles

Add Accessibility Controls

adding aria-busy="true" to the container and and aria-label="Loading content, please wait." to the SVG would help communicate this state better to a screen reader

Can't install with React 17

Hi, I just started learning React and I found your library and I'd like to use it in my app. But I am having an issue when trying to install it. When I run

npm i react-loader-spinner

I get

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"^17.0.1" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.6" from [email protected]
npm ERR! node_modules/react-loader-spinner
npm ERR!   react-loader-spinner@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\melin\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\melin\AppData\Local\npm-cache\_logs\2021-01-10T23_21_50_021Z-debug.log
``` `

It seems that this package is not compatible with the new version of React (17)

Thanks in advance.

Pull request for secondaryColor and secondaryStrokeWidth for the oval spinner

I added a secondaryColor and secondaryStrokeWidth for the oval spinner. I would like to pull request this. You can take a look at my branch here : https://github.com/AdrianRisch/react-loader-spinner/tree/Add-Secondoary-Color-at-Oval