[LoadingButton] Introduce new component #21389

mnajdova · 2020-06-10T19:01:26Z

Inspired by #17810
Closes #7223

<LoadingButton variant="outlined" pending pendingIndicatorPosition="center">
  Fetch data
</LoadingButton>
<LoadingButton
  variant="outlined"
  pending
  pendingIndicator="Loading..."
  pendingIndicatorPosition="center"
>
  Submit
</LoadingButton>
<LoadingButton
  variant="contained"
  color="primary"
  pending
  pendingIndicatorPosition="end"
  endIcon={<SendIcon />}
>
  Send
</LoadingButton>
<LoadingButton
  variant="contained"
  color="secondary"
  pending
  startIcon={<SaveIcon />}
>
  Save
</LoadingButton>

Some considerations:

I've added pendingIndicatorPosition for allowing customers to specify where the pendingIndicator will be shown: 'start' | 'center' | 'end'. It is replacing respectively the startIcon, children or the endIcon part.
the default pendingIndicator is CircularProgress
I am setting the Button to disabled if it is in pending state, although this means that the contained buttons will end up with the grey disabled background.. Not sure if this is expected, but I am open for other ideas
The pendingIndicator is absolutely positioned inside the Button, depending on the pendingIndicatorPosition prop, in order to avoid width changes of the Button

Benchmark

The implementation was benchmarked with the following sources. I have noticed that the loading and disabled states are often styled independently.

Evergreen

Blueprint

Vuetify

Cosmos

Antd

Element

Sancho

SemanticUI

Quasar

Base UI

Atlaskit

mui-pr-bot · 2020-06-10T19:09:18Z

@material-ui/lab: parsed: +4.18% , gzip: +3.11%

Details of bundle changes.

Comparing: c4351c6...98b6c6c

Details of page changes

bundle	Size Change	Size	Gzip Change	Gzip
/components/buttons	▲ +4.3 kB (+16.17% )	30.9 kB	--	-1 B
/api-docs/loading-button	▲ +1.87 kB (+Infinity% )	1.87 kB	▼ -1 B (-Infinity% )	-1 B
/blog/october-2019-update	▲ +10 B (+0.40% )	2.52 kB	--	-1 B
/company/jobs	▼ -10 B (-0.75% )	1.33 kB	--	-1 B
/performance/table-emotion	▼ -10 B (-0.12% )	8.49 kB	--	-1 B
/_app	--	37.4 kB	--	-1 B
/api-docs/alert-title	--	1.4 kB	--	-1 B
/api-docs/alert	--	2.4 kB	--	-1 B
/api-docs/app-bar	--	1.94 kB	--	-1 B
/api-docs/autocomplete	--	4.62 kB	--	-1 B
/api-docs/avatar-group	--	1.51 kB	--	-1 B
/api-docs/avatar	--	1.86 kB	--	-1 B
/api-docs/backdrop	--	1.73 kB	--	-1 B
/api-docs/badge	--	2.13 kB	--	-1 B
/api-docs/bottom-navigation-action	--	1.81 kB	--	-1 B
/api-docs/bottom-navigation	--	1.7 kB	--	-1 B
/api-docs/breadcrumbs	--	1.79 kB	--	-1 B
/api-docs/button-base	--	2.22 kB	--	-1 B
/api-docs/button-group	--	2.22 kB	--	-1 B
/api-docs/button	--	2.53 kB	--	-1 B
/api-docs/card-action-area	--	1.58 kB	--	-1 B
/api-docs/card-actions	--	1.47 kB	--	-1 B
/api-docs/card-content	--	1.45 kB	--	-1 B
/api-docs/card-header	--	1.78 kB	--	-1 B
/api-docs/card-media	--	1.69 kB	--	-1 B
/api-docs/card	--	1.5 kB	--	-1 B
/api-docs/checkbox	--	2.3 kB	--	-1 B
/api-docs/chip	--	2.46 kB	--	-1 B
/api-docs/circular-progress	--	2.07 kB	--	-1 B
/api-docs/click-away-listener	--	1.45 kB	--	-1 B
/api-docs/collapse	--	2.13 kB	--	-1 B
/api-docs/container	--	1.83 kB	--	-1 B
/api-docs/css-baseline	--	1.4 kB	--	-1 B
/api-docs/dialog-actions	--	1.47 kB	--	-1 B
/api-docs/dialog-content-text	--	1.48 kB	--	-1 B
/api-docs/dialog-content	--	1.45 kB	--	-1 B
/api-docs/dialog-title	--	1.49 kB	--	-1 B
/api-docs/dialog	--	2.74 kB	--	-1 B
/api-docs/divider	--	1.81 kB	--	-1 B
/api-docs/drawer	--	2.13 kB	--	-1 B
/api-docs/expansion-panel-actions	--	1.49 kB	--	-1 B
/api-docs/expansion-panel-details	--	1.41 kB	--	-1 B
/api-docs/expansion-panel-summary	--	1.72 kB	--	-1 B
/api-docs/expansion-panel	--	1.98 kB	--	-1 B
/api-docs/fab	--	2.1 kB	--	-1 B
/api-docs/fade	--	1.5 kB	--	-1 B
/api-docs/filled-input	--	2.87 kB	--	-1 B
/api-docs/form-control-label	--	1.99 kB	--	-1 B
/api-docs/form-control	--	2.36 kB	--	-1 B
/api-docs/form-group	--	1.55 kB	--	-1 B
/api-docs/form-helper-text	--	1.91 kB	--	-1 B
/api-docs/form-label	--	1.84 kB	--	-1 B
/api-docs/grid-list-tile-bar	--	1.8 kB	--	-1 B
/api-docs/grid-list-tile	--	1.72 kB	--	-1 B
/api-docs/grid-list	--	1.63 kB	--	-1 B
/api-docs/grid	--	2.56 kB	--	-1 B
/api-docs/grow	--	1.55 kB	--	-1 B
/api-docs/hidden	--	1.53 kB	--	-1 B
/api-docs/icon-button	--	2.08 kB	--	-1 B
/api-docs/icon	--	1.78 kB	--	-1 B
/api-docs/input-adornment	--	1.94 kB	--	-1 B
/api-docs/input-base	--	2.95 kB	--	-1 B
/api-docs/input-label	--	2.07 kB	--	-1 B
/api-docs/input	--	2.83 kB	--	-1 B
/api-docs/linear-progress	--	2.03 kB	--	-1 B
/api-docs/link	--	1.94 kB	--	-1 B
/api-docs/list-item-avatar	--	1.51 kB	--	-1 B
/api-docs/list-item-icon	--	1.51 kB	--	-1 B
/api-docs/list-item-secondary-action	--	1.47 kB	--	-1 B
/api-docs/list-item-text	--	1.79 kB	--	-1 B
/api-docs/list-item	--	2.25 kB	--	-1 B
/api-docs/list-subheader	--	1.77 kB	--	-1 B
/api-docs/list	--	1.68 kB	--	-1 B
/api-docs/menu-item	--	1.74 kB	--	-1 B
/api-docs/menu-list	--	1.57 kB	--	-1 B
/api-docs/menu	--	2.42 kB	--	-1 B
/api-docs/mobile-stepper	--	1.94 kB	--	-1 B
/api-docs/modal	--	2.43 kB	--	-1 B
/api-docs/native-select	--	2.11 kB	--	-1 B
/api-docs/no-ssr	--	1.3 kB	--	-1 B
/api-docs/outlined-input	--	2.98 kB	--	-1 B
/api-docs/pagination-item	--	1.97 kB	--	-1 B
/api-docs/pagination	--	2.24 kB	--	-1 B
/api-docs/paper	--	1.87 kB	--	-1 B
/api-docs/popover	--	2.7 kB	--	-1 B
/api-docs/popper	--	1.92 kB	--	-1 B
/api-docs/portal	--	1.34 kB	--	-1 B
/api-docs/radio-group	--	1.45 kB	--	-1 B
/api-docs/radio	--	2.12 kB	--	-1 B
/api-docs/rating	--	2.49 kB	--	-1 B
/api-docs/root-ref	--	1.42 kB	--	-1 B
/api-docs/scoped-css-baseline	--	1.4 kB	--	-1 B
/api-docs/select	--	2.96 kB	--	-1 B
/api-docs/skeleton	--	1.87 kB	--	-1 B
/api-docs/slide	--	1.54 kB	--	-1 B
/api-docs/slider	--	3.11 kB	--	-1 B
/api-docs/snackbar-content	--	1.61 kB	--	-1 B
/api-docs/snackbar	--	2.71 kB	--	-1 B
/api-docs/speed-dial-action	--	2.04 kB	--	-1 B
/api-docs/speed-dial-icon	--	1.55 kB	--	-1 B
/api-docs/speed-dial	--	2.32 kB	--	-1 B
/api-docs/step-button	--	1.63 kB	--	-1 B
/api-docs/step-connector	--	1.54 kB	--	-1 B
/api-docs/step-content	--	1.72 kB	--	-1 B
/api-docs/step-icon	--	1.57 kB	--	-1 B
/api-docs/step-label	--	1.9 kB	--	-1 B
/api-docs/step	--	1.64 kB	--	-1 B
/api-docs/stepper	--	1.84 kB	--	-1 B
/api-docs/svg-icon	--	2.26 kB	--	-1 B
/api-docs/swipeable-drawer	--	2.01 kB	--	-1 B
/api-docs/switch	--	2.46 kB	--	-1 B
/api-docs/tab-context	--	1.08 kB	--	-1 B
/api-docs/tab-list	--	1.09 kB	--	-1 B
/api-docs/tab-panel	--	1.48 kB	--	-1 B
/api-docs/tab-scroll-button	--	1.62 kB	--	-1 B
/api-docs/tab	--	1.97 kB	--	-1 B
/api-docs/table-body	--	1.47 kB	--	-1 B
/api-docs/table-cell	--	2.13 kB	--	-1 B
/api-docs/table-container	--	1.48 kB	--	-1 B
/api-docs/table-footer	--	1.47 kB	--	-1 B
/api-docs/table-head	--	1.46 kB	--	-1 B
/api-docs/table-pagination	--	2.47 kB	--	-1 B
/api-docs/table-row	--	1.69 kB	--	-1 B
/api-docs/table-sort-label	--	1.83 kB	--	-1 B
/api-docs/table	--	1.7 kB	--	-1 B
/api-docs/tabs	--	2.68 kB	--	-1 B
/api-docs/text-field	--	3.18 kB	--	-1 B
/api-docs/textarea-autosize	--	1.13 kB	--	-1 B
/api-docs/timeline-connector	--	1.4 kB	--	-1 B
/api-docs/timeline-content	--	1.52 kB	--	-1 B
/api-docs/timeline-dot	--	1.63 kB	--	-1 B
/api-docs/timeline-item	--	1.54 kB	--	-1 B
/api-docs/timeline-opposite-content	--	1.53 kB	--	-1 B
/api-docs/timeline-separator	--	1.4 kB	--	-1 B
/api-docs/timeline	--	1.52 kB	--	-1 B
/api-docs/toggle-button-group	--	1.92 kB	--	-1 B
/api-docs/toggle-button	--	1.79 kB	--	-1 B
/api-docs/toolbar	--	1.65 kB	--	-1 B
/api-docs/tooltip	--	2.57 kB	--	-1 B
/api-docs/tree-item	--	1.89 kB	--	-1 B
/api-docs/tree-view	--	1.92 kB	--	-1 B
/api-docs/typography	--	2.59 kB	--	-1 B
/api-docs/unstable-trap-focus	--	1.46 kB	--	-1 B
/api-docs/zoom	--	1.52 kB	--	-1 B
/blog/2019-developer-survey-results	--	6.36 kB	--	-1 B
/blog/2019	--	4.25 kB	--	-1 B
/blog/2020-introducing-sketch	--	3.52 kB	--	-1 B
/blog/2020-q1-update	--	4.34 kB	--	-1 B
/blog/april-2019-update	--	3.14 kB	--	-1 B
/blog/august-2019-update	--	2.25 kB	--	-1 B
/blog/december-2019-update	--	2.38 kB	--	-1 B
/blog/july-2019-update	--	2.14 kB	--	-1 B
/blog/june-2019-update	--	2.01 kB	--	-1 B
/blog/march-2019-update	--	2.54 kB	--	-1 B
/blog/material-ui-v1-is-out	--	6.67 kB	--	-1 B
/blog/material-ui-v4-is-out	--	9.69 kB	--	-1 B
/blog/may-2019-update	--	2.36 kB	--	-1 B
/blog/november-2019-update	--	2.76 kB	--	-1 B
/blog/september-2019-update	--	2.69 kB	--	-1 B
/company/about	--	1.75 kB	--	-1 B
/company/contact	--	1.34 kB	--	-1 B
/company/software-engineer	--	5.28 kB	--	-1 B
/components/about-the-lab	--	7.09 kB	--	-1 B
/components/alert	--	12.9 kB	--	-1 B
/components/app-bar	--	30.2 kB	--	-1 B
/components/autocomplete	--	111 kB	--	-1 B
/components/avatars	--	9.2 kB	--	-1 B
/components/backdrop	--	2.68 kB	--	-1 B
/components/badges	--	15.4 kB	--	-1 B
/components/bottom-navigation	--	6.25 kB	--	-1 B
/components/box	--	8.05 kB	--	-1 B
/components/breadcrumbs	--	14.7 kB	--	-1 B
/components/button-group	--	7.61 kB	--	-1 B
/components/cards	--	17.3 kB	--	-1 B
/components/checkboxes	--	16.5 kB	--	-1 B
/components/chips	--	22 kB	--	-1 B
/components/click-away-listener	--	4.94 kB	--	-1 B
/components/container	--	3.81 kB	--	-1 B
/components/css-baseline	--	7.04 kB	--	-1 B
/components/dialogs	--	43.1 kB	--	-1 B
/components/dividers	--	12.8 kB	--	-1 B
/components/drawers	--	31.5 kB	--	-1 B
/components/expansion-panels	--	20.7 kB	--	-1 B
/components/floating-action-button	--	10.9 kB	--	-1 B
/components/grid-list	--	12 kB	--	-1 B
/components/grid	--	32.4 kB	--	-1 B
/components/hidden	--	10.6 kB	--	-1 B
/components/icons	--	27.6 kB	--	-1 B
/components/links	--	7.04 kB	--	-1 B
/components/lists	--	26.5 kB	--	-1 B
/components/material-icons	--	729 kB	--	-1 B
/components/menus	--	25.2 kB	--	-1 B
/components/modal	--	12.9 kB	--	-1 B
/components/no-ssr	--	5.33 kB	--	-1 B
/components/pagination	--	8.19 kB	--	-1 B
/components/paper	--	3.52 kB	--	-1 B
/components/pickers	--	39.3 kB	--	-1 B
/components/popover	--	17.6 kB	--	-1 B
/components/popper	--	22.5 kB	--	-1 B
/components/portal	--	3.17 kB	--	-1 B
/components/progress	--	21.2 kB	--	-1 B
/components/radio-buttons	--	15.6 kB	--	-1 B
/components/rating	--	11 kB	--	-1 B
/components/selects	--	33.1 kB	--	-1 B
/components/skeleton	--	13.7 kB	--	-1 B
/components/slider	--	16.3 kB	--	-1 B
/components/snackbars	--	22.2 kB	--	-1 B
/components/speed-dial	--	14.7 kB	--	-1 B
/components/steppers	--	37.1 kB	--	-1 B
/components/switches	--	16.9 kB	--	-1 B
/components/tables	--	174 kB	--	-1 B
/components/tabs	--	25.2 kB	--	-1 B
/components/text-fields	--	56.6 kB	--	-1 B
/components/textarea-autosize	--	3.04 kB	--	-1 B
/components/timeline	--	5.18 kB	--	-1 B
/components/toggle-button	--	11.9 kB	--	-1 B
/components/tooltips	--	17.5 kB	--	-1 B
/components/transfer-list	--	9.7 kB	--	-1 B
/components/transitions	--	12.6 kB	--	-1 B
/components/tree-view	--	11.3 kB	--	-1 B
/components/typography	--	10.1 kB	--	-1 B
/components/use-media-query	--	12.9 kB	--	-1 B
/customization/breakpoints	--	16.4 kB	--	-1 B
/customization/color	--	18.9 kB	--	-1 B
/customization/components	--	38.7 kB	--	-1 B
/customization/default-theme	--	8.92 kB	--	-1 B
/customization/density	--	9.73 kB	--	-1 B
/customization/globals	--	5.23 kB	--	-1 B
/customization/palette	--	12.9 kB	--	-1 B
/customization/spacing	--	2.83 kB	--	-1 B
/customization/theming	--	19.7 kB	--	-1 B
/customization/typography	--	12.5 kB	--	-1 B
/customization/z-index	--	3.49 kB	--	-1 B
/discover-more/backers	--	3.03 kB	--	-1 B
/discover-more/changelog	--	1.45 kB	--	-1 B
/discover-more/languages	--	3.44 kB	--	-1 B
/discover-more/related-projects	--	7.73 kB	--	-1 B
/discover-more/roadmap	--	3.72 kB	--	-1 B
/discover-more/showcase	--	15.1 kB	--	-1 B
/discover-more/team	--	6.84 kB	--	-1 B
/discover-more/vision	--	6.76 kB	--	-1 B
/getting-started/example-projects	--	7.57 kB	--	-1 B
/getting-started/faq	--	34.6 kB	--	-1 B
/getting-started/installation	--	7.85 kB	--	-1 B
/getting-started/learn	--	8.98 kB	--	-1 B
/getting-started/support	--	9.15 kB	--	-1 B
/getting-started/supported-components	--	6.74 kB	--	-1 B
/getting-started/supported-platforms	--	6.14 kB	--	-1 B
/getting-started/templates	--	8.92 kB	--	-1 B
/getting-started/templates/album	--	5.57 kB	--	-1 B
/getting-started/templates/blog	--	7.47 kB	--	-1 B
/getting-started/templates/checkout	--	10.2 kB	--	-1 B
/getting-started/templates/dashboard	--	8.86 kB	--	-1 B
/getting-started/templates/pricing	--	7.79 kB	--	-1 B
/getting-started/templates/sign-in-side	--	8.21 kB	--	-1 B
/getting-started/templates/sign-in	--	8.44 kB	--	-1 B
/getting-started/templates/sign-up	--	8.54 kB	--	-1 B
/getting-started/templates/sticky-footer	--	1.54 kB	--	-1 B
/getting-started/usage	--	9.6 kB	--	-1 B
/guides/api	--	14.7 kB	--	-1 B
/guides/composition	--	14.9 kB	--	-1 B
/guides/flow	--	2.26 kB	--	-1 B
/guides/interoperability	--	16 kB	--	-1 B
/guides/localization	--	19 kB	--	-1 B
/guides/migration-v0x	--	7.51 kB	--	-1 B
/guides/migration-v3	--	19.3 kB	--	-1 B
/guides/migration-v4	--	1.46 kB	--	-1 B
/guides/minimizing-bundle-size	--	10 kB	--	-1 B
/guides/responsive-ui	--	4.27 kB	--	-1 B
/guides/right-to-left	--	5.24 kB	--	-1 B
/guides/server-rendering	--	8.75 kB	--	-1 B
/guides/testing	--	8.7 kB	--	-1 B
/guides/typescript	--	15.6 kB	--	-1 B
/performance/table-component	--	1.44 kB	--	-1 B
/performance/table-hook	--	2.24 kB	--	-1 B
/performance/table-mui	--	4.5 kB	--	-1 B
/performance/table-raw	--	613 B	--	-1 B
/performance/table-styled-components	--	2.6 kB	--	-1 B
/premium-themes/onepirate	--	7.34 kB	--	-1 B
/premium-themes/onepirate/forgot-password	--	1.01 kB	--	-1 B
/premium-themes/onepirate/privacy	--	4.44 kB	--	-1 B
/premium-themes/onepirate/sign-in	--	1.07 kB	--	-1 B
/premium-themes/onepirate/sign-up	--	1.12 kB	--	-1 B
/premium-themes/onepirate/terms	--	11.8 kB	--	-1 B
/premium-themes/paperbase	--	7.67 kB	--	-1 B
/production-error	--	3.11 kB	--	-1 B
/styles/advanced	--	31.7 kB	--	-1 B
/styles/api	--	16.9 kB	--	-1 B
/styles/basics	--	16.5 kB	--	-1 B
/system/api	--	5.96 kB	--	-1 B
/system/basics	--	27.6 kB	--	-1 B
/system/borders	--	4.1 kB	--	-1 B
/system/display	--	6.75 kB	--	-1 B
/system/flexbox	--	5.85 kB	--	-1 B
/system/palette	--	4.35 kB	--	-1 B
/system/positions	--	2.53 kB	--	-1 B
/system/shadows	--	3.86 kB	--	-1 B
/system/sizing	--	3.53 kB	--	-1 B
/system/spacing	--	6.01 kB	--	-1 B
/system/typography	--	4.42 kB	--	-1 B
/versions	--	23 kB	--	-1 B
docs:chunk:shared	--	65.8 kB	--	-1 B
docs:shared:chunk/commons	--	5.99 kB	--	-1 B
docs:shared:chunk/framework	--	42.3 kB	--	-1 B
docs:shared:runtime/main	--	6.78 kB	--	-1 B
docs:shared:runtime/webpack	--	1.24 kB	--	-1 B

bundle	Size Change	Size	Gzip Change	Gzip
LoadingButton	▲ +87.6 kB (+Infinity% )	87.6 kB	▲ +27.3 kB (+Infinity% )	27.3 kB
@material-ui/lab	▲ +9.32 kB (+4.18% )	232 kB	▲ +2.04 kB (+3.11% )	67.7 kB
Button	▼ -57 B (-0.07% )	83.8 kB	▼ -4 B (-0.02% )	25.7 kB
CircularProgress	▼ -24 B (-0.03% )	68.6 kB	▼ -203 B (-0.94% )	21.4 kB
Avatar	▲ +3 B (0.00% )	69.7 kB	▼ -4 B (-0.02% )	21.8 kB
TabScrollButton	▲ +3 B (0.00% )	81.1 kB	▼ -4 B (-0.02% )	25.4 kB
PaginationItem	▲ +3 B (0.00% )	85 kB	▼ -3 B (-0.01% )	26.2 kB
Tabs	▲ +3 B (0.00% )	90.2 kB	▼ -3 B (-0.01% )	28.2 kB
Select	▲ +3 B (0.00% )	121 kB	▼ -2 B (-0.01% )	36.1 kB
Tooltip	▲ +3 B (0.00% )	107 kB	▼ -2 B (-0.01% )	33.9 kB
LinearProgress	▲ +2 B (0.00% )	69.9 kB	▲ +221 B (+1.02% )	21.8 kB
Slide	▲ +2 B (+0.01% )	30.7 kB	▲ +138 B (+1.36% )	10.3 kB
@material-ui/core	▲ +2 B (0.00% )	370 kB	▼ -15 B (-0.01% )	102 kB
TablePagination	▲ +2 B (0.00% )	148 kB	▼ -6 B (-0.01% )	43.5 kB
Autocomplete	▲ +2 B (0.00% )	136 kB	▼ -5 B (-0.01% )	42.8 kB
Menu	▲ +2 B (0.00% )	93.9 kB	▼ -5 B (-0.02% )	28.9 kB
Pagination	▲ +2 B (0.00% )	88.6 kB	▼ -4 B (-0.01% )	27.3 kB
Fab	▲ +2 B (0.00% )	80.9 kB	▼ -3 B (-0.01% )	25.2 kB
FormControl	▲ +2 B (0.00% )	68.9 kB	▼ -3 B (-0.01% )	21.4 kB
FormLabel	▲ +2 B (0.00% )	68 kB	▼ -3 B (-0.01% )	21 kB
RadioGroup	▲ +2 B (0.00% )	68.4 kB	▲ +3 B (+0.01% )	21.2 kB
StepLabel	▲ +2 B (0.00% )	73.1 kB	▼ -3 B (-0.01% )	22.6 kB
Chip	▲ +2 B (0.00% )	86.8 kB	▼ -2 B (-0.01% )	26.6 kB
InputLabel	▲ +2 B (0.00% )	69.8 kB	▼ -2 B (-0.01% )	21.5 kB
StepIcon	▲ +2 B (0.00% )	69.1 kB	▼ -2 B (-0.01% )	21.5 kB
TextField	▲ +2 B (0.00% )	130 kB	▼ -2 B (-0.01% )	38.2 kB
FormHelperText	▲ +2 B (0.00% )	67.8 kB	▼ -1 B (-0.00% )	21 kB
ListItem	▲ +2 B (0.00% )	81.1 kB	▼ -1 B (-0.00% )	25.4 kB
MenuItem	▲ +2 B (0.00% )	82.2 kB	▼ -1 B (-0.00% )	25.7 kB
OutlinedInput	▲ +2 B (0.00% )	79.1 kB	▲ +1 B (0.00% )	24.5 kB
Drawer	▲ +2 B (0.00% )	90.4 kB	--	27.5 kB
FilledInput	▲ +2 B (0.00% )	78 kB	--	24.2 kB
ButtonBase	▼ -1 B (-0.00% )	78 kB	▼ -2 B (-0.01% )	24.5 kB
MenuList	▲ +1 B (0.00% )	70.5 kB	▲ +2 B (+0.01% )	22 kB
Popover	▲ +1 B (0.00% )	88.3 kB	▼ -2 B (-0.01% )	27.3 kB
Backdrop	▲ +1 B (0.00% )	73.1 kB	▲ +1 B (0.00% )	22.6 kB
Checkbox	--	86.3 kB	▲ +63 B (+0.23% )	27.4 kB
BottomNavigationAction	--	79.6 kB	▼ -15 B (-0.06% )	25.2 kB
TimelineDot	--	67.5 kB	▼ -15 B (-0.07% )	21.1 kB
TimelineContent	--	69 kB	▼ -11 B (-0.05% )	21.6 kB
Alert	--	87.4 kB	▼ -9 B (-0.03% )	27.6 kB
Radio	--	87.3 kB	▲ +9 B (+0.03% )	27.6 kB
@material-ui/system	--	17.2 kB	▼ -8 B (-0.18% )	4.51 kB
Box	--	73.3 kB	▼ -7 B (-0.03% )	22.2 kB
TimelineItem	--	67.6 kB	▼ -7 B (-0.03% )	21.1 kB
Timeline	--	66.9 kB	▼ -6 B (-0.03% )	20.9 kB
ToggleButton	--	80.2 kB	▼ -6 B (-0.02% )	25.4 kB
ToggleButtonGroup	--	67.8 kB	▼ -6 B (-0.03% )	21.3 kB
Hidden	--	70.5 kB	▼ -5 B (-0.02% )	22 kB
ListItemText	--	69.5 kB	▼ -5 B (-0.02% )	21.8 kB
Snackbar	--	80.9 kB	▼ -5 B (-0.02% )	25.4 kB
Tab	--	80.6 kB	▼ -5 B (-0.02% )	25.6 kB
TableCell	--	68.6 kB	▼ -5 B (-0.02% )	21.5 kB
BottomNavigation	--	66.8 kB	▲ +4 B (+0.02% )	20.9 kB
ButtonGroup	--	87.5 kB	▲ +4 B (+0.01% )	27 kB
TabList	--	91.4 kB	▲ +4 B (+0.01% )	29.2 kB
TimelineOppositeContent	--	69.1 kB	▼ -4 B (-0.02% )	21.7 kB
CardActionArea	--	79.1 kB	▲ +3 B (+0.01% )	25 kB
Container	--	67.7 kB	▼ -3 B (-0.01% )	21.1 kB
IconButton	--	80.2 kB	▼ -3 B (-0.01% )	25.1 kB
SpeedDialAction	--	123 kB	▼ -3 B (-0.01% )	39.1 kB
SvgIcon	--	67.5 kB	▼ -3 B (-0.01% )	21 kB
SwipeableDrawer	--	97.8 kB	▼ -3 B (-0.01% )	30.7 kB
Typography	--	68.1 kB	▼ -3 B (-0.01% )	21.2 kB
@material-ui/styles	--	52.1 kB	▼ -2 B (-0.01% )	15.6 kB
AlertTitle	--	68.7 kB	▼ -2 B (-0.01% )	21.5 kB
AppBar	--	68.5 kB	▼ -2 B (-0.01% )	21.4 kB
Breadcrumbs	--	84.6 kB	▼ -2 B (-0.01% )	26.8 kB
CardActions	--	66.5 kB	▲ +2 B (+0.01% )	20.8 kB
CardContent	--	66.4 kB	▲ +2 B (+0.01% )	20.7 kB
CardHeader	--	69.6 kB	▼ -2 B (-0.01% )	21.8 kB
CardMedia	--	66.8 kB	▼ -2 B (-0.01% )	20.9 kB
DialogActions	--	66.5 kB	▲ +2 B (+0.01% )	20.8 kB
DialogTitle	--	68.8 kB	▲ +2 B (+0.01% )	21.6 kB
Divider	--	67.2 kB	▲ +2 B (+0.01% )	21.1 kB
ExpansionPanel	--	77.1 kB	▲ +2 B (+0.01% )	24.2 kB
ExpansionPanelSummary	--	82.2 kB	▼ -2 B (-0.01% )	26 kB
Input	--	76.9 kB	▼ -2 B (-0.01% )	24 kB
InputAdornment	--	69.6 kB	▲ +2 B (+0.01% )	21.9 kB
InputBase	--	75 kB	▼ -2 B (-0.01% )	23.5 kB
ListSubheader	--	67.3 kB	▼ -2 B (-0.01% )	21.1 kB
MobileStepper	--	72.4 kB	▼ -2 B (-0.01% )	22.7 kB
NativeSelect	--	81.4 kB	▼ -2 B (-0.01% )	25.6 kB
Rating	--	75.3 kB	▼ -2 B (-0.01% )	24.2 kB
Slider	--	80.4 kB	▼ -2 B (-0.01% )	25.6 kB
SpeedDial	--	91.1 kB	▼ -2 B (-0.01% )	28.9 kB
Step	--	67.2 kB	▲ +2 B (+0.01% )	21.1 kB
StepContent	--	74.7 kB	▲ +2 B (+0.01% )	23.3 kB
Switch	--	85.5 kB	▼ -2 B (-0.01% )	26.8 kB
Table	--	67 kB	▼ -2 B (-0.01% )	21 kB
TableBody	--	66.6 kB	▼ -2 B (-0.01% )	20.8 kB
TableContainer	--	66.4 kB	▲ +2 B (+0.01% )	20.7 kB
TableFooter	--	66.6 kB	▲ +2 B (+0.01% )	20.8 kB
TabPanel	--	67.3 kB	▲ +2 B (+0.01% )	21.1 kB
TimelineConnector	--	66.4 kB	▲ +2 B (+0.01% )	20.8 kB
TimelineSeparator	--	66.4 kB	▲ +2 B (+0.01% )	20.8 kB
TreeView	--	72.8 kB	▲ +2 B (+0.01% )	22.8 kB
useAutocomplete	--	14.7 kB	▼ -2 B (-0.04% )	5.26 kB
Card	--	67.3 kB	▲ +1 B (0.00% )	21.1 kB
Collapse	--	73.5 kB	▲ +1 B (0.00% )	22.7 kB
Dialog	--	88.4 kB	▼ -1 B (-0.00% )	27.6 kB
DialogContentText	--	68.5 kB	▼ -1 B (-0.00% )	21.5 kB
ExpansionPanelActions	--	66.5 kB	▲ +1 B (0.00% )	20.8 kB
ExpansionPanelDetails	--	66.4 kB	▼ -1 B (-0.00% )	20.7 kB
FormControlLabel	--	70 kB	▼ -1 B (-0.00% )	21.9 kB
GridListTile	--	68.2 kB	▼ -1 B (-0.00% )	21.3 kB
Icon	--	67.3 kB	▲ +1 B (0.00% )	21 kB
List	--	66.8 kB	▼ -1 B (-0.00% )	20.8 kB
ListItemIcon	--	66.6 kB	▲ +1 B (0.00% )	20.8 kB
ListItemSecondaryAction	--	66.4 kB	▲ +1 B (0.00% )	20.8 kB
Paper	--	66.8 kB	▼ -1 B (-0.00% )	20.8 kB
RootRef	--	4.64 kB	▼ -1 B (-0.06% )	1.76 kB
SpeedDialIcon	--	69 kB	▼ -1 B (-0.00% )	21.6 kB
StepButton	--	86.4 kB	▼ -1 B (-0.00% )	27.3 kB
StepConnector	--	67.2 kB	▲ +1 B (0.00% )	21.1 kB
Stepper	--	69.2 kB	▲ +1 B (0.00% )	21.8 kB
TabContext	--	2.65 kB	▼ -1 B (-0.09% )	1.15 kB
TableRow	--	67 kB	▲ +1 B (0.00% )	21 kB
TableSortLabel	--	81.5 kB	▼ -1 B (-0.00% )	25.8 kB
useMediaQuery	--	2.56 kB	▲ +1 B (+0.09% )	1.06 kB
Zoom	--	29 kB	▼ -1 B (-0.01% )	9.8 kB
@material-ui/utils	--	7.19 kB	--	2.61 kB
AvatarGroup	--	70.7 kB	--	22.4 kB
Badge	--	69.8 kB	--	21.7 kB
ClickAwayListener	--	4.13 kB	--	1.66 kB
colorManipulator	--	4.14 kB	--	1.63 kB
CssBaseline	--	66.4 kB	--	20.8 kB
DialogContent	--	66.7 kB	--	20.8 kB
docs:/	--	12.5 kB	--	-1 B
docs:/_app	--	37.4 kB	--	-1 B
Fade	--	28.9 kB	--	9.66 kB
FormGroup	--	66.4 kB	--	20.8 kB
Grid	--	69.5 kB	--	21.8 kB
GridList	--	66.9 kB	--	21 kB
GridListTileBar	--	67.7 kB	--	21.2 kB
Grow	--	29.5 kB	--	9.88 kB
Link	--	71.1 kB	--	22.4 kB
ListItemAvatar	--	66.5 kB	--	20.8 kB
Modal	--	15.1 kB	--	5.26 kB
NoSsr	--	2.18 kB	--	1.03 kB
packages/material-ui/material-ui.production.min.js	--	326 kB	--	94.7 kB
Popper	--	28.7 kB	--	10.3 kB
Portal	--	2.87 kB	--	1.29 kB
ScopedCssBaseline	--	67.3 kB	--	21.1 kB
Skeleton	--	67.7 kB	--	21.3 kB
SnackbarContent	--	68 kB	--	21.3 kB
styles/createMuiTheme	--	21.9 kB	--	7.57 kB
TableHead	--	66.6 kB	--	20.8 kB
TextareaAutosize	--	5.23 kB	--	2.19 kB
Toolbar	--	66.8 kB	--	20.9 kB
TreeItem	--	80.5 kB	--	25.6 kB
Unstable_TrapFocus	--	3.85 kB	--	1.59 kB
useScrollTrigger	--	2.66 kB	--	1.08 kB

Generated by 🚫 dangerJS against 98b6c6c

packages/material-ui/src/LoadingButton/LoadingButton.d.ts

eps1lon

See #21389 (comment)

oliviertassinari · 2020-06-11T18:29:19Z

Would BusyButton be more appropriate?

packages/material-ui/src/LoadingButton/LoadingButton.js

oliviertassinari

Much better than my first iteration

packages/material-ui/src/BusyButton/BusyButton.d.ts

docs/src/pages/components/buttons/buttons.md

packages/material-ui/src/BusyButton/BusyButton.js

docs/src/pages/components/buttons/BusyButtons.js

packages/material-ui/src/BusyButton/BusyButton.js

docs/src/pages/components/buttons/buttons.md

Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com>

oliviertassinari · 2020-06-13T10:12:08Z

The first output of argos, I'm running it a second time to make sure the test will be stable

eps1lon

This should go in the lab first.

mnajdova · 2020-06-14T11:41:57Z

This should go in the lab first.

@eps1lon that makes sense. Should we leave the examples on the Buttons page, or create a new page under lab for the Busy buttons?

…erial-ui into feat/loading-button

oliviertassinari · 2020-06-14T12:14:12Z

Should we leave the examples on the Buttons page, or create a new page under lab for the Busy buttons?

@mnajdova "on the same page" is a viable option, for instance:

mnajdova · 2020-06-14T12:21:00Z

@mnajdova "on the same page" is a viable option, for instance:

https://material-ui.com/components/tabs/#experimental-api
https://material-ui.com/components/avatars/#grouped

Ok, will leave the examples then as they were.

packages/material-ui-lab/src/BusyButton/BusyButton.js

eps1lon

Great work!

dianacosma · 2020-07-02T13:53:12Z

When will this be released? Or is it already released? If so, in which version?

oliviertassinari · 2020-07-02T15:21:16Z

It was released in v5.0.0-alpha.1

jvvcn · 2020-07-21T09:31:26Z

just curious, will it be a new component in a library or it will be replacement for the Button component once LoadingButton will be moved from lab to core?

oliviertassinari · 2020-07-21T09:34:09Z

New component

mnajdova added 5 commits June 10, 2020 08:24

wip

8361424

wip

1e1de47

added position

ec083e3

renamed to LoadingButton

d9bea4c

fixed children

6071393

mnajdova commented Jun 10, 2020

View reviewed changes

packages/material-ui/src/LoadingButton/LoadingButton.d.ts Outdated Show resolved Hide resolved

fix width change when changing state

fa7701d

oliviertassinari changed the base branch from master to next June 10, 2020 21:30

oliviertassinari changed the base branch from next to master June 10, 2020 21:30

eps1lon reviewed Jun 11, 2020

View reviewed changes

packages/material-ui/src/LoadingButton/LoadingButton.js Outdated Show resolved Hide resolved

oliviertassinari changed the base branch from master to next June 11, 2020 20:00

renamed props and component

375cf71

mnajdova changed the title ~~[LoadingButton] Introduce new component~~ [BusyButton] Introduce new component Jun 12, 2020

mnajdova marked this pull request as ready for review June 12, 2020 06:47

oliviertassinari added the component: button This is the name of the generic UI component, not the React module! label Jun 12, 2020

oliviertassinari reviewed Jun 12, 2020

View reviewed changes

mnajdova and others added 7 commits June 12, 2020 17:49

Update packages/material-ui/src/BusyButton/BusyButton.js

276167c

Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com>

Update docs/src/pages/components/buttons/BusyButtons.js

e6f5a86

Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com>

Update docs/src/pages/components/buttons/BusyButtons.js

bc84de4

Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com>

Update packages/material-ui/src/BusyButton/BusyButton.d.ts

f8d4eb4

Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com>

addressing comments

2ea5ad0

fixed position

a0a2370

comments

e877474

oliviertassinari added the new feature New feature or request label Jun 12, 2020

mnajdova added 3 commits June 12, 2020 20:59

proptypes

5cf4b74

proptypes

e1f983a

fixed

09c5321

comments

22dc72c

oliviertassinari approved these changes Jun 13, 2020

View reviewed changes

oliviertassinari added the PR: ready to ship label Jun 13, 2020

empty commit to run argos twice and compare diff

f855cd2

oliviertassinari requested a review from eps1lon June 14, 2020 08:17

eps1lon requested changes Jun 14, 2020

View reviewed changes

eps1lon removed the PR: ready to ship label Jun 14, 2020

mnajdova added 3 commits June 14, 2020 14:07

moved BusyButton to lab

916d6a0

Merge branch 'feat/loading-button' of https://github.com/mnajdova/mat…

fc1e8ba

…erial-ui into feat/loading-button

docs:api

6b259c8

mnajdova requested a review from eps1lon June 14, 2020 12:12

mbrookes reviewed Jun 14, 2020

View reviewed changes

packages/material-ui-lab/src/BusyButton/BusyButton.js Outdated Show resolved Hide resolved

packages/material-ui-lab/src/BusyButton/BusyButton.js Outdated Show resolved Hide resolved

fixed description

60d7f8b

eps1lon approved these changes Jun 14, 2020

View reviewed changes

oliviertassinari added the PR: ready to ship label Jun 14, 2020

mnajdova added 2 commits June 15, 2020 08:05

renamed BusyButton to LoadingButton

fde687e

docs:api

364b265

mnajdova changed the title ~~[BusyButton] Introduce new component~~ [LoadingButton] Introduce new component Jun 15, 2020

added classes keys

98b6c6c

mnajdova merged commit 7a1262d into mui:next Jun 15, 2020

oliviertassinari mentioned this pull request Jun 27, 2020

[Button] Change LoadingButton prop pending to loading #21593

Closed

oliviertassinari mentioned this pull request Apr 29, 2021

LoadingButton not in lab and not in core #26060

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[LoadingButton] Introduce new component #21389

[LoadingButton] Introduce new component #21389

mnajdova commented Jun 10, 2020 •

edited

mui-pr-bot commented Jun 10, 2020 •

edited

eps1lon left a comment •

edited

oliviertassinari commented Jun 11, 2020

oliviertassinari left a comment

oliviertassinari commented Jun 13, 2020

eps1lon left a comment

mnajdova commented Jun 14, 2020

oliviertassinari commented Jun 14, 2020 •

edited

mnajdova commented Jun 14, 2020

eps1lon left a comment

dianacosma commented Jul 2, 2020 •

edited

oliviertassinari commented Jul 2, 2020

jvvcn commented Jul 21, 2020 •

edited

oliviertassinari commented Jul 21, 2020

[LoadingButton] Introduce new component #21389

[LoadingButton] Introduce new component #21389

Conversation

mnajdova commented Jun 10, 2020 • edited

Benchmark

mui-pr-bot commented Jun 10, 2020 • edited

eps1lon left a comment • edited

Choose a reason for hiding this comment

oliviertassinari commented Jun 11, 2020

oliviertassinari left a comment

Choose a reason for hiding this comment

oliviertassinari commented Jun 13, 2020

eps1lon left a comment

Choose a reason for hiding this comment

mnajdova commented Jun 14, 2020

oliviertassinari commented Jun 14, 2020 • edited

mnajdova commented Jun 14, 2020

eps1lon left a comment

Choose a reason for hiding this comment

dianacosma commented Jul 2, 2020 • edited

oliviertassinari commented Jul 2, 2020

jvvcn commented Jul 21, 2020 • edited

oliviertassinari commented Jul 21, 2020

mnajdova commented Jun 10, 2020 •

edited

mui-pr-bot commented Jun 10, 2020 •

edited

eps1lon left a comment •

edited

oliviertassinari commented Jun 14, 2020 •

edited

dianacosma commented Jul 2, 2020 •

edited

jvvcn commented Jul 21, 2020 •

edited