react-spinners: GridLoader is not displayed in grid

Describe the bug The GridLoader is not displayed in grid, but in one line.

To Reproduce Steps to reproduce the behavior:

  1. Use GridLoader in any react project.

Expected behavior GridLoader dots should be displayed in a 3x3 grid, not on one unique line.

Screenshots

image

Additional context Must be because of https://github.com/davidhu2000/react-spinners/issues/159

Bug was not there in version 0.9.0 (I’m using this version to fix the issue temporarily).

Possible fix Use css to display as block.

About this issue

  • Original URL
  • State: closed
  • Created 3 years ago
  • Reactions: 1
  • Comments: 24 (15 by maintainers)

Most upvoted comments

@davidhu2000 Thanks for your work on the library!

We have the same issue with the GridLoader as was originally reported, and reverting to 0.9.0 fixes the problem. It impacts our use of GridLoader everywhere. We’ll report back with anything we find that might be the cause

Could you re-open in the meantime?

https://github.com/pixiebrix/pixiebrix-extension/issues/755

Can you try 0.13.0 and see if it works?

@davidhu2000 Thanks, looks like this version fixes the line break problem

looks like adding display: 'inline-block' resolves the issue for me. @twschiller , Can you try 0.13.0 and see if it works? I moved the latest version out of beta.

Please let me know if you run into any more issues

decided that renaming the prop made sense. it was only called css to match emotion. and now that emotion is removed, css might just cause confusion. https://github.com/davidhu2000/react-spinners/pull/524

@twschiller want to give 0.13.0-beta.5 a shot and see if the type issue is resolved?

altho I don’t see emotion in your repo, can you try deleting node_modules and reinstall everything? thinking maybe the prior installation is causing some conflicts

We include react-select in our project, which depends on emotion for styling:

pixiebrix/extension@1.6.5-alpha.1 /Users/tschiller/projects/pixiebrix-extension
└─┬ react-select@5.3.2
  └── @emotion/react@11.9.0

Will have to track down which emotion release the fix for https://github.com/emotion-js/emotion/issues/1800 would have been rolled into

Meant to tag @fregante 😃. Please give 0.13.0-beta.3 a try and see if it works

@twschiller can you try 0.13.0-alpha.5 and see if that resolves your issue?

i’ll just close this issue for now and we can reopen with other reports.