Screen is distorted onload for few seconds and then loads properly

[SowjanyaKrishnamurthy]

Hi Team,

I see the screen is distorted for 3-5seconds on load which looks ugly for the user when they are using application. The styling of all buttons are not rendered until the content is initialized. Could you please provide solution for this.

I have attached the screenshot for the same.

Thanks in advance!!

[Akshat55]

Hmmm if I remember correctly, this is caused by user not setting theme in root of the project.

@use "@carbon/styles/scss/config" with (
	// Use flexbox for grid - stick to CSS Grid or Flexbox
	// CSS Grid has become the default grid system in v11
	$use-flexbox-grid: true
);

@use "@carbon/styles";

html {
	@include styles.theme(styles.$white);
}

[SowjanyaKrishnamurthy]

Hi @Akshat55,

Here is my styles.scss file where I have configured mentioned settings on carbon

**@use "@carbon/styles/scss/config" with ( // Use flexbox for grid - stick to CSS Grid or Flexbox
// CSS Grid has become the default grid system in v11
$use-flexbox-grid: true);

@use "@carbon/styles";
@use "@carbon/styles/scss/type";
@import '../node_modules/@carbon/type/scss/styles';
@import '../node_modules/@carbon/styles/scss/type/index';
@import './carbon-styles.scss';

html {
@include styles.theme(styles.$white);
}**

Even after this, the screen looks same as in screenshot. Could you please help me if I am missing anything .

[Akshat55]

@import '../node_modules/@carbon/type/scss/styles';
@import '../node_modules/@carbon/styles/scss/type/index';

Can be changed too:

@use '@carbon/styles/scss/type';

I'm not really sure, I can't really debug this without replicating this.

I suggest you try updating to latest @carbon/styles and CCA versions. I recommend you look into our carbon-angular-starter.