help(MatDialog): Slow opening and closing of any dialog even though browser is idle

[JanMalch]

trafficstars

What are you trying to do?

When opening and closing any MatDialog I can observe the following behaviours sometimes. It doesn't happen every time, but often enough. There's no noticeable pattern / precondition.

---

When opening the dialog the content appears blank for ~5 seconds. Actually the component is rendered but only partially, e.g. the mat-form-field and the input is there, but not the mat-label. Same with some attributes and other parts like mat-dialog-title, which is there but has no content yet. The content is just a simple text from a pure pipe. I've checked this by quickly getting the outerHTML of the overlay-container during and after the blank phase.

Then after those ~5 seconds everything is displayed and working. You can also see that the blank dialog starts the close animation before the proper dialog is shown. But in both cases they have the same overlay id.

---

When hitting the close button the dialog takes a few seconds before closing. You can keep clicking the close button and the ripple effect will appear, so the browser is not freezing because of some heavy computation. This is also seen in the profiler. In fact the browser is mostly idle in this time.

What troubleshooting steps have you tried?

• Use the most simple component in the dialog → no difference :x:
• Use NoopAnimationsModule → no difference :x:
• Use ChangeDetection.OnPush → no difference :x:
• It's happening in both prod and dev builds → no difference :x:
• Use autoFocus: false → no difference :x:
• Update to ng14 → no difference :x:
• Analyze with Chrome's Performance profiler. The browser is actually mostly idle during this time, so there's nothing to be found. :x:

Reproduction

Unable to reproduce it in an isolated environment and I can't share the existing project.

Environment

• Angular: latest 13 / latest 14
• CDK/Material: latest 13 / latest 14
• Browser(s): Chrome 102
• Operating System (e.g. Windows, macOS, Ubuntu): Windows, macOS

[vmuresanu]

Do you have any errors in the console? The fact that input renders but not mat-label is very likely because of some errors or warnings.

[JanMalch]

No, nothing in the console. And like I said after a while everything is there and works completely fine.

[kevincaradant]

Hi Did you find a solution guys ? Since I'm on Angular 14, I have less issues during 'opening' modals but still have this issue on 'closing' modals. Sometimes after a while it's also OK but I didn't find a real cause to this. I got also the same 'IDLE time' in the performance view of Chrome like @JanMalch I didn't have any errors or warning

[JanMalch]

No @kevincaradant. We also tried messing with zone.js, but there was no satisfying solution for us.

[Futhark]

@JanMalch do you use ngrxLet in you code? One of my team members found out that there is some issue with @ngrx/[email protected] package regarding animations for material components

[JanMalch]

Thanks for the info @Futhark, but unfortunately not the case for us.

[amysorto]

It's hard to debug without a reproduction for something that happens occasionally. Is this still happening with the MDC dialog @JanMalch?

[JanMalch]

I'm not on that project anymore so unfortunately I can't tell. @amysorto The app made heavy use of SVG in the background. But iirc memory wasn't an issue either.

[amysorto]

I am going to close this issue since I can't debug this without more information and context. @kevincaradant If you have a working reproduction that I can take a look at, please reopen this issue.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}