better handling loading terminal fonts timing issues, fix #5019

Signed-off-by: Roman <ixrock@gmail.com>

src/features/preferences/renderer/preference-items/terminal/terminal-font-family/terminal-font-family.tsx

@@ -2,7 +2,7 @@
  * Copyright (c) OpenLens Authors. All rights reserved.
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
-import React from "react";
+import React, { useEffect } from "react";
 import { SubTitle } from "../../../../../../renderer/components/layout/sub-title";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import type { UserStore } from "../../../../../../common/user-store";
@@ -13,26 +13,35 @@ import { Select } from "../../../../../../renderer/components/select";
 import type { Logger } from "../../../../../../common/logger";
 import { action } from "mobx";
 import loggerInjectable from "../../../../../../common/logger.injectable";
+import {
+  preloadAllTerminalFontsInjectable,
+  terminalFontsInjectable,
+} from "../../../../../../renderer/components/dock/terminal/terminal-fonts.injectable";
 
 interface Dependencies {
   userStore: UserStore;
   logger: Logger;
+  terminalFonts: Map<string, string>;
+  preloadFonts: () => Promise<void>;
 }
 
 const NonInjectedTerminalFontFamily = observer(
-  ({ userStore, logger }: Dependencies) => {
+  ({ userStore, logger, terminalFonts, preloadFonts }: Dependencies) => {
+    useEffect(() => {
+      preloadFonts(); // preload all fonts to show preview in select-box
+    }, []);
 
-    // fonts must be declared in `fonts.scss` and at `template.html` (if early-preloading required)
+    const bundledFonts: SelectOption<string>[] = Array.from(terminalFonts.keys()).map(font => {
-    const supportedCustomFonts: SelectOption<string>[] = [
-      "RobotoMono", "Anonymous Pro", "IBM Plex Mono", "JetBrains Mono", "Red Hat Mono",
-      "Source Code Pro", "Space Mono", "Ubuntu Mono",
-    ].map(customFont => {
       const { fontFamily, fontSize } = userStore.terminalConfig;
 
       return {
-        label: <span style={{ fontFamily: customFont, fontSize }}>{customFont}</span>,
+        label: (
-        value: customFont,
+          <span style={{ fontFamily: `${font}, var(--font-terminal)`, fontSize }}>
-        isSelected: fontFamily === customFont,
+            {font}
+          </span>
+        ),
+        value: font,
+        isSelected: fontFamily === font,
       };
     });
 
@@ -50,7 +59,7 @@ const NonInjectedTerminalFontFamily = observer(
           themeName="lens"
           controlShouldRenderValue
           value={userStore.terminalConfig.fontFamily}
-          options={supportedCustomFonts}
+          options={bundledFonts}
           onChange={onFontFamilyChange as any}
         />
       </section>
@@ -65,6 +74,8 @@ export const TerminalFontFamily = withInjectables<Dependencies>(
     getProps: (di) => ({
       userStore: di.inject(userStoreInjectable),
       logger: di.inject(loggerInjectable),
+      terminalFonts: di.inject(terminalFontsInjectable),
+      preloadFonts: di.inject(preloadAllTerminalFontsInjectable),
     }),
   },
 );

src/renderer/components/app.scss

@@ -232,22 +232,6 @@ iframe {
   }
 }
 
-#fonts-preloading {
-  > span {
-    position: absolute;
-    visibility: hidden;
-    height: 0;
-
-    &:before {
-      width: 0;
-      display: block;
-      overflow: hidden;
-      content: "text-example"; // some text required to start applying/rendering font in document
-      font-family: inherit; // font-family must be specified via style="" (see: template.html)
-    }
-  }
-}
-
 // app's common loading indicator, displaying on the route transitions
 #loading {
   position: absolute;

src/renderer/components/dock/terminal/create-terminal.injectable.ts

@@ -9,11 +9,13 @@ import type { TabId } from "../dock/store";
 import type { TerminalApi } from "../../../api/terminal-api";
 import terminalSpawningPoolInjectable from "./terminal-spawning-pool.injectable";
 import terminalConfigInjectable from "../../../../common/user-store/terminal-config.injectable";
-import terminalCopyOnSelectInjectable from "../../../../common/user-store/terminal-copy-on-select.injectable";
+import terminalCopyOnSelectInjectable
+  from "../../../../common/user-store/terminal-copy-on-select.injectable";
 import isMacInjectable from "../../../../common/vars/is-mac.injectable";
 import openLinkInBrowserInjectable from "../../../../common/utils/open-link-in-browser.injectable";
 import xtermColorThemeInjectable from "../../../themes/terminal-colors.injectable";
 import loggerInjectable from "../../../../common/logger.injectable";
+import { preloadTerminalFontInjectable } from "./terminal-fonts.injectable";
 
 export type CreateTerminal = (tabId: TabId, api: TerminalApi) => Terminal;
 
@@ -28,6 +30,7 @@ const createTerminalInjectable = getInjectable({
       openLinkInBrowser: di.inject(openLinkInBrowserInjectable),
       xtermColorTheme: di.inject(xtermColorThemeInjectable),
       logger: di.inject(loggerInjectable),
+      preloadFont: di.inject(preloadTerminalFontInjectable),
     };
 
     return (tabId, api) => new Terminal(dependencies, { tabId, api });

src/renderer/components/dock/terminal/terminal-fonts.injectable.ts

@@ -0,0 +1,71 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import { getInjectable } from "@ogre-tools/injectable";
+import RobotoMono from "../../../fonts/Roboto-Mono-nerd.ttf"; // patched font with icons
+import AnonymousPro from "../../../fonts/AnonymousPro-Regular.ttf";
+import IBMPlexMono from "../../../fonts/IBMPlexMono-Regular.ttf";
+import JetBrainsMono from "../../../fonts/JetBrainsMono-Regular.ttf";
+import RedHatMono from "../../../fonts/RedHatMono-Regular.ttf";
+import SourceCodePro from "../../../fonts/SourceCodePro-Regular.ttf";
+import SpaceMono from "../../../fonts/SpaceMono-Regular.ttf";
+import UbuntuMono from "../../../fonts/UbuntuMono-Regular.ttf";
+
+export const terminalFontsInjectable = getInjectable({
+  id: "terminalFontsInjectable",
+
+  instantiate() {
+    return new Map([
+      ["RobotoMono", RobotoMono],
+      ["Anonymous Pro", AnonymousPro],
+      ["IBM Plex Mono", IBMPlexMono],
+      ["JetBrains Mono", JetBrainsMono],
+      ["Red Hat Mono", RedHatMono],
+      ["Source Code Pro", SourceCodePro],
+      ["Space Mono", SpaceMono],
+      ["Ubuntu Mono", UbuntuMono],
+    ]);
+  },
+});
+
+
+export const preloadTerminalFontInjectable = getInjectable({
+  id: "preloadTerminalFontInjectable",
+
+  instantiate(di) {
+    const terminalFonts = di.inject(terminalFontsInjectable);
+
+    return async function (fontFamily: string): Promise<void> {
+      const fontBundledPath = terminalFonts.get(fontFamily);
+      const fontLoaded = document.fonts.check(`10px ${fontFamily}`);
+
+      if (fontLoaded || !fontBundledPath) return;
+
+      const font = new FontFace(fontFamily, `url(${fontBundledPath})`);
+
+      document.fonts.add(font);
+      await font.load();
+    };
+  },
+
+  causesSideEffects: true,
+});
+
+export const preloadAllTerminalFontsInjectable = getInjectable({
+  id: "preloadAllTerminalFontsInjectable",
+
+  instantiate(di) {
+    const terminalFonts = di.inject(terminalFontsInjectable);
+    const preloadFont = di.inject(preloadTerminalFontInjectable);
+
+    return async function (): Promise<any> {
+      return Promise.allSettled(
+        Array.from(terminalFonts.keys()).map(preloadFont),
+      );
+    };
+  },
+
+  causesSideEffects: true,
+});

src/renderer/components/dock/terminal/terminal.ts

@@ -28,6 +28,7 @@ export interface TerminalDependencies {
   readonly xtermColorTheme: IComputedValue<Record<string, string>>;
   readonly logger: Logger;
   openLinkInBrowser: OpenLinkInBrowser;
+  preloadFont: (fontFamily: string) => Promise<void>;
 }
 
 export interface TerminalArguments {
@@ -53,7 +54,8 @@ export class Terminal {
     return this.elem.querySelector(".xterm-viewport")!;
   }
 
-  attachTo(parentElem: HTMLElement) {
+  async attachTo(parentElem: HTMLElement) {
+    await this.dependencies.preloadFont(this.fontFamily);
     assert(this.elem, "Terminal should always be mounted somewhere");
     parentElem.appendChild(this.elem);
     this.onActivate();
@@ -206,9 +208,10 @@ export class Terminal {
     this.fit();
   };
 
-  setFontFamily = (fontFamily: string) => {
+  setFontFamily = async (fontFamily: string) => {
     this.dependencies.logger.info(`[TERMINAL]: set fontFamily to ${fontFamily}`);
 
+    await this.dependencies.preloadFont(fontFamily);
     this.xterm.options.fontFamily = fontFamily;
     this.fit();
 

src/renderer/components/dock/terminal/view.tsx

@@ -34,14 +34,14 @@ class NonInjectedTerminalWindow extends React.Component<TerminalWindowProps & De
   public elem: HTMLElement | null = null;
   public terminal!: Terminal;
 
-  componentDidMount() {
+  async componentDidMount() {
     this.props.terminalStore.connect(this.props.tab);
     const terminal = this.props.terminalStore.getTerminal(this.props.tab.id);
 
     assert(terminal, "Terminal must be created for tab before mounting");
     this.terminal = terminal;
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    this.terminal.attachTo(this.elem!);
+    await this.terminal.attachTo(this.elem!);
 
     disposeOnUnmount(this, [
       // refresh terminal available space (cols/rows) when <Dock/> resized
@@ -51,7 +51,7 @@ class NonInjectedTerminalWindow extends React.Component<TerminalWindowProps & De
     ]);
   }
 
-  componentDidUpdate(): void {
+  async componentDidUpdate() {
     this.terminal.detach();
     this.props.terminalStore.connect(this.props.tab);
     const terminal = this.props.terminalStore.getTerminal(this.props.tab.id);
@@ -59,7 +59,7 @@ class NonInjectedTerminalWindow extends React.Component<TerminalWindowProps & De
     assert(terminal, "Terminal must be created for tab before mounting");
     this.terminal = terminal;
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    this.terminal.attachTo(this.elem!);
+    await this.terminal.attachTo(this.elem!);
   }
 
   componentWillUnmount(): void {

src/renderer/components/fonts.scss

@@ -44,58 +44,3 @@
   font-display: block;
   src: url("../fonts/MaterialIcons-Regular.ttf") format("truetype");
 }
-
-
-// Terminal fonts (monospaced)
-// Source: https://fonts.google.com/?category=Monospace
-@font-face {
-  font-family: "Anonymous Pro";
-  src: local("Anonymous Pro"), url("../fonts/AnonymousPro-Regular.ttf") format("truetype");
-  font-display: block;
-}
-
-@font-face {
-  font-family: "IBM Plex Mono";
-  src: local("IBM Plex Mono"), url("../fonts/IBMPlexMono-Regular.ttf") format("truetype");
-  font-display: block;
-}
-
-@font-face {
-  font-family: "JetBrains Mono";
-  src: local("JetBrains Mono"), url("../fonts/JetBrainsMono-Regular.ttf") format("truetype");
-  font-display: block;
-}
-
-@font-face {
-  font-family: "Red Hat Mono";
-  src: local("Red Hat Mono"), url("../fonts/RedHatMono-Regular.ttf") format("truetype");
-  font-display: block;
-}
-
-
-@font-face {
-  font-family: "Source Code Pro";
-  src: local("Source Code Pro"), url("../fonts/SourceCodePro-Regular.ttf") format("truetype");
-  font-display: block;
-}
-
-@font-face {
-  font-family: "Space Mono";
-  src: local("Space Mono"), url("../fonts/SpaceMono-Regular.ttf") format("truetype");
-  font-display: block;
-}
-
-@font-face {
-  font-family: "Ubuntu Mono";
-  src: local("Ubuntu Mono"), url("../fonts/UbuntuMono-Regular.ttf") format("truetype");
-  font-display: block;
-}
-
-// Patched RobotoMono font with icons
-// RobotoMono Windows Compatible for using in terminal
-// https://github.com/ryanoasis/nerd-fonts/tree/master/patched-fonts/RobotoMono
-@font-face {
-  font-family: "RobotoMono";
-  src: local("RobotoMono"), url("../fonts/Roboto-Mono-nerd.ttf") format("truetype");
-  font-display: block;
-}

src/renderer/template.html

@@ -5,17 +5,6 @@
   </head>
   <body>
     <div id="app"></div>
-    <div id="fonts-preloading">
-      <span style="font-family: 'Material Icons'" />
-      <span style="font-family: 'RobotoMono'" />
-      <span style="font-family: 'Anonymous Pro'" />
-      <span style="font-family: 'IBM Plex Mono'" />
-      <span style="font-family: 'JetBrains Mono'" />
-      <span style="font-family: 'Red Hat Mono'" />
-      <span style="font-family: 'Source Code Pro'" />
-      <span style="font-family: 'Space Mono'" />
-      <span style="font-family: 'Ubuntu Mono'" />
-    </div>
     <div id="terminal-init"></div>
   </body>
 </html>