The CircleProgress has strange border, disappeared few seconds latter

[HdSeKenny]

Steps to reproduce

import { Modal, Box, CircularProgress } from '@mui/material'

const style = {
  position: 'absolute',
  top: '50%',
  left: '50%',
  transform: 'translate(-50%, -50%)',
  width: 400,
  textAlign: 'center',
  border: 'none',
}

const progessStyle = {
  color: '#fff',
}

export default function PageLoading({ show }: { show: boolean }) {
  // if (!show) return null

  return (
    <Modal
      open={true}
      onClose={() => {}}
      aria-labelledby="modal-modal-title"
      aria-describedby="modal-modal-description"
    >
      <Box sx={style}>
        <CircularProgress enableTrackSlot size="3rem" sx={progessStyle} />
      </Box>
    </Modal>
  )
}

Current behavior

Jietu20251117-213434-HD.mp4

Your environment

"@emotion/react": "^11.14.0",
"@emotion/styled": "^11.14.1",
"@mui/icons-material": "^7.3.5",
"@mui/joy": "^5.0.0-beta.52",
"@mui/material": "^7.3.5"

Search keywords: CircleProgress

[HdSeKenny]

It appears and disappears intermittently. The line is not visible in the page structure.

Jietu20251117-213952-HD.mp4

[mj12albert]

@HdSeKenny Could you provide a Codesandbox/Stackblitz?

BTW "@mui/joy": "^5.0.0-beta.52" not sure if this may conflict with Material UI? We're not focusing on @mui/joy at the moment