Builder.io header component re-renders on Angular route change causing "glimpsing" effect

General
1

I created a header component using Builder.io and added it to my Angular project like this:

<header>
  <builder-component name="header" model="header"></builder-component>
</header>
<main>
  <router-outlet></router-outlet>
</main>
<footer>
  some footer
</footer>

The header looks fine, but it re-renders every time the Angular route changes, causing a “glimpsing” effect.

In addition to this issue, I noticed that the following request is being sent:
https://cdn.builder.io/api/v1/query/07d3955c7b634e16bfaea144ffdd52f2/header-dev:/login-callback

I am looking for a solution to prevent the header component from re-rendering on every route change, as well as understanding if the request mentioned above is expected behavior or if it could be related to the issue.

Any help or suggestions would be greatly appreciated.

2

Hi @infosys.team,

Could you please confirm which Angular version are you using? Also, can you share the builder content link where we can test this re-rendering behaviour?