Fixing flashing huge Font Awesome icons on a Gatsby static site
I recently built a personal website using Gatsby, and I included a few Font Awesome icons on the front page (see the Github/Linkedin/Medium icons).
The problem was that during page loading on production, there would be a momentary flash of huge Font Awesome icons across the page, before some CSS rules kicked in and resized them to their proper sizes.
Psst: if you want the tldr fix, scroll right down to the bottom. In the next section, I’ll briefly document my thought process in investigating this issue.
Investigation
From my very limited experience (this is actually my first time using Gatsby!) with static websites built by generators such as Gatsby, I suspected that this delay was caused by the loading of external stylesheets. Network requests are slow, so until the external resource has finished downloading, the huge (unstyled) icon will be shown (assuming that is its default appearance).
To confirm my suspicions, I used the dev tools to inspect the element’s styling.
Huh, that’s weird — Inspector is reporting that the source of the width: 1em; and height: 1em; rules (which control the size of the icon) are inline. If you are familiar with CSS, inline styles are embedded inside of the HTML document itself. That means that there is no separate network request to download the stylesheet. Am I wrong?
Well, no. I investigated further by viewing the page source of the website. If the styles are “truly inline”, they would be present in the page source (i.e. bundled together with the HTML). However, I couldn’t find these supposedly “inline” rules in the page source. Yet, Inspector clearly states that they are inline rules, and I could confirm this by searching for the rules on the left pane.
So, here’s what actually happened. These rules are not bundled with the HTML document. Instead, they are downloaded through a separate network request and then inserted into the document using Javascript. It’s essentially DOM manipulation, which is how React (which underlies Gatsby) works. Only this time, instead of manipulating UI elements like <div>, it is inserting a <style> element. Essentially, the styles are downloaded externally and inserted into the document through DOM manipulation.
Fix
To fix this, we simply need the style rules to be “truly inline” — that is, they should be bundled with the original HTML document such that they are already active on render. I found a relevant Github issue for Next.js (thanks corysimmons).
Here’s my bugfix commit, and here’s the relevant lines of code:
import { config } from "@fortawesome/fontawesome-svg-core"
import "@fortawesome/fontawesome-svg-core/styles.css"config.autoAddCss = false
The first and third line disables the logic to insert Font Awesome’s base CSS styles into the document (the logic that causes the flashing huge icons). The second line directly imports these base styles, which causes Gatsby’s build process to bundle them with the generated HTML document, resulting in “truly inline” styles.
