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>`;
}
5
  • 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.
    – dikuw
    May 8, 2018 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, 2018 at 14:56
  • Yes if (!this.renderedOnce) { or if (this.renderedOnce === false) { Did it help?
    – dikuw
    May 8, 2018 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, 2018 at 15:04
  • 1
    sweet I'll add it as an answer
    – dikuw
    May 8, 2018 at 15:09

1 Answer 1

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 and acknowledge you have read our privacy policy.

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