From 435685d2f77917f23de0f251163a5563edff518d Mon Sep 17 00:00:00 2001
From: cv <34649812+cpvalente@users.noreply.github.com>
Date: Tue, 30 Mar 2021 11:03:10 +0200
Subject: [PATCH] iframe loader

---
 src/features/viewers/IFrameLoader.jsx         | 30 +++++++++++++++++++
 src/features/viewers/IFrameLoader.module.css  | 13 ++++++++
 src/features/viewers/PreviewContainer.jsx     | 21 ++++---------
 .../viewers/PreviewContainer.module.css       |  4 ---
 4 files changed, 48 insertions(+), 20 deletions(-)
 create mode 100644 src/features/viewers/IFrameLoader.jsx
 create mode 100644 src/features/viewers/IFrameLoader.module.css

diff --git a/src/features/viewers/IFrameLoader.jsx b/src/features/viewers/IFrameLoader.jsx
new file mode 100644
index 000000000..e666307f9
--- /dev/null
+++ b/src/features/viewers/IFrameLoader.jsx
@@ -0,0 +1,30 @@
+import { AspectRatio } from '@chakra-ui/layout';
+import { CircularProgress } from '@chakra-ui/progress';
+import { useState } from 'react';
+import style from './IFrameLoader.module.css';
+
+export default function IFrameLoader(props) {
+  const [loading, setLoading] = useState(true);
+  const { title, src } = props;
+
+  return (
+    <AspectRatio maxW='300' ratio={16 / 9} className={style.iframeContainer}>
+      <>
+        {loading && (
+          <CircularProgress
+            className={style.loader}
+            isIndeterminate
+            color='orange.300'
+            trackColor='#FFF0'
+          />
+        )}
+        <iframe
+          className={style.iframe}
+          title={title}
+          src={src}
+          onLoad={() => setLoading(false)}
+        />
+      </>
+    </AspectRatio>
+  );
+}
diff --git a/src/features/viewers/IFrameLoader.module.css b/src/features/viewers/IFrameLoader.module.css
new file mode 100644
index 000000000..e64f66675
--- /dev/null
+++ b/src/features/viewers/IFrameLoader.module.css
@@ -0,0 +1,13 @@
+.iframeContainer {
+  margin: auto;
+  background-color: #0001;
+  border: 1px solid #0001;
+}
+
+.loader {
+  z-index: 100;
+}
+
+.iframe {
+  width: inherit;
+}
diff --git a/src/features/viewers/PreviewContainer.jsx b/src/features/viewers/PreviewContainer.jsx
index 8c90777ce..c8a96e2c4 100644
--- a/src/features/viewers/PreviewContainer.jsx
+++ b/src/features/viewers/PreviewContainer.jsx
@@ -1,34 +1,23 @@
 import styles from './PreviewContainer.module.css';
-import { AspectRatio } from '@chakra-ui/react';
+import IFrameLoader from './IFrameLoader';
 
 export default function PreviewContainer() {
   return (
     <div className={styles.previewContainer}>
       <div className={styles.previewItem}>
-        <AspectRatio maxW='300' ratio={16 / 9} className={styles.preview}>
-          <iframe
-            title='Default Presenter'
-            src='http://localhost:3000/'
-          ></iframe>
-        </AspectRatio>
+        <IFrameLoader title='Default Presenter' src='http://localhost:3000/' />
         <div className={styles.label}>Default Presenter</div>
       </div>
       <div className={styles.previewItem}>
-        <AspectRatio maxW='300' ratio={16 / 9} className={styles.preview}>
-          <iframe title='Audience' src='http://localhost:3000/'></iframe>
-        </AspectRatio>
+        <IFrameLoader title='Audience' src='http://localhost:3000/' />
         <div className={styles.label}>Audience</div>
       </div>
       <div className={styles.previewItem}>
-        <AspectRatio maxW='300' ratio={16 / 9} className={styles.preview}>
-          <iframe title='Stage Manager' src='http://localhost:3000/'></iframe>
-        </AspectRatio>
+        <IFrameLoader title='Stage Manager' src='http://localhost:3000/' />
         <div className={styles.label}>Stage Manager</div>
       </div>
       <div className={styles.previewItem}>
-        <AspectRatio maxW='300' ratio={16 / 9} className={styles.preview}>
-          <iframe title='Lower Third' src='http://localhost:3000/'></iframe>
-        </AspectRatio>
+        <IFrameLoader title='Lower third' src='http://localhost:3000/' />
         <div className={styles.label}>Lower third</div>
       </div>
     </div>
diff --git a/src/features/viewers/PreviewContainer.module.css b/src/features/viewers/PreviewContainer.module.css
index 4415aef3c..e1f3aca6d 100644
--- a/src/features/viewers/PreviewContainer.module.css
+++ b/src/features/viewers/PreviewContainer.module.css
@@ -11,10 +11,6 @@
   width: 45%;
 }
 
-.preview {
-  margin: auto;
-}
-
 .label {
   padding: 0.1em 4em;
 }