From aac6af40cc1658a936c1bd9e6235e815328f395b Mon Sep 17 00:00:00 2001
From: Pavel Mineev <pavel@mineev.me>
Date: Sun, 10 Jul 2022 13:40:52 -0700
Subject: [PATCH] update height when an image is loaded

---
 frontend/app/components/root/root.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/frontend/app/components/root/root.tsx b/frontend/app/components/root/root.tsx
index a214cb5d..43e2091d 100644
--- a/frontend/app/components/root/root.tsx
+++ b/frontend/app/components/root/root.tsx
@@ -315,6 +315,10 @@ const CopyrightLink = (title: string) => (
   </a>
 );
 
+function updateIframeHeight() {
+  postMessageToParent({ height: document.body.offsetHeight });
+}
+
 /** Root component connected to redux */
 export function ConnectedRoot() {
   const intl = useIntl();
@@ -326,9 +330,13 @@ export function ConnectedRoot() {
     if (!rootRef.current) {
       return;
     }
+
     // TODO: throttle updates
     const observer = new MutationObserver(() => {
-      postMessageToParent({ height: document.body.offsetHeight });
+      updateIframeHeight();
+
+      // a hacky way to force iframe height update when new image is rendered and loaded
+      rootRef.current?.querySelectorAll('img').forEach((img) => img.addEventListener('load', updateIframeHeight));
     });
 
     observer.observe(rootRef.current, { attributes: true, childList: true, subtree: true });