Better popup size when loading fonts

src/core/client/auth/containers/AutoHeightContainer.tsx

@@ -1,5 +1,7 @@
 import { Component } from "react";
 
+import resizePopup from "../dom/resizePopup";
+
 /**
  * A container that adapts the window height to the current body size
  * when this is mounted or updated.
@@ -10,11 +12,7 @@ export default class AutoHeightContainer extends Component {
   private updateWindowSizeCallback = () => {
     clearTimeout(this.timeout);
     this.timeout = setTimeout(() => {
-      const innerHeight = window.document.body.offsetHeight;
-      window.resizeTo(
-        window.outerWidth,
-        innerHeight + window.outerHeight - window.innerHeight
-      );
+      resizePopup();
     }, 0);
   };
 

src/core/client/auth/dom/resizePopup.ts

@@ -0,0 +1,7 @@
+export default function resizePopup() {
+  const innerHeight = window.document.body.offsetHeight;
+  window.resizeTo(
+    window.outerWidth,
+    innerHeight + window.outerHeight - window.innerHeight
+  );
+}

src/core/client/auth/index.tsx

@@ -9,9 +9,23 @@ import {
 } from "talk-framework/lib/bootstrap";
 
 import AppContainer from "./containers/AppContainer";
+import resizePopup from "./dom/resizePopup";
 import { initLocalState } from "./local";
 import localesData from "./locales";
 
+/**
+ * If fonts api is available, resize popup once
+ * fonts are loaded!
+ */
+if ((document as any).fonts) {
+  setTimeout(
+    requestAnimationFrame(() => () =>
+      (document as any).fonts.ready.then(resizePopup)
+    ),
+    50
+  );
+}
+
 // This is called when the context is first initialized.
 async function init({ relayEnvironment }: TalkContext) {
   await initLocalState(relayEnvironment);