-
-
Notifications
You must be signed in to change notification settings - Fork 32.5k
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
[docs][material-ui][Autocomplete] Refactor asynchronous loading demo #43630
Conversation
Netlify deploy previewhttps://deploy-preview-43630--material-ui.netlify.app/ Bundle size report |
@@ -14,44 +14,30 @@ function sleep(duration) { | |||
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