@marimo-team/islands 0.23.10-dev51 → 0.23.10-dev53

package/dist/main.js

@@ -22,17 +22,17 @@ import { _ as Logger, c as Objects, g as cn, h as Events, i as NOT_SET, l as use
 import { t as require_react } from "./react-DA-nE2FX.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-CEbnTgxf.js";
 import { n as Copy, r as toast, t as copyToClipboard } from "./copy-UqRYxiOg.js";
-import { $ as reducer, B as safeExtractSetUIElementMessageBuffers, Bn as CircleAlert, Bt as DATA_TYPE_ICON, C as AccordionContent, Cn as Root2$1, Ct as Checkbox, Dn as Table2, Dt as PathBuilder, E as BorderAllIcon, En as Trash2, F as base64ToDataView, Fn as Eye, H as getMarimoExportContext, Ht as require_client, It as jotaiJsonStorage, J as getCellNames, Jt as requestClientAtom, K as createActions, Kt as convertStatsName, L as dataViewToBase64, Ln as Database, Mn as Layers, Mt as generateUUID, Nn as Info, On as PaintRoller, Ot as Paths, Pn as FileText, Pt as repl, Q as numColumnsAtom, Rn as Columns2, S as Accordion, Sn as Item$1, St as normalizeName, T as AccordionTrigger, Tt as MarkdownLanguageAdapter, U as hasTrustedExportContext, V as renderHTML, Vn as Braces, W as hasRunAnyCellAtom, X as notebookAtom, Xt as isUninstantiated, Y as hasOnlyOneCellAtom, Yt as useRequestClient, Z as notebookOutline, _n as atomWithStorage, a as useCellFocusActions, an as parseDataset, bt as getValidName, cn as HTMLCellId, ct as initialModeAtom, dn as findCellId, et as useCellActions, f as isOutputEmpty, fn as OBJECT_ID_ATTR, ft as outputIsLoading, gn as atomWithReducer, ht as headingToIdentifier, i as LazyAnyLanguageCodeMirror, in as parseAttrValue, jn as LoaderCircle, jt as DeferredRequestRegistry, k as ChevronDownIcon, lt as kioskModeAtom, mn as jsonParseWithSpecialChar, mt as isErrorMime, n as Spinner, o as useLastFocusedCellId, on as parseInitialValue, p as useExpandedConsoleOutput, pn as RANDOM_ID_ATTR, pt as outputIsStale, qt as getRequestClient, rt as createCell, s as maybeAddAltairImport, st as getInitialAppMode, tn as NotebookScopedLocalStorage, tt as useCellIds, un as UIElementId, vn as selectAtom, w as AccordionItem, wn as Trigger2, wt as customPythonLanguageSupport, xn as Content2, xt as isInternalCellName, zt as PluralWords, __tla as __tla_0 } from "./html-to-image-DXSdAI_Y.js";
+import { $ as reducer, B as safeExtractSetUIElementMessageBuffers, Bn as CircleAlert, Bt as DATA_TYPE_ICON, C as AccordionContent, Cn as Root2$1, Ct as Checkbox, Dn as Table2, Dt as PathBuilder, E as BorderAllIcon, En as Trash2, F as base64ToDataView, Fn as Eye, H as getMarimoExportContext, Ht as require_client, It as jotaiJsonStorage, J as getCellNames, Jt as requestClientAtom, K as createActions, Kt as convertStatsName, L as dataViewToBase64, Ln as Database, Mn as Layers, Mt as generateUUID, Nn as Info, On as PaintRoller, Ot as Paths, Pn as FileText, Pt as repl, Q as numColumnsAtom, Rn as Columns2, S as Accordion, Sn as Item$1, St as normalizeName, T as AccordionTrigger, Tt as MarkdownLanguageAdapter, U as hasTrustedExportContext, V as renderHTML, Vn as Braces, W as hasRunAnyCellAtom, X as notebookAtom, Xt as isUninstantiated, Y as hasOnlyOneCellAtom, Yt as useRequestClient, Z as notebookOutline, _n as atomWithStorage, a as useCellFocusActions, an as parseDataset, bt as getValidName, cn as HTMLCellId, ct as initialModeAtom, dn as findCellId, et as useCellActions, f as isOutputEmpty, fn as OBJECT_ID_ATTR, ft as outputIsLoading, gn as atomWithReducer, ht as headingToIdentifier, i as LazyAnyLanguageCodeMirror, in as parseAttrValue, jn as LoaderCircle, jt as DeferredRequestRegistry, k as ChevronDownIcon, lt as kioskModeAtom, mn as jsonParseWithSpecialChar, mt as isErrorMime, n as Spinner, o as useLastFocusedCellId, on as parseInitialValue, p as useExpandedConsoleOutput, pn as RANDOM_ID_ATTR, pt as outputIsStale, qt as getRequestClient, rt as createCell, s as maybeAddAltairImport, st as getInitialAppMode, tn as NotebookScopedLocalStorage, tt as useCellIds, un as UIElementId, vn as selectAtom, w as AccordionItem, wn as Trigger2, wt as customPythonLanguageSupport, xn as Content2, xt as isInternalCellName, zt as PluralWords, __tla as __tla_0 } from "./html-to-image-BEeeScWH.js";
 import { __tla as __tla_1 } from "./chunk-5FQGJX7Z-BbqSm5gU.js";
 import { o as useSize, s as Root$1, u as createLucideIcon } from "./dist-Dk6PV_d3.js";
 import { A as SquareFunction, C as DEFAULT_COLOR_SCHEME, D as SCALE_TYPE_DESCRIPTIONS, E as EMPTY_VALUE$1, O as TIME_UNIT_DESCRIPTIONS, S as DEFAULT_AGGREGATION, T as DEFAULT_TIME_UNIT, _ as AGGREGATION_TYPE_DESCRIPTIONS, a as AGGREGATION_FNS$1, b as COLOR_SCHEMES, c as COLOR_BY_FIELDS, d as NONE_VALUE, f as SELECTABLE_DATA_TYPES, g as TIME_UNITS, h as STRING_AGGREGATION_FNS, i as convertDataTypeToSelectable, j as ChartColumn, k as escapeFieldName, l as COMBINED_TIME_UNITS, m as SORT_TYPES, n as createSpecWithoutData, o as BIN_AGGREGATION, p as SINGLE_TIME_UNITS, r as isFieldSet, s as CHART_TYPES, t as augmentSpecWithData, u as ChartType, v as AGGREGATION_TYPE_ICON, w as DEFAULT_MAX_BINS_FACET, x as COUNT_FIELD, y as CHART_TYPE_ICON } from "./spec-X7FwLJni.js";
-import { $ as contextAwarePanelOpen, $t as $fae977aafc393c5c$export$6b862160d295c8e, A as prettifyRowCount, At as SELECT_COLUMN_ID, B as DatePicker, Bt as TabsContent, C as downloadSizeLimitAtom, Ct as DelayMount, D as ErrorState, Dt as loadTableAndRawData, E as EmptyState, Et as getPageIndexForRow, F as ContextMenuSeparator, Ft as Maps, G as CommandEmpty, Gt as ChartLoadingState, H as Combobox, Ht as TabsTrigger, I as ContextMenuTrigger, It as dateToLocalISODate, J as CommandList, Jt as RenderTextWithLinks, K as CommandInput, Kt as LazyVegaEmbed, L as useInternalStateWithSync, Lt as dateToLocalISODateTime, M as ContextMenu, Mt as toFieldTypes, N as ContextMenuContent, Nt as getMimeValues, O as LoadingState, Ot as loadTableData, P as ContextMenuItem, Pt as isNullishFilter, Q as PANEL_TYPES, Qt as $fae977aafc393c5c$export$588937bcd60ade55, R as useSelectList, Rt as dateToLocalISOTime, S as Filenames, St as ColumnChartSpecModel, T as ColumnPreviewContainer, Tt as usePrevious$1, U as ComboboxItem, Ut as ChartErrorState, V as DateRangePicker, Vt as TabsList, W as Command, Wt as ChartInfoState, X as smartMatch, Xt as HtmlOutput, Y as CommandSeparator, Yt as Kbd, Z as ContextAwarePanelItem, Zt as EmotionCacheProvider, _ as ADD_PRINTING_CLASS, _t as NAMELESS_COLUMN_PREFIX, an as Ellipsis, at as Toggle, b as downloadHTMLAsImage, bt as renderCellValue, c as Slide, cn as ChevronsUpDown, d as RadioGroupItem, dn as ChevronsDownUp, dt as Table, en as TextWrap, et as contextAwarePanelOwner, f as JsonOutput, fn as ChevronLeft, ft as TableBody, g as InstallPackageButton, gt as TableRow, h as DataTable, ht as TableHeader, it as slotsController, j as getColumnCountForDisplay, jt as TOO_MANY_ROWS, k as prettifyRowColumnCount, kt as INDEX_COLUMN_NAME, l as Switch, ln as ChevronsRight, lt as Fill, m as OutputRenderer, mt as TableHead, n as marimoVersionAtom, nn as Funnel, nt as isCellAwareAtom, o as SLIDE_TYPE_OPTIONS_BY_VALUE, on as Download, p as OutputArea, pn as ArrowDownWideNarrow, pt as TableCell, q as CommandItem, qt as useOverflowDetection, r as showCodeInRunModeAtom, rn as EyeOff, rt as SlotNames, sn as Code, t as useNotebookCodeAvailable, tn as GripHorizontal, tt as contextAwarePanelType, u as RadioGroup, un as ChevronsLeft, ut as Provider$1, v as downloadBlob, vt as generateColumns, w as ColumnName, wt as useIntersectionObserver, x as Progress, xt as ColumnChartContext, y as downloadByURL, yt as inferFieldTypes, z as CompactChipRow, zt as Tabs, __tla as __tla_2 } from "./code-visibility-B5jSPI0-.js";
+import { $ as contextAwarePanelOpen, $t as $fae977aafc393c5c$export$6b862160d295c8e, A as prettifyRowCount, At as SELECT_COLUMN_ID, B as DatePicker, Bt as TabsContent, C as downloadSizeLimitAtom, Ct as DelayMount, D as ErrorState, Dt as loadTableAndRawData, E as EmptyState, Et as getPageIndexForRow, F as ContextMenuSeparator, Ft as Maps, G as CommandEmpty, Gt as ChartLoadingState, H as Combobox, Ht as TabsTrigger, I as ContextMenuTrigger, It as dateToLocalISODate, J as CommandList, Jt as RenderTextWithLinks, K as CommandInput, Kt as LazyVegaEmbed, L as useInternalStateWithSync, Lt as dateToLocalISODateTime, M as ContextMenu, Mt as toFieldTypes, N as ContextMenuContent, Nt as getMimeValues, O as LoadingState, Ot as loadTableData, P as ContextMenuItem, Pt as isNullishFilter, Q as PANEL_TYPES, Qt as $fae977aafc393c5c$export$588937bcd60ade55, R as useSelectList, Rt as dateToLocalISOTime, S as Filenames, St as ColumnChartSpecModel, T as ColumnPreviewContainer, Tt as usePrevious$1, U as ComboboxItem, Ut as ChartErrorState, V as DateRangePicker, Vt as TabsList, W as Command, Wt as ChartInfoState, X as smartMatch, Xt as HtmlOutput, Y as CommandSeparator, Yt as Kbd, Z as ContextAwarePanelItem, Zt as EmotionCacheProvider, _ as ADD_PRINTING_CLASS, _t as NAMELESS_COLUMN_PREFIX, an as Ellipsis, at as Toggle, b as downloadHTMLAsImage, bt as renderCellValue, c as Slide, cn as ChevronsUpDown, d as RadioGroupItem, dn as ChevronsDownUp, dt as Table, en as TextWrap, et as contextAwarePanelOwner, f as JsonOutput, fn as ChevronLeft, ft as TableBody, g as InstallPackageButton, gt as TableRow, h as DataTable, ht as TableHeader, it as slotsController, j as getColumnCountForDisplay, jt as TOO_MANY_ROWS, k as prettifyRowColumnCount, kt as INDEX_COLUMN_NAME, l as Switch, ln as ChevronsRight, lt as Fill, m as OutputRenderer, mt as TableHead, n as marimoVersionAtom, nn as Funnel, nt as isCellAwareAtom, o as SLIDE_TYPE_OPTIONS_BY_VALUE, on as Download, p as OutputArea, pn as ArrowDownWideNarrow, pt as TableCell, q as CommandItem, qt as useOverflowDetection, r as showCodeInRunModeAtom, rn as EyeOff, rt as SlotNames, sn as Code, t as useNotebookCodeAvailable, tn as GripHorizontal, tt as contextAwarePanelType, u as RadioGroup, un as ChevronsLeft, ut as Provider$1, v as downloadBlob, vt as generateColumns, w as ColumnName, wt as useIntersectionObserver, x as Progress, xt as ColumnChartContext, y as downloadByURL, yt as inferFieldTypes, z as CompactChipRow, zt as Tabs, __tla as __tla_2 } from "./code-visibility-k6uasT7Y.js";
 import { c as Calendar, i as createReducerAndAtoms, n as useOnUnmount, o as ToggleLeft, t as useOnMount } from "./useLifecycle-00mO3OSS.js";
 import { t as Check } from "./check-BCaJeT-J.js";
 import { A as Icon, C as logNever, D as $18f2051aff69b9bf$export$a54013f0d02a8f82, E as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7, F as createCollection, I as X, M as clamp$2, N as usePrevious$2, P as useDirection, R as ChevronDown, S as assertNever, a as SelectGroup, c as SelectSeparator, d as NativeSelect, i as SelectContent, j as Trigger$1, l as SelectTrigger, n as capitalize, o as SelectItem, r as Select, s as SelectLabel, t as Strings, u as SelectValue, w as $a916eb452884faea$export$b7a616150fdb9f44 } from "./strings-J57tzLr3.js";
 import { B as $64fa3d84918910a7$export$4d86445c2cf5e3, C as DropdownMenuTrigger, Ft as $65484d02dcb7eb3e$export$457c3d6518dd4c6f, It as $3ef42575df84b30b$export$9d1611c77c2fe928, W as $64fa3d84918910a7$export$df3a06d6289f983e, Wt as $ff5963eb1fccf552$export$e08e3b67e392101e, X as useDebouncedCallback, Y as useDebounceControlledState, a as NumberField, d as roundToFractionDigits, f as DropdownMenu, g as DropdownMenuLabel, gn as ChevronRight, h as DropdownMenuItem, hn as Circle, i as OnBlurredInput, l as prettyNumber, m as DropdownMenuGroup, n as DebouncedNumberInput, o as maxFractionDigitsForSteps, ot as $f7dceffc5ad7768b$export$4e328f61c538687f, p as DropdownMenuContent, pt as $6179b936705e76d3$export$ae780daf29e6d456, r as Input, st as $701a24aa0da5b062$export$ea18c227d4417cc3, t as DebouncedInput, u as prettyScientificNumber, v as DropdownMenuSeparator, xt as $458b0a5536c1a7cf$export$40bfa8c7b0832715, y as DropdownMenuShortcut, z as $64fa3d84918910a7$export$29f1550f4b0d4415 } from "./input-OdWHkobi.js";
 import { _ as isWasm, c as asRemoteURL, d as isStaticNotebook, f as appendQueryParams, g as Deferred, m as require_cuid2, u as getStaticVirtualFiles, v as CircleQuestionMark } from "./toDate-d8RCRrRd.js";
-import { a as MarimoIncomingMessageEvent, c as MarimoValueUpdateEvent, d as Square, f as File, i as PythonIcon, l as createInputEvent, n as blobToString, o as MarimoValueInputEvent, r as filesToBase64, s as MarimoValueReadyEvent, t as processOutput, u as deserializeBlob } from "./process-output-uozPQhBl.js";
+import { a as MarimoIncomingMessageEvent, c as MarimoValueUpdateEvent, d as Square, f as File, i as PythonIcon, l as createInputEvent, n as blobToString, o as MarimoValueInputEvent, r as filesToBase64, s as MarimoValueReadyEvent, t as processOutput, u as deserializeBlob } from "./process-output-CO5geDQU.js";
 import { n as Trash, r as Pencil, t as BulkEdit } from "./types-ChtMFmZ2.js";
 import { n as require_prop_types, r as Plus, t as ErrorBoundary } from "./ErrorBoundary-DpbaKVv7.js";
 import { t as require_react_dom } from "./react-dom-BTJzcVJ9.js";
@@ -8558,7 +8558,7 @@ let __tla = Promise.all([
       };
     }
   };
-  var LazyChatbot = import_react.lazy(() => import("./chat-ui-BxwraqS-.js").then((e) => ({
+  var LazyChatbot = import_react.lazy(() => import("./chat-ui-BHx9bULO.js").then((e) => ({
     default: e.Chatbot
   }))), messageSchema = array(object({
     id: string(),
@@ -36187,7 +36187,7 @@ ${c}
   function _temp2$2(e) {
     e.target === e.currentTarget && e.key === "Enter" && (e.preventDefault(), e.stopPropagation(), e.currentTarget.click());
   }
-  var LazySlidesComponent = import_react.lazy(() => import("./reveal-component-CBonF0Hv.js"));
+  var LazySlidesComponent = import_react.lazy(() => import("./reveal-component-CnhpfF5l.js"));
   const SlidesLayoutRenderer = ({ layout: e, setLayout: r, cells: c, mode: l }) => {
     var _a3;
     let u = useAtomValue(kioskModeAtom), d = l === "read" || u, f = useAtomValue(numColumnsAtom) > 1, [p, m] = (0, import_react.useState)(null), { slideCells: h, skippedIds: g, noOutputIds: _, slideTypes: v, startCellIndex: y } = (0, import_react.useMemo)(() => computeSlideCellsInfo(c, e), [

package/dist/{process-output-uozPQhBl.js → process-output-CO5geDQU.js}

@@ -1,6 +1,6 @@
 import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-CEbnTgxf.js";
-import { at as parseHtmlContent, it as ansiToPlainText } from "./html-to-image-DXSdAI_Y.js";
+import { at as parseHtmlContent, it as ansiToPlainText } from "./html-to-image-BEeeScWH.js";
 import { u as createLucideIcon } from "./dist-Dk6PV_d3.js";
 import { t as Strings } from "./strings-J57tzLr3.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-DebpN0FN.js";

package/dist/{reveal-component-CBonF0Hv.js → reveal-component-CnhpfF5l.js}

@@ -6,10 +6,10 @@ import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { _ as Logger, g as cn, h as Events, l as useEventListener, t as Button } from "./button-C5K9fIPF.js";
 import { t as require_react } from "./react-DA-nE2FX.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-CEbnTgxf.js";
-import { lt as kioskModeAtom } from "./html-to-image-DXSdAI_Y.js";
+import { lt as kioskModeAtom } from "./html-to-image-BEeeScWH.js";
 import "./chunk-5FQGJX7Z-BbqSm5gU.js";
 import { u as createLucideIcon } from "./dist-Dk6PV_d3.js";
-import { a as DEFAULT_SLIDE_TYPE, c as Slide, ct as PanelResizeHandle, i as DEFAULT_DECK_TRANSITION, in as Expand, ot as Panel, rn as EyeOff, s as SlideSidebar, sn as Code, st as PanelGroup, t as useNotebookCodeAvailable } from "./code-visibility-B5jSPI0-.js";
+import { a as DEFAULT_SLIDE_TYPE, c as Slide, ct as PanelResizeHandle, i as DEFAULT_DECK_TRANSITION, in as Expand, ot as Panel, rn as EyeOff, s as SlideSidebar, sn as Code, st as PanelGroup, t as useNotebookCodeAvailable } from "./code-visibility-k6uasT7Y.js";
 import { X as useDebouncedCallback } from "./input-OdWHkobi.js";
 import "./toDate-d8RCRrRd.js";
 import "./react-dom-BTJzcVJ9.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.23.10-dev51",
+  "version": "0.23.10-dev53",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

package/src/__tests__/setup.ts

@@ -20,6 +20,22 @@ globalThis.ResizeObserver ??= class {
   }
 } as never;
 
+// mock implementation because jsdom doesn't support IntersectionObserver
+globalThis.IntersectionObserver ??= class {
+  observe(_target: Element) {
+    /* noop */
+  }
+  unobserve(_target: Element) {
+    /* noop */
+  }
+  disconnect() {
+    /* noop */
+  }
+  takeRecords() {
+    return [];
+  }
+} as never;
+
 // Global setup for all tests
 beforeEach(() => {
   // Reset all mocks before each test

package/src/components/editor/cell/code/cell-editor.tsx

@@ -2,8 +2,9 @@
 import { historyField } from "@codemirror/commands";
 import { EditorState, StateEffect } from "@codemirror/state";
 import { EditorView, ViewPlugin } from "@codemirror/view";
+import { useIntersectionObserver } from "@uidotdev/usehooks";
 import { useAtom, useAtomValue } from "jotai";
-import React, { memo, useEffect, useMemo, useRef } from "react";
+import React, { memo, useEffect, useMemo, useRef, useState } from "react";
 import useEvent from "react-use-event-hook";
 import { Button } from "@/components/ui/button";
 import { DelayMount } from "@/components/utils/delay-mount";
@@ -14,6 +15,7 @@ import { usePendingDeleteService } from "@/core/cells/pending-delete-service";
 import type { CellData, CellRuntimeState } from "@/core/cells/types";
 import { setupCodeMirror } from "@/core/codemirror/cm";
 import { acceptCompletionOnEnterAtom } from "@/core/codemirror/completion/accept-on-enter-atom";
+import { editorMountScheduler } from "@/core/codemirror/editor-mount-scheduler";
 import {
   getInitialLanguageAdapter,
   languageAdapterState,
@@ -45,6 +47,7 @@ import {
 } from "../../navigation/navigation";
 import { useDeleteCellCallback } from "../useDeleteCell";
 import { useSplitCellCallback } from "../useSplitCell";
+import { CodePlaceholder } from "./code-placeholder";
 import { LanguageToggles } from "./language-toggle";
 
 export interface CellEditorProps
@@ -405,38 +408,45 @@ const CellEditorInternal = ({
     // Clear the serialized state so that we don't re-create the editor next time
     cellActions.clearSerializedEditorState({ cellId });
   });
+  const [isEditorMounted, setIsEditorMounted] = useState(
+    serializedEditorState !== null,
+  );
 
+  // Build the editor. Deserialize eagerly; otherwise queue an async build so
+  // large notebooks stay responsive while editors come online progressively.
   useEffect(() => {
-    if (serializedEditorState === null) {
-      if (editorViewRef.current === null) {
-        handleInitializeEditor();
-      } else {
-        // If the editor already exists, reconfigure it with the new extensions.
-        handleReconfigureEditor();
-      }
-    } else {
-      handleDeserializeEditor();
+    if (editorViewRef.current !== null) {
+      setIsEditorMounted(true);
+      return;
     }
-
-    if (
-      editorViewRef.current !== null &&
-      editorViewParentRef &&
-      editorViewParentRef.current !== null
-    ) {
-      // Always replace the children in case the editor view was re-created.
-      editorViewParentRef.current.replaceChildren(editorViewRef.current.dom);
+    if (serializedEditorState !== null) {
+      handleDeserializeEditor();
+      setIsEditorMounted(true);
+      return;
     }
+    editorMountScheduler.request(cellId, () => {
+      if (editorViewRef.current !== null) {
+        return;
+      }
+      handleInitializeEditor();
+      setIsEditorMounted(true);
+    });
+    return () => editorMountScheduler.cancel(cellId);
   }, [
-    handleInitializeEditor,
-    handleReconfigureEditor,
-    handleDeserializeEditor,
+    cellId,
     editorViewRef,
-    editorViewParentRef,
+    handleDeserializeEditor,
+    handleInitializeEditor,
     serializedEditorState,
-    // Props to trigger reconfiguration
-    extensions,
   ]);
 
+  useEffect(() => {
+    if (editorViewRef.current === null) {
+      return;
+    }
+    handleReconfigureEditor();
+  }, [handleReconfigureEditor, extensions, editorViewRef]);
+
   // Destroy the editor when the component is unmounted
   useEffect(() => {
     const ev = editorViewRef.current;
@@ -445,6 +455,23 @@ const CellEditorInternal = ({
     };
   }, [editorViewRef]);
 
+  // Prioritize building this cell's editor when it scrolls into view, so the
+  // visible region fills in first instead of waiting for the top-to-bottom
+  // queue. The margin builds cells just before they reach the viewport.
+  const [intersectionRef, intersection] = useIntersectionObserver({
+    rootMargin: "300px 0px",
+  });
+  useEffect(() => {
+    if (isEditorMounted) {
+      return;
+    }
+    if (intersection?.isIntersecting) {
+      editorMountScheduler.prioritize(cellId);
+    } else {
+      editorMountScheduler.deprioritize(cellId);
+    }
+  }, [isEditorMounted, intersection?.isIntersecting, cellId]);
+
   const navigationProps = useCellEditorNavigationProps(cellId, editorViewRef);
 
   let editorClassName = "";
@@ -489,14 +516,22 @@ const CellEditorInternal = ({
       runCell={handleRunCell}
       outputArea={outputArea}
     >
-      <div className="relative w-full" {...navigationProps}>
-        <CellCodeMirrorEditor
-          className={editorClassName}
-          editorView={editorViewRef.current}
-          ref={editorViewParentRef}
-          hidden={hidden}
-          showHiddenCode={showHiddenCode}
-        />
+      <div
+        className="relative w-full"
+        ref={intersectionRef}
+        {...navigationProps}
+      >
+        {isEditorMounted ? (
+          <CellCodeMirrorEditor
+            className={editorClassName}
+            editorView={editorViewRef.current}
+            ref={editorViewParentRef}
+            hidden={hidden}
+            showHiddenCode={showHiddenCode}
+          />
+        ) : (
+          <CodePlaceholder code={code} className={editorClassName} />
+        )}
         {!hidden && showLanguageToggles && (
           <div className="absolute top-1 right-5">
             <LanguageToggles

package/src/components/editor/cell/code/code-placeholder.css

@@ -0,0 +1,17 @@
+.mo-code-placeholder {
+  --mo-skeleton-bar: color-mix(in srgb, var(--muted), var(--foreground) 18%);
+  cursor: default;
+  padding: 4px 10px;
+  font-size: var(--cm-font-size, 0.875rem);
+}
+
+.mo-code-placeholder-line {
+  display: flex;
+  align-items: center;
+  height: 1.5em;
+}
+
+.mo-code-placeholder-bar {
+  height: 0.7em;
+  background-color: var(--mo-skeleton-bar);
+}

package/src/components/editor/cell/code/code-placeholder.tsx

@@ -0,0 +1,46 @@
+import "./code-placeholder.css";
+import { Skeleton } from "@/components/ui/skeleton";
+import { cn } from "@/utils/cn";
+
+interface CodePlaceholderProps {
+  code: string;
+  className?: string;
+}
+
+// Bound the rendered bars so a very long cell does not create excessive nodes.
+const MAX_LINES = 50;
+const MIN_LINE_WIDTH_CH = 4;
+const MAX_LINE_WIDTH_CH = 60;
+
+function getLineWidthCh(length: number): number {
+  return Math.min(MAX_LINE_WIDTH_CH, Math.max(MIN_LINE_WIDTH_CH, length));
+}
+
+/**
+ * Stand-in shown while a cell's CodeMirror editor has not been built yet.
+ * one skeleton bar per code line, so the final render doesn't cause a big jump.
+ */
+export const CodePlaceholder = ({ code, className }: CodePlaceholderProps) => {
+  const lines = code.split("\n", MAX_LINES);
+  return (
+    <div
+      className={cn("cm", "mo-code-placeholder", className)}
+      data-testid="cell-editor-placeholder"
+      aria-hidden={true}
+    >
+      {lines.map((line, index) => {
+        const length = line.trimEnd().length;
+        return (
+          <div key={index} className="mo-code-placeholder-line">
+            {length > 0 && (
+              <Skeleton
+                className="mo-code-placeholder-bar"
+                style={{ width: `${getLineWidthCh(length)}ch` }}
+              />
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+};

package/src/core/cells/scrollCellIntoView.ts

@@ -7,6 +7,7 @@ import {
 import type { CellHandle } from "@/components/editor/notebook-cell";
 import { retryWithTimeout } from "@/utils/timeout";
 import { Logger } from "../../utils/Logger";
+import { editorMountScheduler } from "../codemirror/editor-mount-scheduler";
 import { scrollActiveLineIntoView } from "../codemirror/extensions";
 import { goToVariableDefinition } from "../codemirror/go-to-definition/commands";
 import { getCellEditorView } from "./cells";
@@ -48,6 +49,9 @@ export function focusAndScrollCellIntoView({
     // https://github.com/marimo-team/marimo/issues/2940
     tryFocus(element);
   } else {
+    // Build this cell's editor now if it is still queued, so focus can land in
+    // it instead of the placeholder.
+    editorMountScheduler.promote(cellId);
     const editor = cell.current?.editorView;
     if (!editor) {
       Logger.warn("scrollCellIntoView: editor not found", cellId);

package/src/core/codemirror/__tests__/editor-mount-scheduler.test.ts

@@ -0,0 +1,142 @@
+import { describe, expect, it } from "vitest";
+import { createEditorMountScheduler } from "../editor-mount-scheduler";
+
+function makeManualSchedule() {
+  let pending: (() => void) | null = null;
+  const schedule = (cb: () => void) => {
+    pending = cb;
+  };
+  const flush = () => {
+    const cb = pending;
+    pending = null;
+    cb?.();
+  };
+  return { schedule, flush, hasPending: () => pending !== null };
+}
+
+describe("createEditorMountScheduler", () => {
+  it("builds one queued editor per tick in FIFO order, rescheduling between", () => {
+    const { schedule, flush, hasPending } = makeManualSchedule();
+    const built: string[] = [];
+    const s = createEditorMountScheduler(schedule);
+    s.request("a", () => built.push("a"));
+    s.request("b", () => built.push("b"));
+    flush();
+    expect(built).toEqual(["a"]);
+    expect(hasPending()).toBe(true);
+    flush();
+    expect(built).toEqual(["a", "b"]);
+  });
+
+  it("stops rescheduling once the queue is empty", () => {
+    const { schedule, flush, hasPending } = makeManualSchedule();
+    const built: string[] = [];
+    const s = createEditorMountScheduler(schedule);
+    s.request("a", () => built.push("a"));
+    flush();
+    expect(built).toEqual(["a"]);
+    expect(hasPending()).toBe(false);
+  });
+
+  it("promote builds immediately and removes from the queue", () => {
+    const { schedule, flush } = makeManualSchedule();
+    const built: string[] = [];
+    const s = createEditorMountScheduler(schedule);
+    s.request("a", () => built.push("a"));
+    s.request("b", () => built.push("b"));
+    s.promote("b");
+    expect(built).toEqual(["b"]);
+    flush();
+    expect(built).toEqual(["b", "a"]);
+  });
+
+  it("cancel prevents a queued build", () => {
+    const { schedule, flush } = makeManualSchedule();
+    const built: string[] = [];
+    const s = createEditorMountScheduler(schedule);
+    s.request("a", () => built.push("a"));
+    s.cancel("a");
+    flush();
+    expect(built).toEqual([]);
+  });
+
+  it("builds prioritized cells before earlier-queued ones", () => {
+    const { schedule, flush } = makeManualSchedule();
+    const built: string[] = [];
+    const s = createEditorMountScheduler(schedule);
+    s.request("a", () => built.push("a"));
+    s.request("b", () => built.push("b"));
+    s.request("c", () => built.push("c"));
+    s.prioritize("c");
+    flush();
+    flush();
+    flush();
+    expect(built).toEqual(["c", "a", "b"]);
+  });
+
+  it("builds multiple prioritized cells in prioritization order, then FIFO", () => {
+    const { schedule, flush } = makeManualSchedule();
+    const built: string[] = [];
+    const s = createEditorMountScheduler(schedule);
+    s.request("a", () => built.push("a"));
+    s.request("b", () => built.push("b"));
+    s.request("c", () => built.push("c"));
+    s.request("d", () => built.push("d"));
+    s.prioritize("d");
+    s.prioritize("b");
+    flush();
+    flush();
+    flush();
+    flush();
+    expect(built).toEqual(["d", "b", "a", "c"]);
+  });
+
+  it("ignores prioritize for a cell that is not queued", () => {
+    const { schedule, flush } = makeManualSchedule();
+    const built: string[] = [];
+    const s = createEditorMountScheduler(schedule);
+    s.request("a", () => built.push("a"));
+    s.prioritize("not-queued");
+    flush();
+    expect(built).toEqual(["a"]);
+  });
+
+  it("deprioritize reverts a cell to FIFO order without dropping it", () => {
+    const { schedule, flush } = makeManualSchedule();
+    const built: string[] = [];
+    const s = createEditorMountScheduler(schedule);
+    s.request("a", () => built.push("a"));
+    s.request("b", () => built.push("b"));
+    s.prioritize("b");
+    s.deprioritize("b");
+    flush();
+    flush();
+    expect(built).toEqual(["a", "b"]);
+  });
+
+  it("keeps draining the queue after a build throws", () => {
+    const { schedule, flush } = makeManualSchedule();
+    const built: string[] = [];
+    const s = createEditorMountScheduler(schedule);
+    s.request("a", () => {
+      throw new Error("boom");
+    });
+    s.request("b", () => built.push("b"));
+    expect(() => flush()).toThrow("boom");
+    flush();
+    expect(built).toEqual(["b"]);
+  });
+
+  it("cancel removes a prioritized cell", () => {
+    const { schedule, flush } = makeManualSchedule();
+    const built: string[] = [];
+    const s = createEditorMountScheduler(schedule);
+    s.request("a", () => built.push("a"));
+    s.request("b", () => built.push("b"));
+    s.prioritize("b");
+    s.cancel("b");
+    flush();
+    flush();
+    expect(built).toEqual(["a"]);
+  });
+});

package/src/core/codemirror/editor-mount-scheduler.ts

@@ -0,0 +1,100 @@
+import {
+  scheduleTask as defaultScheduleTask,
+  type ScheduleTaskFn,
+} from "@/utils/schedule-task";
+
+type BuildFn = () => void;
+
+export interface EditorMountScheduler {
+  /** Queue a cell's editor build to run on a future task. */
+  request(cellId: string, build: BuildFn): void;
+  /** Build a queued cell's editor synchronously, right now (e.g. on focus). */
+  promote(cellId: string): void;
+  /**
+   * Mark a queued cell to build ahead of un-prioritized ones, keeping the
+   * one-build-per-task pacing (e.g. when the cell scrolls into view).
+   */
+  prioritize(cellId: string): void;
+  /** Drop a cell's prioritized mark, reverting it to plain FIFO order. */
+  deprioritize(cellId: string): void;
+  /** Remove a cell's queued build entirely. */
+  cancel(cellId: string): void;
+}
+
+/**
+ * Drains a FIFO queue of editor builds, one per macrotask, so constructing many
+ * CodeMirror instances never blocks the main thread in a single long task. The
+ * scheduler yields between every build to keep the page responsive. Cells can
+ * be prioritized (e.g. when they scroll into view) to jump ahead of the queue
+ * without breaking the one-build-per-macrotask pacing.
+ */
+export function createEditorMountScheduler(
+  scheduleTask: ScheduleTaskFn = defaultScheduleTask,
+): EditorMountScheduler {
+  const queue = new Map<string, BuildFn>();
+  const priority = new Set<string>();
+  let isProcessingScheduled = false;
+
+  function scheduleProcessing(): void {
+    if (isProcessingScheduled || queue.size === 0) {
+      return;
+    }
+    isProcessingScheduled = true;
+    scheduleTask(processNext);
+  }
+
+  // Prioritized cells first, in the order they were prioritized; then FIFO.
+  function nextCellId(): string | undefined {
+    for (const cellId of priority) {
+      if (queue.has(cellId)) {
+        return cellId;
+      }
+      priority.delete(cellId);
+    }
+    return queue.keys().next().value;
+  }
+
+  function processNext(): void {
+    isProcessingScheduled = false;
+    try {
+      const cellId = nextCellId();
+      if (cellId !== undefined) {
+        const build = queue.get(cellId);
+        queue.delete(cellId);
+        priority.delete(cellId);
+        build?.();
+      }
+    } finally {
+      scheduleProcessing();
+    }
+  }
+
+  return {
+    request(cellId, build) {
+      queue.set(cellId, build);
+      scheduleProcessing();
+    },
+    promote(cellId) {
+      const build = queue.get(cellId);
+      if (build) {
+        queue.delete(cellId);
+        priority.delete(cellId);
+        build();
+      }
+    },
+    prioritize(cellId) {
+      if (queue.has(cellId)) {
+        priority.add(cellId);
+      }
+    },
+    deprioritize(cellId) {
+      priority.delete(cellId);
+    },
+    cancel(cellId) {
+      queue.delete(cellId);
+      priority.delete(cellId);
+    },
+  };
+}
+
+export const editorMountScheduler = createEditorMountScheduler();

package/src/utils/schedule-task.ts

@@ -0,0 +1,70 @@
+/**
+ * Schedules `callback` to run as a fresh task once the current task finishes,
+ * letting the browser paint and handle input in between. Used to spread heavy
+ * work across the event loop instead of blocking it in one long task.
+ */
+export type ScheduleTaskFn = (callback: () => void) => void;
+
+/**
+ * Picks the best available "yield to the event loop" primitive, preferring
+ * ones that impose no artificial delay between tasks:
+ *
+ * 1. `scheduler.postTask` — the purpose-built Prioritized Task Scheduling API.
+ *    `user-visible` runs promptly while still yielding to user-blocking input.
+ * 2. `MessageChannel` — a plain macrotask with no minimum-delay clamp (nested
+ *    `setTimeout` is floored at ~4ms by the spec, which would add up over many
+ *    tasks).
+ * 3. `setTimeout` — universal fallback; correct, just clamped when nested.
+ *
+ * The backend is chosen once, at module load, since it cannot change within a
+ * session.
+ */
+// `scheduler` (the Prioritized Task Scheduling API) is not in this repo's
+// lib.dom typings, so it is feature-detected behind this minimal cast.
+interface PostTaskScheduler {
+  postTask: (
+    callback: () => void,
+    options?: { priority?: "user-blocking" | "user-visible" | "background" },
+  ) => Promise<unknown>;
+}
+
+function createScheduleTask(): ScheduleTaskFn {
+  const scheduler = (globalThis as { scheduler?: PostTaskScheduler }).scheduler;
+  if (typeof scheduler?.postTask === "function") {
+    return (cb) => {
+      // postTask rejects when the callback throws. Rethrow on a fresh task so a
+      // thrown callback surfaces as an uncaught error, matching the
+      // MessageChannel/setTimeout backends, instead of an unhandledrejection.
+      void scheduler
+        .postTask(cb, { priority: "user-visible" })
+        .catch((error) => {
+          setTimeout(() => {
+            throw error;
+          });
+        });
+    };
+  }
+
+  if (typeof MessageChannel === "function") {
+    // Both ports live on this thread and no data is sent: posting a message is
+    // just the cheapest way to enqueue a macrotask that yields for paint. The
+    // queue lets multiple callbacks be in flight at once (one per message).
+    const pending: Array<() => void> = [];
+    const channel = new MessageChannel();
+    channel.port1.onmessage = () => {
+      pending.shift()?.();
+    };
+
+    return (cb) => {
+      pending.push(cb);
+      channel.port2.postMessage(null);
+    };
+  }
+
+  return (cb) => {
+    setTimeout(cb, 0);
+  };
+}
+
+/** Shared task scheduler using the best primitive this environment offers. */
+export const scheduleTask = createScheduleTask();