Goal: I want Fade's transition to happen after a certain time has passed (ex: 4000 milliseconds).

Here is a fragment of my code:

<Fade in timeout={{ enter: 8000 }}>
  <Box display="flex" justifyContent="center">
    <IconButton href="https://soundcloud.com/jyillamusic">
      <Soundcloud />
    </IconButton>
    <IconButton href="https://www.instagram.com/justinyum98/">
      <Instagram />
    </IconButton>
  </Box>
</Fade>

Expected result: With enter: 8000, I expect the transition to happen after 8000 milliseconds.

Actual result: The transition starts at 0 milliseconds, finishes after 8000 milliseconds.

Does Fade support delaying the Fade transition by some specified time?

(Looking at Fade's API, I assumed that duration.enteringScreen meant that it was the amount of milliseconds before the transition occurs, but I'm probably mistaken.)

Fade does not implement a delay feature, however you can manually handle your transition status using in.

in

Show the component; triggers the enter or exit states
type: boolean
default: false

In code you could do :

<Fade in={this.state.in} timeout={{ enter: 8000 }}>
  <Box display="flex" justifyContent="center">
    <IconButton href="https://soundcloud.com/jyillamusic">
      <Soundcloud />
    </IconButton>
    <IconButton href="https://www.instagram.com/justinyum98/">
      <Instagram />
    </IconButton>
  </Box>
</Fade>

And on display run a timeout to wait and create the delay

this.state = {
    in: false
};

setTimeout(() => {
    setState({ in: true });
}, 8000);