Merge pull request #13636 from Budibase/fix/builder-tabs-underline

Fix for positioning of selected builder navigation tab on page 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,6 +148,7 @@
           />
         </span>
         <Tabs {selected} size="M">
+          {#key $builderStore?.fonts}
             {#each $layout.children as { path, title }}
               <TourWrap stepKeys={[`builder-${title}-section`]}>
                 <Tab
@@ -155,6 +160,7 @@
                 />
               </TourWrap>
             {/each}
+          {/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")