Merge pull request #70 from mml-io/lazy-load-in-view

Add lazy load to dynamic view examples

src/components/ExampleView/DocsExampleViewDynamic.tsx

@@ -1,4 +1,6 @@
 import dynamic from "next/dynamic";
+import { useEffect, useRef, useState } from "react";
+import * as React from "react";
 
 import type { DocsExampleViewProps } from "@/src/components/ExampleView/DocsExampleView";
 
@@ -8,5 +10,29 @@ const ExampleViewStatic = dynamic<Partial<DocsExampleViewProps>>(
 );
 
 export default function ExampleView(props: DocsExampleViewProps) {
-  return <ExampleViewStatic {...props} />;
+  const [isVisible, setIsVisible] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!ref.current) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          setIsVisible(entry.isIntersecting);
+        });
+      },
+      {
+        root: null, // viewport
+        rootMargin: "500px", // Load 500px before the element comes into the viewport
+        threshold: 0.01, // Trigger as soon as even 1% of the target is visible
+      },
+    );
+
+    observer.observe(ref.current);
+
+    return () => observer.disconnect();
+  }, []);
+
+  return <div ref={ref}>{isVisible && <ExampleViewStatic {...props} />}</div>;
 }

src/components/ExampleView/ExamplePageExampleView.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import { EditableNetworkedDOM } from "@mml-io/networked-dom-document";
 import { IframeObservableDOMFactory } from "@mml-io/networked-dom-web-runner";
 import * as React from "react";

src/pages/docs/reference/elements/[reference-id].tsx

@@ -1,5 +1,4 @@
 import { createSchemaDefinition, schemaJSON } from "@mml-io/mml-schema";
-import dynamic from "next/dynamic";
 import Head from "next/head";
 import * as React from "react";
 
@@ -9,6 +8,7 @@ import ReferenceNavigation from "@/src/components/Common/ReferenceNavigation";
 import CompatibilityTable from "@/src/components/CompatibilityTable";
 import { Attribute } from "@/src/components/Docs/Attribute";
 import { AttributeGroup } from "@/src/components/Docs/AttributeGroup";
+import ExampleView from "@/src/components/ExampleView/DocsExampleViewDynamic";
 import { MarkDown } from "@/src/config/mdx";
 import * as docsExamples from "@/src/content/docs";
 import { getPageTitle } from "@/src/util";
@@ -41,13 +41,6 @@ export function getStaticProps({ params }: { params: { "reference-id": string }
   return { props: { referenceId } };
 }
 
-const ExampleView = dynamic(
-  () => import("@/src/components/ExampleView/DocsExampleView").then((mod) => mod.DocsExampleView),
-  {
-    ssr: false,
-  },
-);
-
 const schemaDefinition = createSchemaDefinition(schemaJSON);
 
 const DocsPage = ({ referenceId }: { referenceId: string }) => {