From 12f56f5571d3608a1c44096816cb550c8cb81bac Mon Sep 17 00:00:00 2001
From: Gabe Kangas <gabek@real-ity.com>
Date: Wed, 31 Mar 2021 22:28:55 -0700
Subject: [PATCH] Hide external action modal spinner

---
 webroot/js/components/external-action-modal.js | 12 ++++++++++--
 webroot/styles/app.css                         |  4 ++--
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/webroot/js/components/external-action-modal.js b/webroot/js/components/external-action-modal.js
index 89267db34..fca1b8dd3 100644
--- a/webroot/js/components/external-action-modal.js
+++ b/webroot/js/components/external-action-modal.js
@@ -1,8 +1,15 @@
 import { h } from '/js/web_modules/preact.js';
 import htm from '/js/web_modules/htm.js';
+
 const html = htm.bind(h);
 
 export default function ExternalActionModal({ url, title, onClose }) {
+  const loading = 'background:url(/img/loading.gif) center center no-repeat;'
+
+  function loaded() {
+    document.querySelector("#external-modal-iframe").style = '';
+  }
+
   return html`
     <div class="fixed inset-0 overflow-y-auto" style="z-index: 9999">
       <div
@@ -47,14 +54,15 @@ export default function ExternalActionModal({ url, title, onClose }) {
               </span>
             </div>
 
-            <!-- TODO: Show a loading spinner while the iframe loads -->
             <iframe
-              style="height: 70vh"
+              id="external-modal-iframe"
+              style=${`${loading}`}
               width="100%"
               allowpaymentrequest="true"
               allowfullscreen="false"
               sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
               src=${url}
+              onload=${loaded}
             />
           </div>
         </div>
diff --git a/webroot/styles/app.css b/webroot/styles/app.css
index f61d008b4..544854bed 100644
--- a/webroot/styles/app.css
+++ b/webroot/styles/app.css
@@ -285,6 +285,6 @@ header {
   }
 }
 
-iframe{
-  background:url(/img/loading.gif) center center no-repeat; height: 100%;
+#external-modal-iframe {
+  height: 70vh;
 }
\ No newline at end of file