diff --git a/src/features/preferences/renderer/preference-items/terminal/terminal-font-family/terminal-font-family.tsx b/src/features/preferences/renderer/preference-items/terminal/terminal-font-family/terminal-font-family.tsx index 74ad96e6c3..7ff161862e 100644 --- a/src/features/preferences/renderer/preference-items/terminal/terminal-font-family/terminal-font-family.tsx +++ b/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; - preloadFonts: () => Promise; } 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[] = Array.from(terminalFonts.keys()).map(font => { const { fontFamily, fontSize } = userStore.terminalConfig; @@ -67,15 +61,10 @@ const NonInjectedTerminalFontFamily = observer( }, ); -export const TerminalFontFamily = withInjectables( - NonInjectedTerminalFontFamily, - - { - getProps: (di) => ({ - userStore: di.inject(userStoreInjectable), - logger: di.inject(loggerInjectable), - terminalFonts: di.inject(terminalFontsInjectable), - preloadFonts: di.inject(preloadAllTerminalFontsInjectable), - }), - }, -); +export const TerminalFontFamily = withInjectables(NonInjectedTerminalFontFamily, { + getProps: (di) => ({ + userStore: di.inject(userStoreInjectable), + logger: di.inject(loggerInjectable), + terminalFonts: di.inject(terminalFontsInjectable), + }), +}); diff --git a/src/renderer/components/dock/terminal/create-terminal.injectable.ts b/src/renderer/components/dock/terminal/create-terminal.injectable.ts index 851044a33c..2ff82e2c17 100644 --- a/src/renderer/components/dock/terminal/create-terminal.injectable.ts +++ b/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 }); diff --git a/src/renderer/components/dock/terminal/terminal-fonts.injectable.ts b/src/renderer/components/dock/terminal/terminal-fonts.injectable.ts index a0fd3ac897..1609f8b411 100644 --- a/src/renderer/components/dock/terminal/terminal-fonts.injectable.ts +++ b/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 { - 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, }); diff --git a/src/renderer/components/dock/terminal/terminal.ts b/src/renderer/components/dock/terminal/terminal.ts index 40c624a79d..5f49882f1c 100644 --- a/src/renderer/components/dock/terminal/terminal.ts +++ b/src/renderer/components/dock/terminal/terminal.ts @@ -28,7 +28,6 @@ export interface TerminalDependencies { readonly xtermColorTheme: IComputedValue>; readonly logger: Logger; openLinkInBrowser: OpenLinkInBrowser; - preloadFont: (fontFamily: string) => Promise; } 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(); diff --git a/src/renderer/components/dock/terminal/view.tsx b/src/renderer/components/dock/terminal/view.tsx index ed824d8156..b85824cc30 100644 --- a/src/renderer/components/dock/terminal/view.tsx +++ b/src/renderer/components/dock/terminal/view.tsx @@ -34,14 +34,14 @@ class NonInjectedTerminalWindow extends React.Component resized @@ -51,7 +51,7 @@ class NonInjectedTerminalWindow extends React.Component