[ngStyle] brief flash of unchanged font size

Hey guys,

item-detail.html:

<h1 id="item_title"  *ngIf="hasProperty('name')" [ngStyle]="{'font-size': font_size}" innerHTML="{{item.name}}"></h1>

item-detail.ts:

font_size: any;

async ionViewWillEnter() {
    await getFontSize(this.settings).then((result) => {
      this.font_size = result;
    });
  }

getFontSize function in app.module.ts

export function getFontSize(settings: Settings): Promise<any> {
  return new Promise((resolve, reject) => {
    settings.getValue('font_size').then((res) => {
      let fontSize = res + 'rem';
      resolve(fontSize);
    }).catch((err) => {
      reject(new Error('failed to retrieve font size'));
    })
  })
}

So the problem is: When I change the font size in my settings page, and re-enter the item-detail page then I have a brief flash of old font_size before it is actually correctly set to newly changed size.
Any ideas?
Thanks in advance for the help.
Kind regards,
Filip

EDIT: I’m attaching GIF of said behavior.

Anyone could evaluate on the issue?

Still haven’t been able to locate the issue, could anyone see and give their input on the case?

Thank you in advance

Alright, seems like I know now, that ionViewWillEnter() cant actually await for getFontSize promise, because ionViewWillEnter is of type void. Furthermore, trying to use ionViewCanEnter which is of type boolean | Promise would work well, but I have tabs implemented in my application, and switching between two tabs triggers ionViewCanEnter only once per page.