New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
GridLoader is not displayed in grid #386
Comments
I'm not able to reproduce via the demo site. Can you show me what the css looks like? I wonder if the css is inheriting something from the parent |
Sorry, I'm not on this projet anymore, and don't have the code anymore :/ |
i'll just close this issue for now and we can reopen with other reports. |
@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? |
import GridLoader from "react-spinners/GridLoader";
const DEFAULT_STYLE = {
margin: "auto", // Center
padding: "20px",
display: "flex",
justifyContent: "center"
};
export default function App() {
return (
<div style={DEFAULT_STYLE} data-testid="loader">
<GridLoader />
</div>
);
} @twschiller I tried to reproduce but couldn't. this is a copy/paste the Loader implementation. I am able to reproduce by adding a with override like <GridLoader css={{ width: 300 }} /> can ou check the css and see if that happens? did the default width get overwritten? |
@twschiller can you try |
I tried updating from 0.9.0 and the loader is completely broken/hidden: It should look like this: I don't know if I missed some required changes, I'm just calling it as Same goes on in Storybook: |
turns out you can't do inline style with |
@twschiller @GuillaumeDesforges can you try on |
Meant to tag @fregante :). Please give 0.13.0-beta.3 a try and see if it works |
I think it's finally working, but I'm getting this TypeScript error in your latest beta.It's probably because I'm on React 17 and am using its types. node_modules/react-spinners/helpers/props.d.ts:3:11 - error TS2430: Interface 'CommonProps' incorrectly extends interface 'ClassAttributes<HTMLSpanElement> & HTMLAttributes<HTMLSpanElement>'.
Type 'CommonProps' is not assignable to type 'HTMLAttributes<HTMLSpanElement>'.
Types of property 'css' are incompatible.
Type 'CSSProperties' is not assignable to type 'InterpolationWithTheme<any>'.
Type 'Properties<string | number, string & {}>' is not assignable to type 'ObjectInterpolation<undefined>'.
Types of property 'columnCount' are incompatible.
Type 'ColumnCount' is not assignable to type 'ColumnCountProperty | ColumnCountProperty[] | ("auto" | Globals)[]'.
Type 'string & {}' is not assignable to type 'ColumnCountProperty | ColumnCountProperty[] | ("auto" | Globals)[]'.
Type 'String' is missing the following properties from type '("auto" | Globals)[]': pop, push, join, reverse, and 21 more.
3 interface CommonProps extends DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> { |
Hmm, that look more like @emotion error? Maybe I need to rename the css prop to styleOverride or something. See if that helps |
seems related to emotion-js/emotion#1800? 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:
Will have to track down which emotion release the fix for emotion-js/emotion#1800 would have been rolled into |
Let me know what you find. Given the number of projects using emotion, I'm tempted to rename the prop to avoid conflicts. Just in case this package is used alongside emotion |
decided that renaming the prop made sense. it was only called @twschiller want to give |
@davidhu2000 Thanks! It's working but the grid loader animation is a bit jumpy (not smooth) compared to |
Yeah a video will be helpful. Given this is a total rewrite of the component, wouldn't be surprised if I missed a thing or two |
so comparing the code before vs current https://github.com/davidhu2000/react-spinners/blob/main/src/GridLoader.tsx altho the animation is based on a random number, maybe sometimes it looks choppy and ok other times? |
Apologies for the delay, we were in crunch on a release the past couple weeks. Here's a Loom of the issue: https://www.loom.com/share/553454bd82fc471f8ecbd81b6a905b09 If I just throw it into Storybook, I don't see the jumpiness. So I think it has to do with re-renders/remounts. We might have to memoize the component or fix our render tree. (The jumpiness is probably on our side) With the If we don't do that, we're still seeing the bug from the original ticket: |
actually i see that on my side in storybook as well. Will see what i can figure out |
looks like adding Please let me know if you run into any more issues |
@davidhu2000 Thanks, looks like this version fixes the line break problem |
Turns out for me it was inherited white-space nowrap from bootstap's navbar brand
|
Describe the bug
The GridLoader is not displayed in grid, but in one line.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
GridLoader dots should be displayed in a 3x3 grid, not on one unique line.
Screenshots
Additional context
Must be because of #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.
The text was updated successfully, but these errors were encountered: