Dialog and Menu freeze delay on initial open on MeteorJS platform

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

On my MeteorJS app, when I click on a button to open a Dialog or Menu, there is a freeze delay for the first time. Any subsequent clicks to the button, will open the Dialog and Menu quickly.

If I refresh and do the same test again, the freeze delay is there.

I have tested in Edge, Chrome and Firefox and the issue is present on all of them.

In my current project, the delay can take up to 5 secs.

I do not have this issue on v4 only on v5.

I have also opened a discussion on Meteor Forums here: https://forums.meteor.com/t/material-ui-v5-dialogs-and-menus-initial-open-lags-freezes/56842/10

There was also a comment added on this issue referring to my discussion here: https://github.com/mui-org/material-ui/issues/21578#issuecomment-945068830

• But my Modal tests seems to indicate that it isn’t related, unless I am mistaken.

Expected Behavior 🤔

The behavior should be the same as on the demo sandbox on your docs, there should be no delay when clicking to open the Dialog or Menu the first time.

Steps to Reproduce 🕹

Here is a Meteor repo reproducing the error: https://github.com/simplecommerce/mui5-meteor-simple-todo

Steps:

1. Clone the repo locally.
2. Make sure Meteor is installed: https://www.meteor.com/developers/install
3. Go in the project folder and npm install.
4. Execute meteor run. It will run on port 3000.

When running visit the app site and then click on Open Form Dialog or Dashboard. You will notice a small delay before it opens. Click again on those buttons and you will no longer see a delay. Hit refresh and try again and the initial open will always have a delay.

I have added the demo for the Basic Modal and Transitions Modal, these are fine, they are quick on initial open every time. So it seems to only be the Dialog and Menu so far, I have not yet tested any other components.

Your Environment 🌎

`npx @mui/envinfo`

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

  System:
    OS: Linux 4.15 Ubuntu 18.04.1 LTS (Bionic Beaver)
  Binaries:
    Node: 12.15.0 - /usr/local/bin/node
    Yarn: Not Found
    npm: 7.22.0 - /usr/local/bin/npm
  Browsers:
    Edge: 94.0.992.50 (latest)
    Chrome: 94.0.4606.81 (latest)
    Firefox: 93.0 (latest)
  npmPackages:
    @emotion/react: ^11.5.0 => 11.5.0
    @emotion/styled: ^11.3.0 => 11.3.0
    @mui/core:  5.0.0-alpha.51
    @mui/material: ^5.0.4 => 5.0.4
    @mui/private-theming:  5.0.1
    @mui/styled-engine:  5.0.1
    @mui/system:  5.0.4
    @mui/types:  7.0.0
    @mui/utils:  5.0.1
    @types/react:  17.0.30
    react: ^17.0.2 => 17.0.2
    react-dom: ^17.0.2 => 17.0.2

[quintstoffers]

I don’t believe this is a Material UI issue, instead it seems to be caused by (very) frequently updated exported variables in stylis in combination with reify.

See https://github.com/thysultan/stylis.js/issues/278 and https://github.com/benjamn/reify/issues/277.

[simplecommerce]

Here is a comment from MeteorJS’s CEO about the issue

I did a quick profile here and it seems they (mui) are somehow deferring the evaluating of modules, I didn’t check their code but in the profile I see the runSetters calls running later so I think they are using something to avoid importing all the modules in the first load.

It seems something started by insertStyles function.

Hope this can help pinpoint the issue.

Update

Another response from the CEO after more investigation from another user to pinpoint the cause of the problem.

We are going to start trying to fix this issue in a few weeks.