From 31fccf23a8fa2209ccff5829488377804c79bf0e Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Wed, 8 May 2024 09:23:30 +0100
Subject: [PATCH] Add font load event to allow the header to redraw as the
 fonts load

---
 .../builder/app/[application]/_layout.svelte  | 30 ++++++++++++-------
 .../builder/src/stores/builder/builder.js     | 11 +++++++
 2 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/_layout.svelte
index 60c45fd2e4..a6ba91d7fd 100644
--- a/packages/builder/src/pages/builder/app/[application]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/_layout.svelte
@@ -104,6 +104,10 @@
   }
 
   onMount(async () => {
+    document.fonts.onloadingdone = e => {
+      builderStore.loadFonts(e.fontfaces)
+    }
+
     if (!hasSynced && application) {
       try {
         await API.syncApp(application)
@@ -144,17 +148,21 @@
           />
         </span>
         <Tabs {selected} size="M">
-          {#each $layout.children as { path, title }}
-            <TourWrap stepKeys={[`builder-${title}-section`]}>
-              <Tab
-                quiet
-                selected={$isActive(path)}
-                on:click={topItemNavigate(path)}
-                title={capitalise(title)}
-                id={`builder-${title}-tab`}
-              />
-            </TourWrap>
-          {/each}
+          {#key $builderStore?.fonts}
+            <span style="display:contents">
+              {#each $layout.children as { path, title }}
+                <TourWrap stepKeys={[`builder-${title}-section`]}>
+                  <Tab
+                    quiet
+                    selected={$isActive(path)}
+                    on:click={topItemNavigate(path)}
+                    title={capitalise(title)}
+                    id={`builder-${title}-tab`}
+                  />
+                </TourWrap>
+              {/each}
+            </span>
+          {/key}
         </Tabs>
       </div>
       <div class="topcenternav">
diff --git a/packages/builder/src/stores/builder/builder.js b/packages/builder/src/stores/builder/builder.js
index d002062da9..055498bc91 100644
--- a/packages/builder/src/stores/builder/builder.js
+++ b/packages/builder/src/stores/builder/builder.js
@@ -14,6 +14,7 @@ export const INITIAL_BUILDER_STATE = {
   tourKey: null,
   tourStepKey: null,
   hoveredComponentId: null,
+  fonts: null,
 }
 
 export class BuilderStore extends BudiStore {
@@ -36,6 +37,16 @@ export class BuilderStore extends BudiStore {
     this.websocket
   }
 
+  loadFonts(fontFaces) {
+    const ff = fontFaces.map(
+      fontFace => `${fontFace.family}-${fontFace.weight}`
+    )
+    this.update(state => ({
+      ...state,
+      fonts: [...(state.fonts || []), ...ff],
+    }))
+  }
+
   init(app) {
     if (!app?.appId) {
       console.error("BuilderStore: No appId supplied for websocket")