-
-
Couldn't load subscription status.
- Fork 32.7k
[docs][material-ui][Autocomplete] Refactor asynchronous loading demo #43630
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
Conversation
Netlify deploy previewhttps://deploy-preview-43630--material-ui.netlify.app/ Bundle size report |
| export default function Asynchronous() { | ||
| const [open, setOpen] = React.useState(false); | ||
| const [options, setOptions] = React.useState([]); | ||
| const loading = open && options.length === 0; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We received feedback in slack, that if empty array is returned here demo is in loading state indefinetly. So i decoupled loading state from options.
To reproduce the issue, pass empty array here and check demo
| setOptions([...topFilms]); |
|
|
||
| if (!loading) { | ||
| return undefined; | ||
| } |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I also refactored the code to remove twouseEffect hooks, achieving the same functionality with more readable code.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nice refactor. Looks good!
loading demo
This PR resolves below feedback from slack
before Demo link: https://mui.com/material-ui/react-autocomplete/#load-on-open
after demo: https://deploy-preview-43630--material-ui.netlify.app/material-ui/react-autocomplete/#load-on-open