docs: add deferred mount to playground ember (#3618)

No issue, but discussed in Discord. 

Closes #

## Changes:

- Adds an intersection observer so embedded Playgrounds can optionally mount after they come into view


Can be seen on this preview page: https://fix-playground-intersection.excaliburjs.pages.dev/docs/physics

Author: chrisk-7777

site/docs/10-physics/08-a-physics.mdx

@@ -47,7 +47,8 @@ const game = new Engine({
 
 <PlaygroundEmbed 
   title="Physics"
-  code={PhysicsExample} 
+  code={PhysicsExample}
+  mount="visible"
 />
 
 ## Other Physics Settings

site/src/components/docs/PlaygroundEmbed.tsx

@@ -1,13 +1,15 @@
-import * as lz from "lz-string";
+import * as lz from 'lz-string';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import { useEffect, useRef, useState } from 'react';
 
-type Props =  {
+type Props = {
   autoplay?: boolean;
   code: string;
   title?: string;
-}
+  mount?: 'immediately' | 'visible';
+};
 
-const style = {
+const rootStyle = {
   width: '100%',
   maxWidth: '640px',
   borderRadius: '12px',
@@ -17,24 +19,68 @@ const style = {
   display: 'block',
   height: '900px',
   border: 0,
-  overflow: 'hidden',
-}
+  overflow: 'hidden'
+};
+
+const iframeStyle = {
+  width: '100%',
+  display: 'block',
+  height: '100%',
+  border: 0,
+  overflow: 'hidden'
+};
+
+export default (props: Props) => {
+  const { autoplay = true, code, title, mount = 'immediately' } = props;
+
+  const [isReady, setIsReady] = useState(mount === 'immediately');
+  const ref = useRef<HTMLDivElement>(null);
 
-export default ({ autoplay = true, code, title }: Props) => {
   const params = new URLSearchParams({
     embed: 'true',
     code: lz.compressToEncodedURIComponent(code)
   });
 
   const { siteConfig } = useDocusaurusContext();
   const { customFields } = siteConfig;
-  const  { playgroundUrl } = customFields;
-  
+  const { playgroundUrl } = customFields;
+
   if (autoplay) {
     params.set('autoplay', 'true');
   }
-  
+
   const src = `${playgroundUrl}/?${params.toString()}`;
 
-  return <iframe src={src} style={style} title={title} />
-}
+  useEffect(() => {
+    if (mount !== 'visible') {
+      return;
+    }
+
+    const updateEntry = (entries: IntersectionObserverEntry[]): void => {
+      // This is a one-way gate: 
+      // Exiting the viewpoint will _not_ unmount the Playground
+      if (!entries.every((entry) => entry.isIntersecting)) {
+        return;
+      }
+
+      setIsReady(true);
+    };
+
+    const node = ref?.current;
+    const hasIOSupport = !!window.IntersectionObserver;
+
+    if (!node || !hasIOSupport) return;
+
+    // When 25% of the Playground is visible it is considered and mounted. 
+    const observer = new IntersectionObserver(updateEntry, { threshold: 0.25 });
+    observer.observe(node);
+
+    return () => observer.disconnect();
+  }, [mount]);
+
+  return (
+    <div ref={ref} style={rootStyle}>
+      {isReady ? <iframe src={src} style={iframeStyle} title={title} /> : null}
+    </div>
+  );
+};