Skip to content
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

Merged
merged 2 commits into from
Sep 7, 2024

Conversation

sai6855
Copy link
Contributor

@sai6855 sai6855 commented Sep 6, 2024

This PR resolves below feedback from slack

If the load function returns an empty array in this example the component keeps loading indefinitely. Set the topFilms const to an empty array to see this behavior.

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

@sai6855 sai6855 added docs Improvements or additions to the documentation package: material-ui Specific to @mui/material enhancement This is not a bug, nor a new feature labels Sep 6, 2024
@sai6855 sai6855 marked this pull request as draft September 6, 2024 07:34
@mui-bot
Copy link

mui-bot commented Sep 6, 2024

Netlify deploy preview

https://deploy-preview-43630--material-ui.netlify.app/

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against f11f2dc

@@ -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;
Copy link
Contributor Author

@sai6855 sai6855 Sep 6, 2024

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


if (!loading) {
return undefined;
}
Copy link
Contributor Author

@sai6855 sai6855 Sep 6, 2024

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.

@sai6855 sai6855 marked this pull request as ready for review September 6, 2024 08:10
Copy link
Member

@ZeeshanTamboli ZeeshanTamboli left a 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!

@ZeeshanTamboli ZeeshanTamboli changed the title [docs][material-ui][Autocomplete] Refactor loading demo [docs][material-ui][Autocomplete] Refactor asynchronous loading demo Sep 7, 2024
@ZeeshanTamboli ZeeshanTamboli merged commit fc65397 into mui:master Sep 7, 2024
22 checks passed
Michael-Hutchinson pushed a commit to Michael-Hutchinson/material-ui that referenced this pull request Sep 7, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
docs Improvements or additions to the documentation enhancement This is not a bug, nor a new feature package: material-ui Specific to @mui/material
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants