From e0ca1a2e49ede9e2dc5b980bf433f69b0bdac6b7 Mon Sep 17 00:00:00 2001
From: Nic Barker <nic@nicbarker.com>
Date: Mon, 16 Sep 2024 21:28:23 +1200
Subject: [PATCH] Fix a race condition in the HTML renderer where text could
 get measured and cached before font had loaded

---
 examples/clay-official-website/index.html | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/examples/clay-official-website/index.html b/examples/clay-official-website/index.html
index 5849e9e..25607d0 100644
--- a/examples/clay-official-website/index.html
+++ b/examples/clay-official-website/index.html
@@ -13,6 +13,7 @@
             padding: 0;
             margin: 0;
             pointer-events: none;
+            background: rgb(244, 235, 230);
         }
         /* Import the font using @font-face */
         @font-face {
@@ -213,6 +214,18 @@
         instance.exports.Clay_CreateArenaWithCapacityAndMemory(arenaStructAddress, memorySize, arenaMemoryAddress);
     }
     async function init() {
+        await new Promise((resolve, reject) => {
+            // repeatedly poll check
+            const poller = setInterval(async () => {
+                await Promise.all(fontsById.map(f => document.fonts.load(`12px "${f}"`)));
+                console.log(`12px "${fontsById[0]}"`);
+                if (document.fonts.check(`12px "${fontsById[0]}"`)) {
+                    clearInterval(poller);
+                    resolve(true);
+                }
+            }, 10);
+            setTimeout(() => {clearInterval(poller); resolve()}, 1000);
+        });
         window.htmlRoot = document.body.appendChild(document.createElement('div'));
         window.canvasRoot = document.body.appendChild(document.createElement('canvas'));
         window.canvasContext = window.canvasRoot.getContext("2d");