From f57773393a28a5b0490480a822f03b48537af680 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Mon, 27 Aug 2018 17:36:15 +0200
Subject: [PATCH] Better popup size when loading fonts

---
 .../client/auth/containers/AutoHeightContainer.tsx |  8 +++-----
 src/core/client/auth/dom/resizePopup.ts            |  7 +++++++
 src/core/client/auth/index.tsx                     | 14 ++++++++++++++
 3 files changed, 24 insertions(+), 5 deletions(-)
 create mode 100644 src/core/client/auth/dom/resizePopup.ts

diff --git a/src/core/client/auth/containers/AutoHeightContainer.tsx b/src/core/client/auth/containers/AutoHeightContainer.tsx
index e1eceff38..615e8fdc9 100644
--- a/src/core/client/auth/containers/AutoHeightContainer.tsx
+++ b/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);
   };
 
diff --git a/src/core/client/auth/dom/resizePopup.ts b/src/core/client/auth/dom/resizePopup.ts
new file mode 100644
index 000000000..fb89cfa24
--- /dev/null
+++ b/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
+  );
+}
diff --git a/src/core/client/auth/index.tsx b/src/core/client/auth/index.tsx
index 44970a3fa..1239fb1e9 100644
--- a/src/core/client/auth/index.tsx
+++ b/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);