Add font load event to allow the header to redraw as the fonts load

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 }}
+          {#key $builderStore?.fonts}
-            <TourWrap stepKeys={[`builder-${title}-section`]}>
+            <span style="display:contents">
-              <Tab
+              {#each $layout.children as { path, title }}
-                quiet
+                <TourWrap stepKeys={[`builder-${title}-section`]}>
-                selected={$isActive(path)}
+                  <Tab
-                on:click={topItemNavigate(path)}
+                    quiet
-                title={capitalise(title)}
+                    selected={$isActive(path)}
-                id={`builder-${title}-tab`}
+                    on:click={topItemNavigate(path)}
-              />
+                    title={capitalise(title)}
-            </TourWrap>
+                    id={`builder-${title}-tab`}
-          {/each}
+                  />
+                </TourWrap>
+              {/each}
+            </span>
+          {/key}
         </Tabs>
       </div>
       <div class="topcenternav">

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")