refactoring, loading all terminal fonts to earliest stage app starting

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, { useEffect } from "react";
+import React from "react";
 import { SubTitle } from "../../../../../../renderer/components/layout/sub-title";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import type { UserStore } from "../../../../../../common/user-store";
@@ -14,7 +14,6 @@ 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";
 
@@ -22,15 +21,10 @@ interface Dependencies {
   userStore: UserStore;
   logger: Logger;
   terminalFonts: Map<string, string>;
-  preloadFonts: () => Promise<void>;
 }
 
 const NonInjectedTerminalFontFamily = observer(
-  ({ userStore, logger, terminalFonts, preloadFonts }: Dependencies) => {
-    useEffect(() => {
-      preloadFonts(); // preload all fonts to show preview in select-box
-    }, []);
-
+  ({ userStore, logger, terminalFonts }: Dependencies) => {
     const bundledFonts: SelectOption<string>[] = Array.from(terminalFonts.keys()).map(font => {
       const { fontFamily, fontSize } = userStore.terminalConfig;
 
@@ -67,15 +61,10 @@ const NonInjectedTerminalFontFamily = observer(
   },
 );
 
-export const TerminalFontFamily = withInjectables<Dependencies>(
-  NonInjectedTerminalFontFamily,
-
-  {
-    getProps: (di) => ({
-      userStore: di.inject(userStoreInjectable),
-      logger: di.inject(loggerInjectable),
-      terminalFonts: di.inject(terminalFontsInjectable),
-      preloadFonts: di.inject(preloadAllTerminalFontsInjectable),
-    }),
-  },
-);
+export const TerminalFontFamily = withInjectables<Dependencies>(NonInjectedTerminalFontFamily, {
+  getProps: (di) => ({
+    userStore: di.inject(userStoreInjectable),
+    logger: di.inject(loggerInjectable),
+    terminalFonts: di.inject(terminalFontsInjectable),
+  }),
+});

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

@@ -15,7 +15,6 @@ 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;
 
@@ -30,7 +29,6 @@ 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

@@ -4,6 +4,7 @@
  */
 
 import { getInjectable } from "@ogre-tools/injectable";
+import { beforeFrameStartsFirstInjectionToken } from "../../../before-frame-starts/tokens";
 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";
@@ -60,12 +61,18 @@ export const preloadAllTerminalFontsInjectable = getInjectable({
     const terminalFonts = di.inject(terminalFontsInjectable);
     const preloadFont = di.inject(preloadTerminalFontInjectable);
 
-    return async function (): Promise<any> {
-      return Promise.allSettled(
-        Array.from(terminalFonts.keys()).map(preloadFont),
-      );
+    return {
+      id: "preload-all-terminal-fonts",
+
+      async run() {
+        await Promise.allSettled(
+          Array.from(terminalFonts.keys()).map(preloadFont),
+        );
+      },
     };
   },
 
+  injectionToken: beforeFrameStartsFirstInjectionToken,
+
   causesSideEffects: true,
 });

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

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