From 0b3596e811353360f75117cc2b8396e5368c6eb9 Mon Sep 17 00:00:00 2001
From: David LJ <mail@davidlj95.com>
Date: Fri, 29 Sep 2023 13:47:40 +0200
Subject: [PATCH] perf: set FontAwesome icons size always static

so they're shown when using SSR as early as possible
remove from NoJS only and use always to improve SSR shifts too
explain it
---
 src/index.html              |  5 -----
 src/sass/_font-awesome.scss | 12 ++++++++++++
 src/styles.scss             |  4 ++++
 3 files changed, 16 insertions(+), 5 deletions(-)
 create mode 100644 src/sass/_font-awesome.scss

diff --git a/src/index.html b/src/index.html
index 0bb4399a..0605aab3 100644
--- a/src/index.html
+++ b/src/index.html
@@ -108,11 +108,6 @@
           top: 100px;
           min-height: calc(100% - 100px) !important;
         }
-
-        fa-icon > svg {
-          /* Otherwise, doesn't display when JavaScript is disabled */
-          height: 100%;
-        }
       </style>
     </noscript>
   </head>
diff --git a/src/sass/_font-awesome.scss b/src/sass/_font-awesome.scss
new file mode 100644
index 00000000..a218a591
--- /dev/null
+++ b/src/sass/_font-awesome.scss
@@ -0,0 +1,12 @@
+// When JavaScript is disabled and page is pre-rendered with SSR Font Awesome icons seemed to be there in the DOM,
+// but without their size set.
+//
+// Seems size is set dynamically by Font Awesome library. With this trick, we make icons always appear by setting its
+// size. Which also helps with SSR, given there are less layout shifts. As it appears there from early beginning, not
+// until its size is dynamically set
+@mixin iconsStaticSizeFix {
+  fa-icon > svg {
+    /* Otherwise, doesn't display when JavaScript is disabled */
+    height: 100%;
+  }
+}
diff --git a/src/styles.scss b/src/styles.scss
index 105fc72d..19b72be1 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -3,6 +3,7 @@
 @use 'app/header/header-theme';
 @use 'app/no-script/no-script-theme';
 @use 'app/navigation-tabs/navigation-tabs-theme';
+@use 'font-awesome';
 @use 'theming';
 @use 'typographies';
 
@@ -81,3 +82,6 @@ html:not([data-no-motion]) {
   @include about-theme.motion;
   @include navigation-tabs-theme.motion;
 }
+
+// Font Awesome quirk
+@include font-awesome.iconsStaticSizeFix;