perf: add picture tag with webp source for static mode and lazy-load mermaid

Author: rohilsurana

packages/chronicle/src/components/mdx/code.tsx

@@ -1,9 +1,10 @@
 'use client'
 
-import { type ComponentProps, isValidElement, Children } from 'react'
-import { Mermaid } from './mermaid'
+import { type ComponentProps, isValidElement, lazy, Suspense } from 'react'
 import styles from './code.module.css'
 
+const Mermaid = lazy(() => import('./mermaid').then(m => ({ default: m.Mermaid })))
+
 type PreProps = ComponentProps<'pre'> & {
   'data-language'?: string
   title?: string
@@ -21,7 +22,11 @@ export function MdxPre({ children, title, className, ...props }: PreProps) {
   if (isValidElement(children)) {
     const childProps = children.props as { className?: string; children?: string }
     if (childProps.className?.includes('language-mermaid') && typeof childProps.children === 'string') {
-      return <Mermaid chart={childProps.children} />
+      return (
+        <Suspense fallback={<pre className={styles.pre}><code>{childProps.children}</code></pre>}>
+          <Mermaid chart={childProps.children} />
+        </Suspense>
+      )
     }
   }
 

packages/chronicle/src/components/mdx/image.tsx

@@ -3,11 +3,28 @@ import { isLocalImage, isSvg, buildOptimizedUrl, DEFAULT_WIDTH } from '@/lib/ima
 
 type MDXImageProps = ComponentProps<'img'>;
 
+function isStaticMode(): boolean {
+  return typeof window !== 'undefined' && '__STATIC_MODE__' in window && (window as unknown as Record<string, unknown>).__STATIC_MODE__ === true;
+}
+
+function webpUrl(src: string): string {
+  return src.replace(/\.[^.]+$/, '.webp');
+}
+
 export function MDXImage({ src, alt, ...props }: MDXImageProps) {
   if (!src) return null;
 
   const optimize = isLocalImage(src) && !isSvg(src);
-  const imgSrc = optimize ? buildOptimizedUrl(src, DEFAULT_WIDTH) : src;
 
+  if (optimize && isStaticMode()) {
+    return (
+      <picture>
+        <source srcSet={webpUrl(src)} type="image/webp" />
+        <img src={src} alt={alt ?? ''} loading='lazy' decoding='async' {...props} />
+      </picture>
+    );
+  }
+
+  const imgSrc = optimize ? buildOptimizedUrl(src, DEFAULT_WIDTH) : src;
   return <img src={imgSrc} alt={alt ?? ''} loading='lazy' decoding='async' {...props} />;
 }

packages/chronicle/src/components/mdx/index.tsx

@@ -4,11 +4,12 @@ import { Link } from './link'
 import { MdxTable, MdxThead, MdxTbody, MdxTr, MdxTh, MdxTd } from './table'
 import { MdxPre, MdxCode } from './code'
 import { MdxDetails, MdxSummary } from './details'
-import { Mermaid } from './mermaid'
 import { MdxParagraph } from './paragraph'
 import { CalloutContainer, CalloutTitle, CalloutDescription, MdxBlockquote } from '@/components/common/callout'
 import { Tabs } from '@raystack/apsara'
-import { type ComponentProps, useEffect, useState } from 'react'
+import { type ComponentProps, lazy, useEffect, useState, Suspense } from 'react'
+
+const LazyMermaid = lazy(() => import('./mermaid').then(m => ({ default: m.Mermaid })))
 
 function ClientOnly({ children }: { children: React.ReactNode }) {
   const [mounted, setMounted] = useState(false)
@@ -42,7 +43,11 @@ export const mdxComponents: MDXComponents = {
   CalloutTitle,
   CalloutDescription,
   Tabs: MdxTabs,
-  Mermaid,
+  Mermaid: (props: { chart: string }) => (
+    <Suspense fallback={<pre><code>{props.chart}</code></pre>}>
+      <LazyMermaid {...props} />
+    </Suspense>
+  ),
 }
 
 export { MDXImage } from './image'