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,17 +148,19 @@
           />
         </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}
+            {#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}
         </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")