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

Question

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 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.

Tried to look in to the docs of builder.io

Answer 1

The builderio angular documentation does not really mention this but digging in their github there are a couple of inputs on the builder-component called reloadOnRoute and handleRouting

<builder-component
  model="yourmodel"
  [reloadOnRoute]="false"
  [handleRouting]="false"
>

You can try playing with those. They take boolean values