From 31fccf23a8fa2209ccff5829488377804c79bf0e Mon Sep 17 00:00:00 2001 From: Dean 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 @@ /> - {#each $layout.children as { path, title }} - - - - {/each} + {#key $builderStore?.fonts} + + {#each $layout.children as { path, title }} + + + + {/each} + + {/key}
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")