feat: Wait for fontawesome to load

Co-authored-by: Alois Klink <alois@aloisklink.com>
2025-04-13 18:03:59 +05:30
parent 92f029830f
commit 6ae68fc546
4 changed files with 77 additions and 1 deletions
@@ -1,4 +1,3 @@
-@import '@fortawesome/fontawesome-free/css/all.min.css';
@import '@fontsource-variable/recursive/crsv.css';

@tailwind base;
@@ -0,0 +1,54 @@
+<!--
+  @component
+  Exports a `waitForFontAwesomeToLoad` function that waits for FontAwesome to load.
+
+  Usage:
+
+  ```svelte
+  <script lang="ts">
+    import FontAwesome from '$lib/client/components/FontAwesome';
+    let waitForFontAwesomeToLoad: FontAwesome["waitForFontAwesomeToLoad"];
+  </script>
+  <FontAwesome bind:waitForFontAwesomeToLoad />
+  ```
+-->
+<script context="module" lang="ts">
+  /**
+   * Returns `true` if the code may contain FontAwesome icons, and we should
+   * wait for the fonts to load before rendering.
+   */
+  export function mayContainFontAwesome(code: string) {
+    // taken from https://github.com/mermaid-js/mermaid/blob/7043892e871d0c413ec63dc1570a8ef738d15568/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js#L63
+    // Not ideal, since we're looking at unparsed code.
+    const regex = /fa[blrs]?:fa-[\w-]+/g;
+    return regex.test(code);
+  }
+</script>
+
+<script lang="ts">
+  // Vite will automatically take care of adding this to our `<head>`
+  let lazyLoadFontAwesomeCSS = import('./FontAwesomeCSS.svelte');
+
+  // eslint-disable-next-line unicorn/prefer-top-level-await
+  let fontsLoaded = (async () => {
+    await lazyLoadFontAwesomeCSS;
+
+    // Once the stylesheet has been parsed, the fonts will be in document.fonts
+    // TODO: Maybe we should scan the CSS style sheet only, and only load FontAwesome fonts
+    await Promise.allSettled(Array.from(document.fonts, (font) => font.load()));
+  })();
+
+  /**
+   * Wait for FontAwesome to load.
+   *
+   * @returns A promise that resolves when FontAwesome is
+   * loaded, or there was an error that we ignore.
+   */
+  export async function waitForFontAwesomeToLoad() {
+    return await fontsLoaded;
+  }
+</script>
+
+{#await lazyLoadFontAwesomeCSS then FontAwesomeCSS}
+  <FontAwesomeCSS.default />
+{/await}
@@ -0,0 +1,14 @@
+<!--
+    @component
+    
+    Imports the FontAwesome CSS file.
+
+    Needed, since the `@sveltejs/adapter-node` plugin doesn't seem to support
+    lazy-importing CSS, even though `@sveltejs/adapter-vercel` is fine with it!
+
+    However, making a `.svelte` file that imports the CSS file, and then
+    lazy-loading the `.svelte` file works.
+-->
+<script lang="ts">
+  import '@fortawesome/fontawesome-free/css/all.css';
+</script>
@@ -5,6 +5,7 @@
  import { PanZoomState } from '$/util/panZoom';
  import { inputStateStore, stateStore, updateCodeStore } from '$/util/state';
  import { logEvent, saveStatistics } from '$/util/stats';
+  import FontAwesome, { mayContainFontAwesome } from '$lib/components/FontAwesome.svelte';
  import uniqueID from 'lodash-es/uniqueId';
  import type { MermaidConfig } from 'mermaid';
  import { mode } from 'mode-watcher';
@@ -23,6 +24,7 @@
  let error = $state(false);
  let panZoom = true;
  let manualUpdate = true;
+  let waitForFontAwesomeToLoad: FontAwesome['waitForFontAwesomeToLoad'] | undefined = $state();

  // Set up panZoom state observer to update the store when pan/zoom changes
  const setupPanZoomObserver = () => {
@@ -65,6 +67,11 @@
        config = state.mermaid;
        rough = state.rough;
        panZoom = state.panZoom ?? true;
+
+        if (mayContainFontAwesome(code)) {
+          await waitForFontAwesomeToLoad?.();
+        }
+
        const scroll = view?.parentElement?.scrollTop;
        delete container.dataset.processed;
        const viewID = uniqueID('graph-');
@@ -136,6 +143,8 @@
  });
 </script>

+<FontAwesome bind:waitForFontAwesomeToLoad />
+
 <div
  id="view"
  bind:this={view}