@marimo-team/islands 0.19.3-dev32 → 0.19.3-dev34

package/dist/main.js

@@ -56281,7 +56281,7 @@ Database schema: ${c}`), (_a3 = r2.aiFix) == null ? void 0 : _a3.setAiCompletion
             shouldFilter: false,
             children: [
               (0, import_jsx_runtime.jsx)(CommandInput, {
-                placeholder: "Search",
+                placeholder: `Search among the top ${v.length} values`,
                 autoFocus: true,
                 onValueChange: (e3) => _(e3.trim())
               }),
@@ -101155,7 +101155,7 @@ Defaulting to \`null\`.`;
       return Logger.warn("Failed to get version from mount config"), null;
     }
   }
-  const marimoVersionAtom = atom(getVersionFromMountConfig() || "0.19.3-dev32"), showCodeInRunModeAtom = atom(true);
+  const marimoVersionAtom = atom(getVersionFromMountConfig() || "0.19.3-dev34"), showCodeInRunModeAtom = atom(true);
   atom(null);
   var VIRTUAL_FILE_REGEX = /\/@file\/([^\s"&'/]+)\.([\dA-Za-z]+)/g, VirtualFileTracker = class e {
     constructor() {

package/package.json

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

package/src/components/data-table/column-header.tsx

@@ -593,7 +593,7 @@ const PopoverFilterByValues = <TData, TValue>({
       <>
         <Command className="text-sm outline-hidden" shouldFilter={false}>
           <CommandInput
-            placeholder="Search"
+            placeholder={`Search among the top ${data.length} values`}
             autoFocus={true}
             onValueChange={(value) => setQuery(value.trim())}
           />

package/src/components/editor/alerts/connecting-alert.tsx

@@ -2,6 +2,7 @@
 
 import { useAtomValue } from "jotai";
 import { LoadingEllipsis } from "@/components/icons/loading-ellipsis";
+import { Spinner } from "@/components/icons/spinner";
 import { Button } from "@/components/ui/button";
 import { DelayMount } from "@/components/utils/delay-mount";
 import {
@@ -10,24 +11,50 @@ import {
   isNotStartedAtom,
 } from "@/core/network/connection";
 import { useConnectToRuntime } from "@/core/runtime/config";
+import { Banner } from "@/plugins/impl/common/error-banner";
 import { Tooltip } from "../../ui/tooltip";
 import { FloatingAlert } from "./floating-alert";
 
 const SHORT_DELAY_MS = 1000; // 1 second
+const LONG_DELAY_MS = 5000; // 5 seconds
 
 export const ConnectingAlert: React.FC = () => {
   const isConnecting = useAtomValue(isConnectingAtom);
   const isClosed = useAtomValue(isClosedAtom);
 
   if (isConnecting) {
+    const subtleNotification = (
+      <Tooltip content="Connecting to a marimo runtime">
+        <div className="flex items-center">
+          <LoadingEllipsis size={5} className="text-yellow-500" />
+        </div>
+      </Tooltip>
+    );
+
+    const longNotification = (
+      <Banner
+        kind="info"
+        className="flex flex-col rounded py-2 px-4 animate-in slide-in-from-top w-fit"
+      >
+        <div className="flex flex-col gap-4 justify-between items-start text-muted-foreground text-base">
+          <div className="flex items-center gap-2">
+            <Spinner className="h-4 w-4" />
+            <p>Connecting to a marimo runtime ...</p>
+          </div>
+        </div>
+      </Banner>
+    );
+
+    // This waits for 1 second to show the subtle notification, then shows the long notification after 5 seconds.
     return (
       <DelayMount milliseconds={SHORT_DELAY_MS}>
-        <div className="absolute top-4 m-0 flex items-center min-h-[28px] left-1/2 transform -translate-x-1/2 z-200 ">
-          <Tooltip content="Connecting to a marimo runtime">
-            <div className="flex items-center">
-              <LoadingEllipsis size={5} className="text-yellow-500" />
-            </div>
-          </Tooltip>
+        <div className="m-0 flex items-center min-h-[28px] fixed top-5 left-1/2 transform -translate-x-1/2 z-200">
+          <DelayMount
+            milliseconds={LONG_DELAY_MS}
+            fallback={subtleNotification}
+          >
+            {longNotification}
+          </DelayMount>
         </div>
       </DelayMount>
     );

package/src/core/network/__tests__/requests-network.test.ts

@@ -34,12 +34,6 @@ vi.mock("../connection", () => ({
   waitForConnectionOpen: vi.fn().mockResolvedValue(undefined),
 }));
 
-vi.mock("../../state/jotai", () => ({
-  store: {
-    get: vi.fn(() => true),
-  },
-}));
-
 describe("createNetworkRequests", () => {
   let mockClient: any;
   let capturedCalls: Map<string, { hasParams: boolean; endpoint: string }>;
@@ -80,18 +74,6 @@ describe("createNetworkRequests", () => {
   });
 
   describe("special behavior", () => {
-    it("sendRun should drop requests if not connected", async () => {
-      const { store } = await import("../../state/jotai");
-
-      vi.mocked(store.get).mockReturnValue(false);
-
-      const requests = createNetworkRequests();
-      const result = await requests.sendRun({} as any);
-
-      expect(result).toBe(null);
-      expect(mockClient.POST).not.toHaveBeenCalled();
-    });
-
     it("exportAsHTML should set assetUrl in dev/test mode", async () => {
       const originalEnv = process.env.NODE_ENV;
       process.env.NODE_ENV = "development";

package/src/core/network/requests-network.ts

@@ -2,9 +2,8 @@
 
 import { once } from "lodash-es";
 import { getRuntimeManager } from "../runtime/config";
-import { store } from "../state/jotai";
 import { API, createClientWithRuntimeManager } from "./api";
-import { isConnectedAtom, waitForConnectionOpen } from "./connection";
+import { waitForConnectionOpen } from "./connection";
 import type { EditRequests, RunRequests } from "./types";
 
 const { handleResponse, handleResponseReturnNull } = API;
@@ -105,11 +104,7 @@ export function createNetworkRequests(): EditRequests & RunRequests {
         .then(handleResponseReturnNull);
     },
     sendRun: async (request) => {
-      // Rather than waiting, we just drop all sendRun requests if the connection is not open.
-      // Otherwise we can get into a weird state of sending requests for cells that no longer exist.
-      if (!store.get(isConnectedAtom)) {
-        return null;
-      }
+      await waitForConnectionOpen();
       return getClient()
         .POST("/api/kernel/run", {
           body: request,