Inline emoji (FAIcon) size is changing during page loading, breaks links with anchors

[Salamandar]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• I'm using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io.
• I have read the console error message carefully (if applicable).

Description

See the title. FontAwesome icons are huge at first during page loading and then the proper size.

Reproducible demo

https://codesandbox.io/p/devbox/romantic-wildflower-tlnm8f

Steps to reproduce

• Add FontAwesome
• Use an FAIcon inline
• Load the page

Expected behavior

Size being fine during page loading.

The CSS being inline at the beginning of the html page, I would expect this to be true.

Actual behavior

Icon changes size during loading

Your environment

• Public source code: https://github.com/yunohost/doc
• Public site URL: http://localhost:3000/fr/admin/get_started/install_on/arm_board
• Docusaurus version used: 3.9.2
• Environment name and version (e.g. Chrome 89, Node.js 16.4): Firefox (but bug present on chrome too)
• Operating system and version (e.g. Ubuntu 20.04.2 LTS):

Self-service

• I'd be willing to fix this bug myself.

[slorber]

This cannot be considered a bug in Docusaurus, and is more of an integration problem.

The problem is described here: https://docs.fontawesome.com/v5/web/other-topics/server-side-rendering

Docusaurus is a static site generator, which is a subset of "server side rendering" except the server happens to be your CI build process.

FontAwesome SVG seems to use a behavior similar to "runtime CSS-in-JS" libraries, where the required CSS is injected into the page using client-side JS.

These libraries have historically been more painful to integrate with SSG/SSR sites because to avoid such annoying effects, the CSS the lib generates needs to be served alongside the initial HTML page load (sometimes inlined in it). They usually provide APIs to collect the required CSS as part of the build, but it becomes your responsibility to integrate this lib properly with the framework you use so that the required CSS is served at the right time.

Related to #3236

TLDR: I do not recommend using such a lib with Docusaurus. This "lazy CSS injection using JS" behavior is not really the state of the art anymore, and most devs usually avoid runtime CSS-in-JS libraries in favor of libraries that can extract the required CSS file statically, ahead of time, without having to run the code (for example, Tailwind, StyleX...).

If you really want to use this library, you'd have to either:

• delay the appearance of the icons to avoid that annoying visual effect
• figure out how to provide the required CSS directly in or alongside the static pages Docusaurus builds. This probably requires creating a Docusaurus plugin.