Material-UI v5 | Dialogs and Menus initial open lags/freezes

help
1

Hi,

I don’t know if anyone has the same issue or has noticed it, but when I install Material-UI v5 on my Meteor app and copy the example/sample of the Dialog or Menu, on the initial click I get a delay before it actually opens, it sort of hangs.

I created a small repo to demonstrate the issue here: GitHub - simplecommerce/material-ui-5-meteor

Clone the repo and run it.
Click on one of the two buttons and look at the delay before it opens.
Without doing a refresh, click again and you should see its almost instant afterwards.
Now hit refresh and click on it again and you should see it reoccur.

I created this repo because in my actual project, it take around 5 secs for the Dialog or Menu to open up.

I have no idea why that is, I have tried to look at it but couldn’t figure it out. At first I thought it might be my project code, but with my blank repo it actually has the same issue.

I am using latest version of Meteor, and it seems to occur in earlier versions too.

Here is a screen video demo of my bigger project showing the delay.

Any help is appreciated.

2 Likes
2

Could you put it in a CodeSandbox by any chance?

3

For me, it happens the same behavior for the Account menu.

4

I downloaded the github repo, ran it, and duplicated the anomaly. I do not yet see why it’s taking so long for the FormDialog to load the first time it is called.

I see you are using the exact same dialog code that’s on the MUI demo page. And the dialog loads very quickly there.

I have not seen slow load times for MUI components in my Meteor app.

This is a React/MUI issue, so Meteor should not be contributing to the anomaly.

5

I can also confirm this for Dialog. Probably related to this: [Modal] Marking large trees as aria-hidden causes slowdown in Chrome on Android · Issue #21578 · mui-org/material-ui · GitHub

6

Thanks for testing it, the issue also occurs on Firefox on my end, so it doesn’t seem isolated to Chrome browsers though.

7

I will try to reproduce it without Meteor, but if I can’t doesn’t that mean that there could be something in MUI’s latest version packages that could be conflicting maybe? It is very odd though.

At first I thought it could be some of the packages I was using in my project, but I kept it light in the repo to test it.

8

Ok so I just created another repo this time using nextjs and I am not able to reproduce the issue on this repo: GitHub - simplecommerce/material-ui-5-nextjs

I followed the template here: Setup - Create a Next.js App | Learn Next.js

And I just installed MUI with my two test dialog and menu and it seems fast here.

And to remove doubts, I also tried creating a new simple to do app react with meteor using the tutorial and just copied my dialog and menu and the same issue occurs when on meteor.

9

There may be something relevant in this code:

Meteor.startup(() => {
  onPageLoad(() => hydrate(<ApolloProvider client={client}><App /></ApolloProvider>, document.getElementById('react-target')));
});

I haven’t yet used SSR or hydrate – I’m using this approach:

    const rootNode = document.getElementById('app');
    ReactDOM.render(<App/>, rootNode);
10

I forgot to add yesterday, I tested with the simple to do tutorial without SSR and I get the same issue, repo is here: GitHub - simplecommerce/mui5-meteor-simple-todo

Also wanted to add, it only seems to do this with MUI v5 since my current project is on v4 and I have no issues with it, so it really is weird.

I don’t know if I should open an issue in Meteor or MUI github?

11

If you do, please link this as well: [Modal] Marking large trees as aria-hidden causes slowdown in Chrome on Android · Issue #21578 · mui-org/material-ui · GitHub and if not too much trouble, thumb it up as well.

1 Like
12

I updated the simple to do repo, I added a test with the Modal component, and that one seems to open quickly on the initial load, so it seems to only affect the Dialog and Menu components, no idea if any others are affected since I haven’t gotten to test them yet.

13

I opened up an issue on MUI here for reference: Dialog and Menu freeze delay on initial open on MeteorJS platform · Issue #29131 · mui-org/material-ui (github.com)

2 Likes
14

Are anyone running MUI v5 with Meteor without experiencing drastically slow first renders?

I have an older project with MUI v4 that’s working just fine, but in a new project with v5 everything is slow on the first render, even clicking a button will hang the application for secounds before continuing. After the first initial hang everything starts behaving as normal. The same issue occures everytime I open a modal without using the keepMounted prop wchich I guess is because a new component gets rendered for the first time.

It does not look like other frameworks are experiencing the same issue so I am wondering if someone with a greater knowlage of the Meteor internals might be able to find out why this is happening specifically in Meteor projects.

2 Likes
15

I am experiencing the same on my end, I opened an issue on MUI’s github, waiting on their findings. Another dev also posted a repo that demonstrated the issue is with all components which I did not notice. I haven’t opened an issue in Meteor’s github yet since its MUI’s package. Hopefully we’ll get answers soon, unless someone here or reading can figure out what the issue is or where it comes from to help speed up getting this fixed.

16

@kheang @zayco How are you guys importing the component?

There’s a difference when you import an MUI component like this:

import { TextField } from '@mui/material';

Instead of:

import TextField from '@mui/material/TextField';

When you import like in the first example, the whole MUI library will be downloaded to the client instead of just the component on the first load. After that the code stays kind of cached, that’s why the second load is faster.

This is just a hunch but it could be the problem.

17

In my repo I am using the demo from their documentation which uses the 2nd way you described.

18

Thanks for the tip. I am using the second type of import

19

@denyhs comment would make more sense before Meteor 2.4.

If you are using Meteor 2.4 the difference from importing everything shouldn’t be that bad (of course you could avoid it), specially in development.

It seems that you are not sure if this is a Meteor issue or a Material UI issue, right?

Could you use the Performance tab in Chrome Dev Tools to see which modules are being executed when the app is slow, so you would know better if maybe this is Meteor parsing the files or the library itself.

20

@filipenevola Not sure if this helps but another user has commented on my post on MUI’s github with a screenshot of his profiler tab that shows a delay on initial load: Dialog and Menu freeze delay on initial open on MeteorJS platform · Issue #29131 · mui-org/material-ui · GitHub

I haven’t tested the latest Meteor update yet, but as previously mentioned, we are using the demo with the correct imports directly for MUI’s documentation so that part should be ok.

I am not an expert with performance/profiling, I will try to test it in a bit.
If anyone else is more familiar and can do the test, I welcome it.

Thanks for your reply!