feat: add loader state for buttons and use it for API CTA #1077
Conversation
Elmenax2
commented
Dec 13, 2024
Elmenax2
commented
- Added a loading state of FantasyButton and StyledButton
- Use the loading state for all the CTA that do an API request
- Went through all the user views (did not do Admin views as I assume that is not used by many?)
- Tested all the buttons but let me know if I have missed anything
| {loading && ( | ||
| <Box sx={{ position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%)' }}> | ||
| <Loader size={loaderSize} color="inherit" /> | ||
| </Box> | ||
| )} | ||
| <Box sx={{ visibility: loading ? 'hidden' : 'initial', }}> | ||
| {children} | ||
| </Box> |
There was a problem hiding this comment.
Instead of absolute positioning, I would rather only display the loader instead of the children if the loading state is true, and not use the visibility CSS rule, as it's handled differently on pretty much every browser out there.
(I didn't check if the loader was correctly aligned in my suggestion)
| {loading && ( | |
| <Box sx={{ position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%)' }}> | |
| <Loader size={loaderSize} color="inherit" /> | |
| </Box> | |
| )} | |
| <Box sx={{ visibility: loading ? 'hidden' : 'initial', }}> | |
| {children} | |
| </Box> | |
| {loading ? ( | |
| <Loader size={loaderSize} color="inherit" /> | |
| ) : children} |
There was a problem hiding this comment.
I originally went for that solution, however it does not render well because the button will adjust its width, causing the button to be smaller (since the loader will be smaller than the text). That is why I went with the visibility and absolute positioning, to make sure the button would keep its current width.
If you think that it does not matter to have the button size changes when switching to loading state, I can follow your suggestion
There was a problem hiding this comment.
Alright, I understand, then your solution can work, however, you need to add more css rules to hide the box parent to the children, since visibility is poorly handled (Also I didn't check yet, but make sure the added box doesn't add more padding/margin)
| {loading && ( | ||
| <Box sx={{ position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%)' }}> | ||
| <Loader size={16} color="inherit" /> | ||
| </Box> | ||
| )} | ||
| <Box sx={{ visibility: loading ? 'hidden' : 'initial', }}> | ||
| {children} | ||
| </Box> |
There was a problem hiding this comment.
Same notes as the FantasyButton, only display the loader, not the children if it's loading
| @@ -99,6 +102,7 @@ const CellTournament = ({ | |||
| shadow={false} | |||
| contrast={false} | |||
| onClick={registerBrute} | |||
| disabled={isRegisteringBrute} | |||
There was a problem hiding this comment.
Shouldn't it use your new loading attribute instead?
|
Are you still working on this @Elmenax2 ? |
Yes, I'm planning to finish that. I have been quite busy in the last weeks, but I'll wrap it up! Sorry about the delay |
|
No problem, take your time. |
