Merge pull request #35 from openintegrations/iframe-loader

Center loading spinner in iframe
openintegrations · Oct 31, 2024 · d4eab7a · d4eab7a
2 parents dd4a091 + 1e134ec
commit d4eab7a
Showing 1 changed file with 29 additions and 17 deletions.
diff --git a/kits/connect/src/embed-react.tsx b/kits/connect/src/embed-react.tsx
@@ -33,20 +33,18 @@ export const OpenIntConnectEmbed = React.forwardRef(
     // Add a more reliable way to know iframe has fully finished loading
     // by sending message from iframe to parent when ready
     return (
-      <>
-        {loading && (
-          <div className="spinner-container">
-            <svg className="spinner" viewBox="0 0 50 50">
-              <circle
-                className="path"
-                cx="25"
-                cy="25"
-                r="20"
-                fill="none"
-                strokeWidth="5"></circle>
-            </svg>
-          </div>
-        )}
+      <div className="connect-embed-wrapper">
+        <div className={`spinner-container ${loading ? 'loading' : 'loaded'}`}>
+          <svg className="spinner" viewBox="0 0 50 50">
+            <circle
+              className="path"
+              cx="25"
+              cy="25"
+              r="20"
+              fill="none"
+              strokeWidth="5"></circle>
+          </svg>
+        </div>
         <iframe
           width="100%"
           style={{minWidth: '800px'}}
@@ -58,15 +56,29 @@ export const OpenIntConnectEmbed = React.forwardRef(
           }}
           src={url}
           height={height}
-          // Using style for minWidth since iframe props don't accept it.
         />
 
         <style>{`
+        .connect-embed-wrapper {
+          display: flex;
+          height: ${height}px;
+          position: relative;
+        }
         .spinner-container {
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
           display: flex;
           justify-content: center;
           align-items: center;
-          height: 100%;
+          background: white;
+          transition: opacity 0.3s ease;
+        }
+        .spinner-container.loaded {
+          opacity: 0;
+          pointer-events: none;
         }
         .spinner {
           animation: rotate 2s linear infinite;
@@ -98,7 +110,7 @@ export const OpenIntConnectEmbed = React.forwardRef(
           }
         }
       `}</style>
-      </>
+      </div>
     )
   },
 )