improvement(dashboards): lazy-load markdown dashboard embeds

Author: TheodoreSpeaks

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/code-block.tsx

@@ -1,4 +1,4 @@
-import { useContext, useEffect, useState } from 'react'
+import { lazy, Suspense, useContext, useEffect, useState } from 'react'
 import {
   chipVariants,
   cn,
@@ -11,14 +11,18 @@ import {
 import { Check, ChevronDown, Code, Duplicate, Eye, Wrap } from '@sim/emcn/icons'
 import type { ReactNodeViewProps } from '@tiptap/react'
 import { NodeViewContent, NodeViewWrapper, ReactNodeViewRenderer } from '@tiptap/react'
-import { DashboardEmbed } from '@/components/dashboards/dashboard-embed'
-import { DASHBOARD_EMBED_LANGUAGE } from '@/lib/dashboards/spec'
+import { DASHBOARD_EMBED_LANGUAGE } from '@/lib/dashboards/embed-language'
 import { MarkdownStreamingContext } from '@/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/markdown-streaming-context'
 import { looksLikeMermaid, MermaidDiagram } from '../mermaid-diagram'
 import { MarkdownCodeBlock } from './code-block-schema'
 import { detectLanguage } from './detect-language'
 import { useEditorEditable } from './use-editor-editable'
 
+/** Kept out of every rich-markdown surface's graph until a document actually holds a dashboard. */
+const DashboardEmbed = lazy(() =>
+  import('@/components/dashboards/dashboard-embed').then((m) => ({ default: m.DashboardEmbed }))
+)
+
 const PLAIN = 'plain'
 const MERMAID = 'mermaid'
 
@@ -232,7 +236,9 @@ function CodeBlockView({ node, updateAttributes, editor, getPos }: ReactNodeView
           }}
         >
           {isDashboard ? (
-            <DashboardEmbed source={text} isStreaming={isStreaming} />
+            <Suspense fallback={null}>
+              <DashboardEmbed source={text} isStreaming={isStreaming} />
+            </Suspense>
           ) : (
             <MermaidDiagram definition={text} className='mermaid-diagram-frame' />
           )}

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/slash-command/commands.ts

@@ -15,7 +15,7 @@ import {
   TextQuote,
 } from '@sim/emcn/icons'
 import type { Editor, Range } from '@tiptap/core'
-import { DASHBOARD_EMBED_LANGUAGE } from '@/lib/dashboards/spec'
+import { DASHBOARD_EMBED_LANGUAGE } from '@/lib/dashboards/embed-language'
 
 /** A time-series starter; the table id is left for the author to fill in. */
 const DASHBOARD_EMBED_STARTER = `title: Rows over time

apps/sim/lib/dashboards/embed-language.ts

@@ -0,0 +1,2 @@
+/** The fence language that renders a dashboard embed in markdown; kept apart from the parser. */
+export const DASHBOARD_EMBED_LANGUAGE = 'dashboard'

apps/sim/lib/dashboards/spec.ts

@@ -23,8 +23,6 @@ import {
 
 /** Dashboard YAML is bounded before parsing; writes report the same limit without decoding. */
 export const MAX_DASHBOARD_SOURCE_BYTES = 128 * 1024
-/** A dashboard fence embedded in a markdown document. */
-export const DASHBOARD_EMBED_LANGUAGE = 'dashboard'
 const MAX_DASHBOARD_EMBED_SOURCE_BYTES = 32 * 1024
 const MAX_DASHBOARD_EMBED_BLOCKS = 12
 export const DASHBOARD_SOURCE_TOO_LARGE = 'Dashboard source exceeds 128 KB'

scripts/check-tool-registry-boundary.baseline.json

@@ -442,33 +442,33 @@
       }
     },
     "app/workspace/[workspaceId]/skills/[skillId]/page.tsx": {
-      "modules": 1421,
+      "modules": 1457,
       "gateways": {
-        "apps/sim/app/workspace/[workspaceId]/skills/[skillId]/skill-detail.tsx": 1420,
+        "apps/sim/app/workspace/[workspaceId]/skills/[skillId]/skill-detail.tsx": 1456,
         "apps/sim/triggers/registry.ts": 528,
-        "apps/sim/blocks/registry.ts": 376,
-        "apps/sim/blocks/registry-maps.ts": 374,
-        "apps/sim/app/workspace/[workspaceId]/skills/components/skill-fields/index.ts": 232,
-        "apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/rich-markdown-field.tsx": 229,
-        "apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/editor-extensions.ts": 93,
-        "apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/mention/index.ts": 82
+        "apps/sim/blocks/registry.ts": 374,
+        "apps/sim/blocks/registry-maps.ts": 372,
+        "apps/sim/app/workspace/[workspaceId]/skills/components/skill-fields/index.ts": 268,
+        "apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/rich-markdown-field.tsx": 265,
+        "apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/editor-extensions.ts": 117,
+        "apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/mention/index.ts": 92
       }
     },
     "app/workspace/[workspaceId]/skills/error.tsx": {
       "modules": 3,
       "gateways": {}
     },
     "app/workspace/[workspaceId]/skills/new/page.tsx": {
-      "modules": 1419,
+      "modules": 1455,
       "gateways": {
-        "apps/sim/app/workspace/[workspaceId]/skills/new/skill-create.tsx": 1418,
+        "apps/sim/app/workspace/[workspaceId]/skills/new/skill-create.tsx": 1454,
         "apps/sim/triggers/registry.ts": 528,
-        "apps/sim/blocks/registry.ts": 376,
-        "apps/sim/blocks/registry-maps.ts": 374,
-        "apps/sim/app/workspace/[workspaceId]/skills/components/skill-fields/index.ts": 232,
-        "apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/rich-markdown-field.tsx": 229,
-        "apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/editor-extensions.ts": 93,
-        "apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/mention/index.ts": 82
+        "apps/sim/blocks/registry.ts": 374,
+        "apps/sim/blocks/registry-maps.ts": 372,
+        "apps/sim/app/workspace/[workspaceId]/skills/components/skill-fields/index.ts": 268,
+        "apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/rich-markdown-field.tsx": 265,
+        "apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/editor-extensions.ts": 117,
+        "apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/mention/index.ts": 92
       }
     },
     "app/workspace/[workspaceId]/skills/page.tsx": {