seemore 1.4.0 → 1.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "seemore",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "Let AI write the Markdown. Let seemore show it better — zero config documentation framework.",
   "license": "MIT",
   "type": "module",

package/src/app/mdx/D2.tsx

@@ -1,4 +1,6 @@
-import { useEffect, useId, useState } from 'react';
+import { useEffect, useId, useRef, useState } from 'react';
+import { DiagramLoader } from './DiagramLoader.js';
+import { useInView } from './useInView.js';
 
 /**
  * D2 compiles to SVG via a WASM build in the browser — same reasoning as `Mermaid`: doing
@@ -7,10 +9,17 @@ import { useEffect, useId, useState } from 'react';
  */
 export function D2({ chart }: { chart: string }) {
   const id = useId().replace(/[^a-zA-Z0-9]/g, '');
+  const container = useRef<HTMLDivElement>(null);
+  const inView = useInView(container);
   const [svg, setSvg] = useState<string>();
   const [error, setError] = useState<string>();
 
   useEffect(() => {
+    // D2's compile/render pass is synchronous WASM work and can't be interrupted, so a large
+    // diagram freezes the main thread — including any pending navigation — the moment it
+    // starts. Waiting until the diagram is actually scrolled into view keeps that off the
+    // critical path of landing on the page.
+    if (!inView) return;
     let cancelled = false;
 
     void (async () => {
@@ -31,7 +40,7 @@ export function D2({ chart }: { chart: string }) {
     return () => {
       cancelled = true;
     };
-  }, [chart, id]);
+  }, [inView, chart, id]);
 
   if (error !== undefined) {
     return (
@@ -43,11 +52,18 @@ export function D2({ chart }: { chart: string }) {
 
   return (
     <div
+      ref={container}
       className="seemore-d2"
       // The diagram is generated by D2 from the page's own source, not from user input.
       dangerouslySetInnerHTML={svg === undefined ? undefined : { __html: svg }}
     >
-      {svg === undefined ? <pre className="seemore-d2-source">{chart}</pre> : undefined}
+      {svg === undefined ? (
+        inView ? (
+          <DiagramLoader />
+        ) : (
+          <pre className="seemore-d2-source">{chart}</pre>
+        )
+      ) : undefined}
     </div>
   );
 }

package/src/app/mdx/DiagramLoader.tsx

@@ -0,0 +1,11 @@
+/** Shown by `Mermaid`/`D2` while a diagram's synchronous render pass is in progress. */
+export function DiagramLoader() {
+  return (
+    <div className="seemore-diagram-loading" role="status">
+      <span className="seemore-diagram-spinner" aria-hidden="true" />
+      <span className="sr-only">Rendering diagram…</span>
+    </div>
+  );
+}
+
+export default DiagramLoader;

package/src/app/mdx/Mermaid.tsx

@@ -1,4 +1,6 @@
 import { useEffect, useId, useRef, useState } from 'react';
+import { DiagramLoader } from './DiagramLoader.js';
+import { useInView } from './useInView.js';
 
 /**
  * Mermaid runs in the browser.
@@ -11,10 +13,16 @@ import { useEffect, useId, useRef, useState } from 'react';
 export function Mermaid({ chart }: { chart: string }) {
   const id = useId().replace(/[^a-zA-Z0-9]/g, '');
   const container = useRef<HTMLDivElement>(null);
+  const inView = useInView(container);
   const [svg, setSvg] = useState<string>();
   const [error, setError] = useState<string>();
 
   useEffect(() => {
+    // Mermaid's layout pass is synchronous and can't be interrupted, so a large diagram
+    // freezes the main thread — including any pending navigation — the moment it starts.
+    // Waiting until the diagram is actually scrolled into view keeps that off the critical
+    // path of landing on the page.
+    if (!inView) return;
     let cancelled = false;
 
     void (async () => {
@@ -32,7 +40,7 @@ export function Mermaid({ chart }: { chart: string }) {
     return () => {
       cancelled = true;
     };
-  }, [chart, id]);
+  }, [inView, chart, id]);
 
   if (error !== undefined) {
     return (
@@ -49,7 +57,13 @@ export function Mermaid({ chart }: { chart: string }) {
       // The diagram is generated by mermaid from the page's own source, not from user input.
       dangerouslySetInnerHTML={svg === undefined ? undefined : { __html: svg }}
     >
-      {svg === undefined ? <pre className="seemore-mermaid-source">{chart}</pre> : undefined}
+      {svg === undefined ? (
+        inView ? (
+          <DiagramLoader />
+        ) : (
+          <pre className="seemore-mermaid-source">{chart}</pre>
+        )
+      ) : undefined}
     </div>
   );
 }

package/src/app/mdx/useInView.ts

@@ -0,0 +1,31 @@
+import { useEffect, useState, type RefObject } from 'react';
+
+/**
+ * True once the element has entered (or nearly entered) the viewport, and stays true
+ * afterward — used to defer starting expensive diagram rendering until it's actually needed,
+ * rather than the moment a page mounts.
+ */
+export function useInView(ref: RefObject<Element | null>): boolean {
+  const [inView, setInView] = useState(false);
+
+  useEffect(() => {
+    if (inView) return;
+    const node = ref.current;
+    if (node === null) return;
+
+    // Diagrams sit well below the fold on a typical docs page; a margin means scrolling to
+    // one feels instant rather than triggering a visible render-in-place.
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry?.isIntersecting) setInView(true);
+      },
+      { rootMargin: '200px' },
+    );
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [ref, inView]);
+
+  return inView;
+}
+
+export default useInView;

package/src/app/styles/globals.css

@@ -292,6 +292,14 @@
     @apply my-6 rounded-lg border border-fd-border p-4 text-sm text-fd-muted-foreground;
   }
 
+  .seemore-diagram-loading {
+    @apply my-6 flex items-center justify-center py-8;
+  }
+
+  .seemore-diagram-spinner {
+    @apply h-6 w-6 animate-spin rounded-full border-2 border-fd-muted-foreground/30 border-t-fd-muted-foreground;
+  }
+
   /* Inline editing (dev only, `content.edit`). The article is the positioning context for
      the editor layer, which sits over the block being edited. */
   .seemore-editable {