Phaser 3 aspect ratio for text

Phaser 3
1

I have a preload state which loads some assets. I decided to add this in the preload function.

var width = this.cameras.main.width;
var height = this.cameras.main.height;

var loadingText = this.make.text({
            x: width / 2,
            y: height / 2 - 50,
            text: 'Loading...',
            style: {
                font: '20px monospace',
                fill: '#ffffff'
            }
        });
        loadingText.setOrigin(0.5, 0.5);

Now, if the user changes orientation for the game, what happens is the above text happens to be at a very wrong place. looks like it’s not changing place depending on new width and height.

The same problem was happening for the game, so this is what i did:

this.game.scale.on('orientationchange', (e: string) => {
            switch(e) {
                case 'portrait-primary':
                    this.game.scale.displaySize.aspectRatio = GAME_HEIGHT/GAME_WIDTH;
                    this.game.scale.setGameSize(GAME_HEIGHT,GAME_WIDTH);
                    break;
                case 'landscape-primary':
                    this.game.scale.displaySize.aspectRatio = GAME_WIDTH/GAME_HEIGHT;
                    this.game.scale.setGameSize(GAME_WIDTH,GAME_HEIGHT);
                    break;
                default:  
            }
        })

but this solved the issue. now, i can play the game in portrait or landscape mode which seems to be fine. but now, I want to solve the text issue . should I scale it or change x,y again after changing the orientation?