iframe loader

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>
+  );
+}

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;
+}

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}>
+        <IFrameLoader title='Default Presenter' src='http://localhost:3000/' />
-          <iframe
-            title='Default Presenter'
-            src='http://localhost:3000/'
-          ></iframe>
-        </AspectRatio>
         <div className={styles.label}>Default Presenter</div>
       </div>
       <div className={styles.previewItem}>
-        <AspectRatio maxW='300' ratio={16 / 9} className={styles.preview}>
+        <IFrameLoader title='Audience' src='http://localhost:3000/' />
-          <iframe title='Audience' src='http://localhost:3000/'></iframe>
-        </AspectRatio>
         <div className={styles.label}>Audience</div>
       </div>
       <div className={styles.previewItem}>
-        <AspectRatio maxW='300' ratio={16 / 9} className={styles.preview}>
+        <IFrameLoader title='Stage Manager' src='http://localhost:3000/' />
-          <iframe title='Stage Manager' src='http://localhost:3000/'></iframe>
-        </AspectRatio>
         <div className={styles.label}>Stage Manager</div>
       </div>
       <div className={styles.previewItem}>
-        <AspectRatio maxW='300' ratio={16 / 9} className={styles.preview}>
+        <IFrameLoader title='Lower third' src='http://localhost:3000/' />
-          <iframe title='Lower Third' src='http://localhost:3000/'></iframe>
-        </AspectRatio>
         <div className={styles.label}>Lower third</div>
       </div>
     </div>

src/features/viewers/PreviewContainer.module.css

@@ -11,10 +11,6 @@
   width: 45%;
 }
 
-.preview {
-  margin: auto;
-}
-
 .label {
   padding: 0.1em 4em;
 }