0

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>`;
}
  • 1
    Not sure if this is related to your problem, but you don't want to load the css every time the web part is rendered. Use if !(!this.renderedOnce) { SPComponentLoader.loadCss('https://use.fontawesome.com/releases/v5.0.6/css/all.css'); } to load only the first time. – Michael May 8 '18 at 14:16
  • I'm guessing the first ! was a typo (received a error message in VS code while it was present)? – vanblart May 8 '18 at 14:56
  • Yes if (!this.renderedOnce) { or if (this.renderedOnce === false) { Did it help? – Michael May 8 '18 at 15:02
  • It appears to have solved the problem on my machine. I've sent it to another user that was encountering the problem to see if it corrected the problem for them also. – vanblart May 8 '18 at 15:04
  • 1
    sweet I'll add it as an answer – Michael May 8 '18 at 15:09
2

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>`;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.