bug(BreakpointObserver): BreakpointObserver is either not performant enough or implementation is problematic

[omerman]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

When using BreakpointObserver to set behaviors(props/style) to components it will often flicker on first reload especially once the window loads for the first time / when using ssr.

It is clear that using media queries for example will look perfect vs using BreakpointObserver to achieve the same things.

Is there a plan to deal with that?

Thank you so much

(If it looks like Im coming too strong, it's because it is frustrating, but really I do appreciate the hard work given on this framework)

Reproduction

1. generate this example on an angular project ng generate @angular/material:navigation <component-name>
2. open browser with 400px size(width)
3. refresh the example

Expected Behavior

If you hide/show the relevant components using media query, it will just work. no flicker.

I would expect it to just work smoothly, and if it's a caveat I would expect some sort of implemented behavior/way to help us overcome this.

Actual Behavior

You will see the component of the sidenav flicker for a second.
Also the simple nav button will flicker

Environment

• Angular: latest
• CDK/Material: latest
• Browser(s): chrome latest
• Operating System (e.g. Windows, macOS, Ubuntu): mac

[wagnermaciel]

@omerman I was unable to reproduce this on my local machine. Does this only happen with SSR? Could you provide a stackblitz reproduction of the issue?

[omerman]

It happened to me with SSR, yes.
Regarding the reproduction you can check angulars example
ng generate @angular/material:navigation

And add the express universal adapter for SSR and you'll see it 😅