@marimo-team/islands 0.19.8-dev13 → 0.19.8-dev15

package/dist/main.js

@@ -73178,7 +73178,7 @@ Image URL: ${r.imageUrl}`)), contextToXml({
       return Logger.warn("Failed to get version from mount config"), null;
     }
   }
-  const marimoVersionAtom = atom(getVersionFromMountConfig() || "0.19.8-dev13"), showCodeInRunModeAtom = atom(true);
+  const marimoVersionAtom = atom(getVersionFromMountConfig() || "0.19.8-dev15"), showCodeInRunModeAtom = atom(true);
   atom(null);
   var import_compiler_runtime$88 = require_compiler_runtime();
   function useKeydownOnElement(e, r) {
@@ -101933,6 +101933,10 @@ ${c}
   function _temp4$1(e) {
     return processOutput(e);
   }
+  const kernelStateAtom = atom({
+    isInstantiated: false,
+    error: null
+  });
   var VIRTUAL_FILE_REGEX = /\/@file\/([^\s"&'/]+)\.([\dA-Za-z]+)/g, VirtualFileTracker = class e {
     constructor() {
       __publicField(this, "virtualFiles", /* @__PURE__ */ new Map());
@@ -102026,32 +102030,32 @@ ${c}
     }), r[12] = y, r[13] = z, r[14] = G) : G = r[14], G;
   };
   var import_compiler_runtime$1 = require_compiler_runtime(), VerticalLayoutRenderer = (e) => {
-    let r = (0, import_compiler_runtime$1.c)(33), { cells: c, appConfig: d, mode: f } = e, { invisible: _ } = useDelayVisibility(c.length, f), v = useAtomValue(kioskModeAtom), [y] = useResolvedMarimoConfig(), S = useAtomValue(showCodeInRunModeAtom), w;
-    r[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (w = new URLSearchParams(window.location.search), r[0] = w) : w = r[0];
-    let E = w, O;
-    r[1] !== v || r[2] !== S ? (O = () => {
-      if (!S) return false;
-      let e2 = E.get(KnownQueryParams.showCode);
+    let r = (0, import_compiler_runtime$1.c)(34), { cells: c, appConfig: d, mode: f } = e, { invisible: _ } = useDelayVisibility(c.length, f), v = useAtomValue(kioskModeAtom), y = useAtomValue(kernelStateAtom), [S] = useResolvedMarimoConfig(), w = useAtomValue(showCodeInRunModeAtom), E;
+    r[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (E = new URLSearchParams(window.location.search), r[0] = E) : E = r[0];
+    let O = E, M;
+    r[1] !== v || r[2] !== w ? (M = () => {
+      if (!w) return false;
+      let e2 = O.get(KnownQueryParams.showCode);
       return e2 === null ? isStaticNotebook() || isWasm() || v : e2 === "true";
-    }, r[1] = v, r[2] = S, r[3] = O) : O = r[3];
-    let [M, I] = (0, import_react.useState)(O), z;
-    r[4] !== c || r[5] !== v || r[6] !== f ? (z = (() => {
+    }, r[1] = v, r[2] = w, r[3] = M) : M = r[3];
+    let [I, z] = (0, import_react.useState)(M), G;
+    r[4] !== c || r[5] !== v || r[6] !== f ? (G = (() => {
       let e2 = c.some(_temp$1);
       if (v) return true;
-      let r2 = E.get(KnownQueryParams.includeCode);
+      let r2 = O.get(KnownQueryParams.includeCode);
       return f === "read" && r2 !== "false" && e2;
-    })(), r[4] = c, r[5] = v, r[6] = f, r[7] = z) : z = r[7];
-    let G = z, q;
-    r[8] !== G || r[9] !== v || r[10] !== f || r[11] !== M || r[12] !== y ? (q = (e2) => (0, import_jsx_runtime.jsx)(VerticalCell, {
+    })(), r[4] = c, r[5] = v, r[6] = f, r[7] = G) : G = r[7];
+    let q = G, IY;
+    r[8] !== q || r[9] !== v || r[10] !== f || r[11] !== I || r[12] !== S ? (IY = (e2) => (0, import_jsx_runtime.jsx)(VerticalCell, {
       cellId: e2.id,
       output: e2.output,
       consoleOutputs: e2.consoleOutputs,
       status: e2.status,
       code: e2.code,
       config: e2.config,
-      cellOutputArea: y.display.cell_output,
+      cellOutputArea: S.display.cell_output,
       stopped: e2.stopped,
-      showCode: M && G,
+      showCode: I && q,
       errored: e2.errored,
       mode: f,
       runStartTimestamp: e2.runStartTimestamp,
@@ -102059,18 +102063,18 @@ ${c}
       staleInputs: e2.staleInputs,
       name: e2.name,
       kiosk: v
-    }, e2.id), r[8] = G, r[9] = v, r[10] = f, r[11] = M, r[12] = y, r[13] = q) : q = r[13];
-    let IY = q, LY;
-    r[14] !== d.width || r[15] !== c || r[16] !== _ || r[17] !== IY ? (LY = () => d.width === "columns" ? (0, import_jsx_runtime.jsx)("div", {
+    }, e2.id), r[8] = q, r[9] = v, r[10] = f, r[11] = I, r[12] = S, r[13] = IY) : IY = r[13];
+    let LY = IY, RY;
+    r[14] !== d.width || r[15] !== c || r[16] !== _ || r[17] !== y || r[18] !== LY ? (RY = () => d.width === "columns" ? (0, import_jsx_runtime.jsx)("div", {
       className: "flex flex-row gap-8 w-full",
       children: groupCellsByColumn(c).map((e2) => {
         let [r2, c2] = e2;
         return (0, import_jsx_runtime.jsx)("div", {
           className: "flex-1 flex flex-col gap-2 w-(--content-width)",
-          children: c2.map(IY)
+          children: c2.map(LY)
         }, r2);
       })
-    }) : c.length === 0 && !_ ? (0, import_jsx_runtime.jsx)("div", {
+    }) : c.length === 0 && !_ ? y.isInstantiated ? (0, import_jsx_runtime.jsx)("div", {
       className: "flex-1 flex flex-col items-center justify-center py-8",
       children: (0, import_jsx_runtime.jsxs)(Alert, {
         variant: "info",
@@ -102083,35 +102087,40 @@ ${c}
           })
         ]
       })
+    }) : (0, import_jsx_runtime.jsx)("div", {
+      className: "flex-1 flex flex-col items-center justify-center py-8",
+      children: (0, import_jsx_runtime.jsx)(LoaderCircle, {
+        className: "w-8 h-8 animate-spin text-muted-foreground"
+      })
     }) : (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
-      children: c.map(IY)
-    }), r[14] = d.width, r[15] = c, r[16] = _, r[17] = IY, r[18] = LY) : LY = r[18];
-    let RY = LY, zY;
-    r[19] !== G || r[20] !== RY || r[21] !== M ? (zY = M && G ? (0, import_jsx_runtime.jsxs)("div", {
+      children: c.map(LY)
+    }), r[14] = d.width, r[15] = c, r[16] = _, r[17] = y, r[18] = LY, r[19] = RY) : RY = r[19];
+    let zY = RY, BY;
+    r[20] !== q || r[21] !== zY || r[22] !== I ? (BY = I && q ? (0, import_jsx_runtime.jsxs)("div", {
       className: "flex flex-col gap-5",
       children: [
         " ",
-        RY()
+        zY()
       ]
-    }) : RY(), r[19] = G, r[20] = RY, r[21] = M, r[22] = zY) : zY = r[22];
-    let BY;
-    r[23] !== G || r[24] !== f || r[25] !== M ? (BY = f === "read" && (0, import_jsx_runtime.jsx)(ActionButtons, {
-      canShowCode: G,
-      showCode: M,
-      onToggleShowCode: () => I(_temp2$1)
-    }), r[23] = G, r[24] = f, r[25] = M, r[26] = BY) : BY = r[26];
+    }) : zY(), r[20] = q, r[21] = zY, r[22] = I, r[23] = BY) : BY = r[23];
     let VY;
-    r[27] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (VY = (0, import_jsx_runtime.jsx)(FloatingOutline, {}), r[27] = VY) : VY = r[27];
+    r[24] !== q || r[25] !== f || r[26] !== I ? (VY = f === "read" && (0, import_jsx_runtime.jsx)(ActionButtons, {
+      canShowCode: q,
+      showCode: I,
+      onToggleShowCode: () => z(_temp2$1)
+    }), r[24] = q, r[25] = f, r[26] = I, r[27] = VY) : VY = r[27];
     let HY;
-    return r[28] !== d || r[29] !== _ || r[30] !== zY || r[31] !== BY ? (HY = (0, import_jsx_runtime.jsxs)(VerticalLayoutWrapper, {
+    r[28] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (HY = (0, import_jsx_runtime.jsx)(FloatingOutline, {}), r[28] = HY) : HY = r[28];
+    let UY;
+    return r[29] !== d || r[30] !== _ || r[31] !== BY || r[32] !== VY ? (UY = (0, import_jsx_runtime.jsxs)(VerticalLayoutWrapper, {
       invisible: _,
       appConfig: d,
       children: [
-        zY,
         BY,
-        VY
+        VY,
+        HY
       ]
-    }), r[28] = d, r[29] = _, r[30] = zY, r[31] = BY, r[32] = HY) : HY = r[32], HY;
+    }), r[29] = d, r[30] = _, r[31] = BY, r[32] = VY, r[33] = UY) : UY = r[33], UY;
   }, ActionButtons = (e) => {
     let r = (0, import_compiler_runtime$1.c)(26), { canShowCode: c, showCode: d, onToggleShowCode: f } = e, { readCode: _ } = useRequestClient(), v = _temp3, y = _temp4, S;
     r[0] === _ ? S = r[1] : (S = async () => {

package/package.json

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

package/src/components/editor/renderers/vertical-layout/vertical-layout.tsx

@@ -7,6 +7,7 @@ import {
   CodeIcon,
   FolderDownIcon,
   ImageIcon,
+  Loader2Icon,
   MoreHorizontalIcon,
 } from "lucide-react";
 import type React from "react";
@@ -32,6 +33,7 @@ import { MarkdownLanguageAdapter } from "@/core/codemirror/language/languages/ma
 import { useResolvedMarimoConfig } from "@/core/config/config";
 import { CSSClasses, KnownQueryParams } from "@/core/constants";
 import type { OutputMessage } from "@/core/kernel/messages";
+import { kernelStateAtom } from "@/core/kernel/state";
 import { showCodeInRunModeAtom } from "@/core/meta/state";
 import { isErrorMime } from "@/core/mime";
 import { type AppMode, kioskModeAtom } from "@/core/mode";
@@ -63,6 +65,7 @@ const VerticalLayoutRenderer: React.FC<VerticalLayoutProps> = ({
 }) => {
   const { invisible } = useDelayVisibility(cells.length, mode);
   const kioskMode = useAtomValue(kioskModeAtom);
+  const kernelState = useAtomValue(kernelStateAtom);
   const [userConfig] = useResolvedMarimoConfig();
   const showCodeInRunModePreference = useAtomValue(showCodeInRunModeAtom);
 
@@ -140,6 +143,15 @@ const VerticalLayoutRenderer: React.FC<VerticalLayoutProps> = ({
     }
 
     if (cells.length === 0 && !invisible) {
+      // If kernel is not yet instantiated, show loading state
+      if (!kernelState.isInstantiated) {
+        return (
+          <div className="flex-1 flex flex-col items-center justify-center py-8">
+            <Loader2Icon className="w-8 h-8 animate-spin text-muted-foreground" />
+          </div>
+        );
+      }
+      // Kernel is ready but no cells - truly empty notebook
       return (
         <div className="flex-1 flex flex-col items-center justify-center py-8">
           <Alert variant="info">