angular universal + @angular/flex-layout cannot work well on first rendering

Question

I am on a ssr project with angular universal , and use flex-layout to handle media css issuses.

I found this issuse , and imported FlexLayoutServerModule into my app-server-module as it suggest. it worked but not perfect. the screen is gonna be like reflow after flashing as width comes from whatever 900px to the normal width which is a bad experience. this is the first paint of my app enter image description here

and this is the pic of 2s after after ssr, the client side rendering which is normal enter image description here

I expect the first paint could be the final result.

here is my code of customized BREAKPOINTS

 function updateBreakpoints(bp: BreakPoint) {
  switch (bp.alias) {
    case 'sm':
      bp.mediaQuery = 'screen and (min-width: 0px) and (max-width: 1165.98px)';
      break;
    case 'md':
      bp.mediaQuery = 'screen and (min-width: 1166px) and (max-width: 1439.98px)';
      break;
    case 'lg':
      bp.mediaQuery = 'screen and (min-width: 1440px) and (max-width: 4999.98px)';
      break;
  }
  return bp;
}

@NgModule({
  imports: [FlexLayoutModule],
  exports: [FlexLayoutModule],
  providers: [
    // register a Custom BREAKPOINT Provider
    {
      provide: BREAKPOINTS,
      useFactory: function customizeBreakPoints() {
        return DEFAULT_BREAKPOINTS.map(updateBreakpoints);
      }
    }
  ]
})
export class CustomBreakpointsModule {}

here is my code of app-server-module

@NgModule({
  imports: [AppModule, ServerModule, ServerTransferStateModule, FlexLayoutServerModule, CookieBackendModule.forRoot()],
  bootstrap: [AppComponent]
})
export class AppServerModule {}

what should I do? appreciate for your help