SPFX Webpart stalls Chrome?

Question

I have the below code being used in a SPFX webpart that I created which displays Social Media icons and a company name. Everything works fine, but when using Chrome if the webpart attempts to load while not being visible on the user's screen, they get a "Loading spfx-social-links" overlay on the screen which prevents them from interacting with SharePoint.

If they scroll down the screen to where the webpart is located, it finishes loading properly and they are then able to interact with SharePoint.

Is there something missing from my code that can prevent this issue from occurring? This webpart was created with the intent of being at the bottom of the page similar to this site's Blog, FaceBook, Twitter, and LinkedIn links.

public render(): void {

SPComponentLoader.loadCss('https://use.fontawesome.com/releases/v5.0.6/css/all.css');
var fbVar = (this.properties.showFb) ? styles.show: styles.hide;
var tVar = (this.properties.showTwitter) ? styles.show: styles.hide;
var inVar = (this.properties.showInstagram) ? styles.show: styles.hide;
var ytVar = (this.properties.showYt) ? styles.show: styles.hide;
var liVar = (this.properties.showLi) ? styles.show: styles.hide;

this.domElement.innerHTML = `
<div class="${ styles.sizing }" style="text-align: ${ escape(this.properties.headAlign) }">
  <div class="${styles.company}" style="color:${escape(this.properties.compColor)}">
    ${ escape(this.properties.description) }
  </div>
</div>

<div class="${ styles.sizing }" style="text-align: ${ escape(this.properties.headAlign) }">
  <a class="fab fa-facebook-square ${ styles.faCustom } ${ styles.facebook } ${ fbVar }" href="${escape(this.properties.fbLink)}">&nbsp;</a>
  <a class="fab fa-twitter ${ styles.faCustom } ${ styles.twitter } ${ tVar }" href="${escape(this.properties.twitterLink)}">&nbsp;</a>
  <a class="fab fa-linkedin ${ styles.faCustom } ${ styles.linkedin } ${ liVar }" href="${escape(this.properties.linkedinLink)}"></a>
  <a class="fab fa-youtube ${ styles.faCustom } ${ styles.youtube } ${ ytVar }" href="${escape(this.properties.instagramLink)}"></a>
  <a class="fab fa-instagram ${ styles.faCustom } ${ styles.instagram } ${ inVar }" href="${escape(this.properties.instagramLink)}"></a>
</div>`;
}

Answer 1

Pull the loadCss function out of the render() call or call it only the first time using this.renderedOnce, e.g.:

public render(): void {

if (this.renderedOnce === false) {
  CPComponentLoader.loadCss('https://use.fontawesome.com/releases/v5.0.6/css/all.cs');
}
var fbVar = (this.properties.showFb) ? styles.show: styles.hide;
var tVar = (this.properties.showTwitter) ? styles.show: styles.hide;
var inVar = (this.properties.showInstagram) ? styles.show: styles.hide;
var ytVar = (this.properties.showYt) ? styles.show: styles.hide;
var liVar = (this.properties.showLi) ? styles.show: styles.hide;

this.domElement.innerHTML = `
<div class="${ styles.sizing }" style="text-align: ${ escape(this.properties.headAlign) }">
  <div class="${styles.company}" style="color:${escape(this.properties.compColor)}">
    ${ escape(this.properties.description) }
  </div>
</div>

<div class="${ styles.sizing }" style="text-align: ${ escape(this.properties.headAlign) }">
  <a class="fab fa-facebook-square ${ styles.faCustom } ${ styles.facebook } ${ fbVar }" href="${escape(this.properties.fbLink)}">&nbsp;</a>
  <a class="fab fa-twitter ${ styles.faCustom } ${ styles.twitter } ${ tVar }" href="${escape(this.properties.twitterLink)}">&nbsp;</a>
  <a class="fab fa-linkedin ${ styles.faCustom } ${ styles.linkedin } ${ liVar }" href="${escape(this.properties.linkedinLink)}"></a>
  <a class="fab fa-youtube ${ styles.faCustom } ${ styles.youtube } ${ ytVar }" href="${escape(this.properties.instagramLink)}"></a>
  <a class="fab fa-instagram ${ styles.faCustom } ${ styles.instagram } ${ inVar }" href="${escape(this.properties.instagramLink)}"></a>
</div>`;
}