davidhu2000/react-spinners

BarLoader will not appear on v0.10.4

TrySickle opened this issue · 8 comments

TrySickle commented

Describe the bug
BarLoader will show on v0.9.0 but not after upgrading to v0.10.4. It seems to have 0 width.
The code that worked on v0.9.0 was this:
<BarLoader css={{ margin: '0 auto' }} height={ 10 } width={ 300 } color="#4285F4" loading />

To Reproduce
Steps to reproduce the behavior:

  1. Upgrade to v0.10.4
  2. BarLoader no longer appears

Screenshots
image

Additional context
Still using the class version with react 17

filipmacek commented

Also not working for me

davidhu2000 commented

looks like it's due to the div to span change, try adding a override for display: inherit

  • 👍2
TrySickle commented

nice, that fixed it

davidhu2000 commented

probably going to add display:inherit to all the loaders

  • 👍2
55Cancri commented

@davidhu2000 tried using the latest version and adding display:inherit but the component is still broken and does not show.

ckeeney commented

Can someone provide a complete example of how to render the BarLoader component?

This code does not work.

                <div
                    sx={{
                        display: 'block',
                        backgroundColor: 'green',
                        height: 40,
                    }}
                >
                    <BarLoader
                        height={10}
                        width={100}
                        css={{
                            display: 'inherit',
                            backgroundColor: 'salmon',
                            margin: '0 auto',
                        }}
                        color="#4285F4"
                        loading
                    />
                </div>

Edit: adding display: flex to the container div fixed this for me on v0.10.6:

                <div
                    sx={{
                        display: 'flex',
                    }}
                >
                    <BarLoader height={10} width={'100%'} loading />
                </div>
  • 👍1
Nate-Wessel commented

I just spent half an hour running in circles until I found this issue. The first time I used this loader, I added display: inline-block; explicitly and it worked perfectly. The second time, I copied that code, removing the unneeded CSS. Couldn't figure out for the life of my why it wasn't displaying with nothing else changed.

davidhu2000 commented

should be fixed as part of 0.13.0-alpha.4