Expansion panel FOUC when contained in dialog

I’m submitting a…

[x] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
[ ] Other... Please describe:

Current behavior

Expansion panels currently render with a flash of unstyled content (FOUC) when nested in a dialog – they always temporarily appear as expanded, regardless of what the “expanded” attribute is set to. After a moment, all expansion panels that have been explicitly set to closed collapse.

This only occurs in Angular / Material 7.

Expected behavior

Expansion panels should appear as collapsed when the dialog opens when expanded=false instead of briefly appearing as expanded, then collapsing after a delay.

Minimal reproduction of the problem with instructions

Click the button and note the flash of unstyled content in the dialog in Angular 7.

Angular 7 (bugged): https://angular-egzwfw.stackblitz.io Angular 6 (correct): https://angular-eepzxs.stackblitz.io

What is the motivation / use case for changing the behavior?

Flashes of unstyled content are jarring and feel very buggy.

Environment

Angular version: 7.0.1
Material version: 7.0.2
TypeScript: 3.1.1


Browser:
- [x] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [x] Firefox version XX
- [x] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX

[dcrouch79]

Another workaround is to disable all animations until ngAfterViewInit using the [@.disabled] property on a parent element.

https://stackblitz.com/edit/angular-issue13870-workaround

[JoshuaAlzate]

Still persist on Angular Material 10.0.1