[material-ui][IconButton] Set default loading to null (#45057)

Author: siriwatknp

docs/pages/material-ui/api/icon-button.json

@@ -19,7 +19,7 @@
       },
       "default": "false"
     },
-    "loading": { "type": { "name": "bool" }, "default": "false" },
+    "loading": { "type": { "name": "bool" }, "default": "null" },
     "loadingIndicator": {
       "type": { "name": "node" },
       "default": "<CircularProgress color=\"inherit\" size={16} />"
@@ -117,6 +117,12 @@
       "description": "Styles applied to the loadingIndicator element.",
       "isGlobal": false
     },
+    {
+      "key": "loadingWrapper",
+      "className": "MuiIconButton-loadingWrapper",
+      "description": "Styles applied to the loadingWrapper element.",
+      "isGlobal": false
+    },
     {
       "key": "root",
       "className": "MuiIconButton-root",

docs/translations/api-docs/icon-button/icon-button.json

@@ -17,7 +17,7 @@
       "description": "If given, uses a negative margin to counteract the padding on one side (this is often helpful for aligning the left or right side of the icon with content above or below, without ruining the border size and shape)."
     },
     "loading": {
-      "description": "If <code>true</code>, the loading indicator is visible and the button is disabled."
+      "description": "If <code>true</code>, the loading indicator is visible and the button is disabled. If <code>true \\| false</code>, the loading wrapper is always rendered before the children to prevent <a href=\"https://github.com/mui/material-ui/issues/27853\">Google Translation Crash</a>."
     },
     "loadingIndicator": {
       "description": "Element placed before the children if the button is in loading state. The node should contain an element with <code>role=&quot;progressbar&quot;</code> with an accessible name. By default, it renders a <code>CircularProgress</code> that is labeled by the button itself."
@@ -89,6 +89,10 @@
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the loadingIndicator element"
     },
+    "loadingWrapper": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the loadingWrapper element"
+    },
     "root": { "description": "Styles applied to the root element." },
     "sizeLarge": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",

packages/mui-material/src/IconButton/IconButton.d.ts

@@ -49,9 +49,10 @@ export interface IconButtonOwnProps {
   edge?: 'start' | 'end' | false;
   /**
    * If `true`, the loading indicator is visible and the button is disabled.
-   * @default false
+   * If `true | false`, the loading wrapper is always rendered before the children to prevent [Google Translation Crash](https://github.com/mui/material-ui/issues/27853).
+   * @default null
    */
-  loading?: boolean;
+  loading?: boolean | null;
   /**
    * Element placed before the children if the button is in loading state.
    * The node should contain an element with `role="progressbar"` with an accessible name.

packages/mui-material/src/IconButton/IconButton.js

@@ -28,6 +28,7 @@ const useUtilityClasses = (ownerState) => {
       `size${capitalize(size)}`,
     ],
     loadingIndicator: ['loadingIndicator'],
+    loadingWrapper: ['loadingWrapper'],
   };
 
   return composeClasses(slots, getIconButtonUtilityClass, classes);
@@ -181,7 +182,7 @@ const IconButton = React.forwardRef(function IconButton(inProps, ref) {
     disableFocusRipple = false,
     size = 'medium',
     id: idProp,
-    loading = false,
+    loading = null,
     loadingIndicator: loadingIndicatorProp,
     ...other
   } = props;
@@ -215,9 +216,14 @@ const IconButton = React.forwardRef(function IconButton(inProps, ref) {
       {...other}
       ownerState={ownerState}
     >
-      <IconButtonLoadingIndicator className={classes.loadingIndicator} ownerState={ownerState}>
-        {loading && loadingIndicator}
-      </IconButtonLoadingIndicator>
+      {typeof loading === 'boolean' && (
+        // use plain HTML span to minimize the runtime overhead
+        <span className={classes.loadingWrapper} style={{ display: 'contents' }}>
+          <IconButtonLoadingIndicator className={classes.loadingIndicator} ownerState={ownerState}>
+            {loading && loadingIndicator}
+          </IconButtonLoadingIndicator>
+        </span>
+      )}
       {children}
     </IconButtonRoot>
   );
@@ -307,7 +313,8 @@ IconButton.propTypes /* remove-proptypes */ = {
   id: PropTypes.string,
   /**
    * If `true`, the loading indicator is visible and the button is disabled.
-   * @default false
+   * If `true | false`, the loading wrapper is always rendered before the children to prevent [Google Translation Crash](https://github.com/mui/material-ui/issues/27853).
+   * @default null
    */
   loading: PropTypes.bool,
   /**

packages/mui-material/src/IconButton/IconButton.test.js

@@ -163,6 +163,14 @@ describe('<IconButton />', () => {
   });
 
   describe('prop: loading', () => {
+    it('does not render the wrapper by default', () => {
+      render(<IconButton />);
+
+      const button = screen.getByRole('button');
+      expect(button).to.have.property('disabled', false);
+      expect(button.firstChild).to.equal(null);
+    });
+
     it('disables the button', () => {
       render(<IconButton loading />);
 

packages/mui-material/src/IconButton/iconButtonClasses.ts

@@ -34,6 +34,8 @@ export interface IconButtonClasses {
   loading: string;
   /** Styles applied to the loadingIndicator element. */
   loadingIndicator: string;
+  /** Styles applied to the loadingWrapper element. */
+  loadingWrapper: string;
 }
 
 export type IconButtonClassKey = keyof IconButtonClasses;
@@ -59,6 +61,7 @@ const iconButtonClasses: IconButtonClasses = generateUtilityClasses('MuiIconButt
   'sizeLarge',
   'loading',
   'loadingIndicator',
+  'loadingWrapper',
 ]);
 
 export default iconButtonClasses;