From my understanding, making a defer that wait a certain timing. Either based on the trigger or the placeholder.

As @Matthieu Riegler explained, the main cause is that my application SSR does not render the same as the client side. Fow now I can't do anything about it.

So here my goal is to make the timing between the answer received from the server and the stability as low as possible.

I found a workaround which was to create my own defer.

In the component where I have a defer I added the following code inside the ngOnInit:

  constructor(
    private appRef: ApplicationRef, 
    private cd: ChangeDetectorRef
  ) {}

  ngOnInit() {

    this.appRef.isStable.pipe( first((isStable) => isStable) ).subscribe((isStable) => {
      setTimeout(() => {
        this.shouldShow = true;
        this.cd.markForCheck();
      },10000);
    });

  }

This is waiting for the application to be stable, once it is, it start a timer (in the example 10seconds), and then change the boolean that is used inside the html as a condition to show the elements.

<app-child /> 


@if(shouldShow){
 defered components
}@else{
  placeholder
}

It's not perfect since it's still doing the same, but the delay between is smaller as this is not waiting for the defered components to be rendered.