Dialog and Menu freeze delay on initial open on MeteorJS platform

[simplecommerce]

• 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: #21578 (comment)

• 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

[alebrahimi]

the same problem here, but it's not only with Dialog or Menu it's happening with any MUI 5 component

[mnajdova]

From the discussions on the links, it seems to me that the issue is related to SSR and how it is configured using MeteorJS. This issue is not happening with nextjs for example.

Take a look on the examples/ssr, especially on the config for the server - you need to inject the styles generated by emotion. This is a vanilla SSR example, so you should be able to easily apply it on your project.

Let me know if this will help.

[simplecommerce]

@mnajdova Thanks for your response, the repo I posted in this issue, is a reproduction using MeteorJS without SSR to demonstrate the same problem.

For the screenshot @alebrahimi posted, I don't know if he has a working repo without SSR that demonstrates his tests also.

Let me know if you need more information.

[alebrahimi]

@simplecommerce this is the repo mateor-mui5-app

this is a very simple Meteor app without SSR

[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.

[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 thysultan/stylis#278 and benjamn/reify#277.

[robwheatley]

I'm having the same performance issues with Meteor and MUI v5.

Interesting to see that Meteor are looking into this as the issue does only seem to come up when using Meteor, so maybe there is something in what the CEO is saying. @simplecommerce where are you seeing the CEO's quotes on the subject?

[simplecommerce]

I'm having the same performance issues with Meteor and MUI v5.

Interesting to see that Meteor are looking into this as the issue does only seem to come up when using Meteor, so maybe there is something in what the CEO is saying. @simplecommerce where are you seeing the CEO's quotes on the subject?

CEO said they will be working on fixing the issue in a few weeks, no updates yet.