[Joy][CircularProgress] Prevent new styles from being generated when …

…`value` changes (#34897)
mui · Oct 28, 2022 · 95f247e · 95f247e
1 parent 7ec53f0
commit 95f247e
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 5 deletions.
diff --git a/packages/mui-joy/src/CircularProgress/CircularProgress.tsx b/packages/mui-joy/src/CircularProgress/CircularProgress.tsx
@@ -1,18 +1,18 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
 import { useSlotProps } from '@mui/base/utils';
-import { keyframes, css } from '@mui/system';
+import { css, keyframes } from '@mui/system';
 import { OverridableComponent } from '@mui/types';
 import { unstable_capitalize as capitalize } from '@mui/utils';
+import clsx from 'clsx';
+import PropTypes from 'prop-types';
+import * as React from 'react';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import { getCircularProgressUtilityClass } from './circularProgressClasses';
 import {
+  CircularProgressOwnerState,
   CircularProgressProps,
   CircularProgressTypeMap,
-  CircularProgressOwnerState,
 } from './CircularProgressProps';
 
 const circulate = keyframes({
@@ -224,6 +224,12 @@ const CircularProgress = React.forwardRef(function CircularProgress(inProps, ref
       ref,
       as: component,
       role: 'progressbar',
+      style: {
+        // Setting this CSS varaible via inline-style
+        // prevents the generation of new CSS every time
+        // `value` prop updates
+        '--CircularProgress-percent': value,
+      },
     },
     className: clsx(classes.root, className),
     ...(value &&

diff --git a/packages/mui-joy/src/LinearProgress/LinearProgress.tsx b/packages/mui-joy/src/LinearProgress/LinearProgress.tsx
@@ -180,6 +180,9 @@ const LinearProgress = React.forwardRef(function LinearProgress(inProps, ref) {
       as: component,
       role: 'progressbar',
       style: {
+        // Setting this CSS varaible via inline-style
+        // prevents the generation of new CSS every time
+        // `value` prop updates
         '--LinearProgress-percent': value,
       },
     },