wallet-ext: wait for inter font or icon-font to load

* wait for the fonts to load before showing text/icons that use them (FOIT). The resources are already packed inside the extension so it should load them fast. Solves content moving or displaying wrong icon for a second

wallet/font-icons/output/sui-icons.scss

@@ -4,7 +4,8 @@
     url("./sui-icons.woff2") format("woff2"),
     url("./sui-icons.woff") format("woff"),
     url('./sui-icons.ttf') format('truetype'),
-url('./sui-icons.svg#sui-icons') format('svg');
+    url('./sui-icons.svg#sui-icons') format('svg');
+    font-display: block;
 }
 
 [class^="sui-icons-"], [class*=" sui-icons-"] {
@@ -14,12 +15,12 @@ url('./sui-icons.svg#sui-icons') format('svg');
       -moz-osx-font-smoothing: grayscale;
 }
 
-.sui-icons-Info:before { content: "\ea01"; }
-.sui-icons-Preview:before { content: "\ea02"; }
-.sui-icons-apps:before { content: "\ea03"; }
-.sui-icons-arrow-left:before { content: "\ea04"; }
-.sui-icons-arrow-right:before { content: "\ea05"; }
-.sui-icons-buy:before { content: "\ea06"; }
+.sui-icons-Buy:before { content: "\ea01"; }
+.sui-icons-Info:before { content: "\ea02"; }
+.sui-icons-Preview:before { content: "\ea03"; }
+.sui-icons-apps:before { content: "\ea04"; }
+.sui-icons-arrow-left:before { content: "\ea05"; }
+.sui-icons-arrow-right:before { content: "\ea06"; }
 .sui-icons-checkmark:before { content: "\ea07"; }
 .sui-icons-clipboard:before { content: "\ea08"; }
 .sui-icons-close:before { content: "\ea09"; }
@@ -37,12 +38,12 @@ url('./sui-icons.svg#sui-icons') format('svg');
 .sui-icons-tokens:before { content: "\ea15"; }
 .sui-icons-version-icon:before { content: "\ea16"; }
 
-$sui-icons-Info: "\ea01";
-$sui-icons-Preview: "\ea02";
-$sui-icons-apps: "\ea03";
-$sui-icons-arrow-left: "\ea04";
-$sui-icons-arrow-right: "\ea05";
-$sui-icons-buy: "\ea06";
+$sui-icons-Buy: "\ea01";
+$sui-icons-Info: "\ea02";
+$sui-icons-Preview: "\ea03";
+$sui-icons-apps: "\ea04";
+$sui-icons-arrow-left: "\ea05";
+$sui-icons-arrow-right: "\ea06";
 $sui-icons-checkmark: "\ea07";
 $sui-icons-clipboard: "\ea08";
 $sui-icons-close: "\ea09";

wallet/font-icons/output/sui-icons.ts

@@ -2,12 +2,12 @@
 // SPDX-License-Identifier: Apache-2.0
 
 export enum SuiIcons {
+  Buy = "sui-icons-Buy",
   Info = "sui-icons-Info",
   Preview = "sui-icons-Preview",
   Apps = "sui-icons-apps",
   ArrowLeft = "sui-icons-arrow-left",
   ArrowRight = "sui-icons-arrow-right",
-  Buy = "sui-icons-buy",
   Checkmark = "sui-icons-checkmark",
   Clipboard = "sui-icons-clipboard",
   Close = "sui-icons-close",
@@ -26,6 +26,6 @@ export enum SuiIcons {
   VersionIcon = "sui-icons-version-icon"
 }
 
-export type SuiIconsClassname = "sui-icons-Info" | "sui-icons-Preview" | "sui-icons-apps" | "sui-icons-arrow-left" | "sui-icons-arrow-right" | "sui-icons-buy" | "sui-icons-checkmark" | "sui-icons-clipboard" | "sui-icons-close" | "sui-icons-coins" | "sui-icons-globe" | "sui-icons-hand-coins" | "sui-icons-history" | "sui-icons-logout" | "sui-icons-nfts" | "sui-icons-percentage-polygon" | "sui-icons-person" | "sui-icons-sui-chevron-right" | "sui-icons-sui-logo-icon" | "sui-icons-sui-logo-txt" | "sui-icons-tokens" | "sui-icons-version-icon"
-export type SuiIconsIcon = "Info" | "Preview" | "apps" | "arrow-left" | "arrow-right" | "buy" | "checkmark" | "clipboard" | "close" | "coins" | "globe" | "hand-coins" | "history" | "logout" | "nfts" | "percentage-polygon" | "person" | "sui-chevron-right" | "sui-logo-icon" | "sui-logo-txt" | "tokens" | "version-icon"
-export const SuiIconsPrefix = "sui-icons-"
+export type SuiIconsClassname = "sui-icons-Buy" | "sui-icons-Info" | "sui-icons-Preview" | "sui-icons-apps" | "sui-icons-arrow-left" | "sui-icons-arrow-right" | "sui-icons-checkmark" | "sui-icons-clipboard" | "sui-icons-close" | "sui-icons-coins" | "sui-icons-globe" | "sui-icons-hand-coins" | "sui-icons-history" | "sui-icons-logout" | "sui-icons-nfts" | "sui-icons-percentage-polygon" | "sui-icons-person" | "sui-icons-sui-chevron-right" | "sui-icons-sui-logo-icon" | "sui-icons-sui-logo-txt" | "sui-icons-tokens" | "sui-icons-version-icon"
+export type SuiIconsIcon = "Buy" | "Info" | "Preview" | "apps" | "arrow-left" | "arrow-right" | "checkmark" | "clipboard" | "close" | "coins" | "globe" | "hand-coins" | "history" | "logout" | "nfts" | "percentage-polygon" | "person" | "sui-chevron-right" | "sui-logo-icon" | "sui-logo-txt" | "tokens" | "version-icon"
+export const SuiIconsPrefix = "sui-icons-"

wallet/font-icons/style-templates/{{filename}}.css.template

@@ -6,6 +6,7 @@
   url("{{cssPath}}{{fontname}}.woff") format("woff"),
   url('{{cssPath}}{{fontname}}.ttf') format('truetype'),
   url('{{cssPath}}{{fontname}}.svg#{{fontname}}') format('svg');
+  font-display: block;
 }
 
 [class^="{{prefix}}-"], [class*=" {{prefix}}-"] {

wallet/font-icons/style-templates/{{filename}}.scss.template

@@ -4,7 +4,8 @@
     url("{{cssPath}}{{fontname}}.woff2") format("woff2"),
     url("{{cssPath}}{{fontname}}.woff") format("woff"),
     url('{{cssPath}}{{fontname}}.ttf') format('truetype'),
-url('{{cssPath}}{{fontname}}.svg#{{fontname}}') format('svg');
+    url('{{cssPath}}{{fontname}}.svg#{{fontname}}') format('svg');
+    font-display: block;
 }
 
 [class^="{{prefix}}-"], [class*=" {{prefix}}-"] {

wallet/src/ui/styles/global.scss

@@ -4,7 +4,7 @@
 @font-face {
     font-family: Inter;
     font-style: normal;
-    font-display: swap;
+    font-display: block;
     src: url('_assets/fonts/inter.ttf');
     font-weight: 100 900;
 }