From 67cc82e69ab9a624486e1d1cde0895b1a6348627 Mon Sep 17 00:00:00 2001
From: "malini-agent[bot]"
 <338999285+malini-agent[bot]@users.noreply.github.com>
Date: Tue, 13 Oct 2026 22:13:04 +0200
Subject: [PATCH] fix(web): stop false "updated elsewhere" on save and restore
 loaders

---
 apps/web/e2e/browser-lock.spec.ts             |  65 ++++++++-
 .../web/src/lib/projects/ui/DiffEditor.svelte |   4 +-
 .../src/lib/projects/ui/ProjectPage.svelte    |  37 ++++-
 .../src/lib/projects/ui/ProjectsPage.svelte   |   6 +-
 .../secrets/monaco/SecretsFileEditor.svelte   |   9 +-
 apps/web/src/lib/secrets/monaco/init.ts       |  19 +++
 .../lib/secrets/ui/SecretsEditorPage.svelte   | 134 ++++++++++++------
 apps/web/src/lib/shared/ui/ShellLoader.svelte |  30 ----
 8 files changed, 208 insertions(+), 96 deletions(-)
 create mode 100644 apps/web/src/lib/secrets/monaco/init.ts
 delete mode 100644 apps/web/src/lib/shared/ui/ShellLoader.svelte

diff --git a/apps/web/e2e/browser-lock.spec.ts b/apps/web/e2e/browser-lock.spec.ts
index 3106fe9..e6bc0d5 100644
--- a/apps/web/e2e/browser-lock.spec.ts
+++ b/apps/web/e2e/browser-lock.spec.ts
@@ -327,18 +327,13 @@ test("lock broadcast in one tab locks another open tab", async ({
   await context.close();
 });
 
-test("shell loading state is text-first, not the large six-dot grip", async ({
-  page,
-}) => {
+test("projects loading state is the legacy amber grip", async ({ page }) => {
   await mockApi(page, { userDelayMs: 1_000 });
   await seedBrowserState(page, Date.now());
 
   await page.goto(`${APP}/app/project`, { waitUntil: "domcontentloaded" });
 
-  await expect(
-    page.getByRole("status").filter({ hasText: "Loading" }),
-  ).toBeVisible();
-  await expect(page.locator('svg[aria-label="Loading"]')).toHaveCount(0);
+  await expect(page.locator('svg[aria-label="Loading"]')).toBeVisible();
 });
 
 test("unlock after lock cleanup does not leave project shell stuck loading", async ({
@@ -446,3 +441,59 @@ test("unsaved edits survive tab switches and project switches go through the gua
   await expect(page).toHaveURL(/project-two$/);
   await expect(guard).toHaveCount(0);
 });
+
+test("saving does not flag the project as updated elsewhere", async ({
+  page,
+}) => {
+  const passphrase = "correct horse battery staple";
+  const fixtures = await createUnlockedFixtures(page, passphrase);
+  await mockApi(page, { user: fixtures.user, projects: [fixtures.project] });
+  // The backend echoes every save to all subscribers, the saver included,
+  // and the echo can arrive before the PATCH response.
+  let echo: string | null = null;
+  let echoed = () => {};
+  const echoDelivered = new Promise<void>((resolve) => (echoed = resolve));
+  await page.route("**/projects/*/events", async (route) => {
+    if (!echo) return route.fulfill({ status: 204, body: "" });
+    await route.fulfill({
+      headers: { "content-type": "text/event-stream" },
+      body: `data: ${JSON.stringify({ newEncryptedSecrets: echo })}\n\n`,
+    });
+    echoed();
+  });
+  await page.route("**/projects/project-eval", async (route) => {
+    if (route.request().method() !== "PATCH") return route.fallback();
+    echo = route.request().postDataJSON().encryptedSecrets;
+    await echoDelivered;
+    await new Promise((resolve) => setTimeout(resolve, 300));
+    await route.fulfill({ json: {} });
+  });
+  await seedAuthOnly(page);
+
+  await page.goto(`${APP}/app/project/project-eval`, {
+    waitUntil: "domcontentloaded",
+  });
+  await page.getByRole("textbox", { name: "Passphrase" }).fill(passphrase);
+  await page.getByRole("button", { name: "Unlock" }).click();
+
+  const editor = page.locator(".monaco-editor .view-lines");
+  await editor.click();
+  await page.keyboard.press("ControlOrMeta+End");
+  await page.keyboard.press("Enter");
+  await page.keyboard.type('SAVED="1"');
+  await page.getByRole("button", { name: "Save", exact: true }).click();
+
+  await expect(
+    page.getByRole("button", { name: "Saved", exact: true }),
+  ).toBeVisible();
+  await expect(
+    page.getByText("This project was updated elsewhere"),
+  ).toHaveCount(0);
+
+  await editor.click();
+  await page.keyboard.press("ControlOrMeta+End");
+  await page.keyboard.type("2");
+  await expect(
+    page.getByRole("button", { name: "Save", exact: true }),
+  ).toBeEnabled();
+});
diff --git a/apps/web/src/lib/projects/ui/DiffEditor.svelte b/apps/web/src/lib/projects/ui/DiffEditor.svelte
index 089454f..0d779ff 100644
--- a/apps/web/src/lib/projects/ui/DiffEditor.svelte
+++ b/apps/web/src/lib/projects/ui/DiffEditor.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { onMount } from "svelte";
-  import loader from "@monaco-editor/loader";
+  import { initMonaco } from "$lib/secrets/monaco/init";
   import type * as Monaco from "monaco-editor";
 
   type RevealOn = "always" | "hover" | "never";
@@ -192,7 +192,7 @@
     let cancelled = false;
 
     void (async () => {
-      const monaco = await loader.init();
+      const monaco = await initMonaco();
       if (cancelled || !host) return;
 
       registerDiffLanguage(monaco);
diff --git a/apps/web/src/lib/projects/ui/ProjectPage.svelte b/apps/web/src/lib/projects/ui/ProjectPage.svelte
index 09ab2e1..76438f2 100644
--- a/apps/web/src/lib/projects/ui/ProjectPage.svelte
+++ b/apps/web/src/lib/projects/ui/ProjectPage.svelte
@@ -70,7 +70,6 @@
   import DiffEditor from "./DiffEditor.svelte";
   import GripLoader from "$lib/shared/ui/GripLoader.svelte";
   import HistoryIcon from "$lib/shared/ui/HistoryIcon.svelte";
-  import ShellLoader from "$lib/shared/ui/ShellLoader.svelte";
   import ButtonLoader from "$lib/shared/ui/ButtonLoader.svelte";
   import SlidersIcon from "$lib/shared/ui/SlidersIcon.svelte";
   import YearHeatmap from "./YearHeatmap.svelte";
@@ -142,6 +141,8 @@
   let activeProject = $state<Project | null>(null);
   let displayedProjectId = $state("");
   let pendingProjectId = $state<string | null>(null);
+  let editorSwitching = $state(false);
+  let editorLoading = $state(true);
   let loading = $state(true);
   let loadError = $state<string | null>(null);
   let searchQuery = $state("");
@@ -345,6 +346,14 @@
   );
   const isAdmin = $derived(currentRole === "admin");
   const isSwitching = $derived(pendingProjectId !== null);
+  // One grip across the shell and editor loads, so it never remounts mid-boot.
+  const showLoader = $derived(
+    loading && !activeProject
+      ? true
+      : loadError && !activeProject
+        ? false
+        : activeTab === "editor" && editorLoading,
+  );
   const DangerIcon = $derived(isAdmin ? IconTrash : IconUserMinus);
   const revealOnSetting = $derived(
     normalizeProjectSettings(activeProject?.settings).revealOn,
@@ -2316,7 +2325,10 @@
         >
           {#each uniqueProjects as project, index (project.id)}
             {@const isDisplayed = project.id === displayedProjectId}
-            {@const isPending = project.id === pendingProjectId}
+            {@const isPending =
+              project.id ===
+              (pendingProjectId ??
+                (editorSwitching ? displayedProjectId : null))}
             {@const isShadow = (
               project as Project & { isDndShadowItem?: boolean }
             ).isDndShadowItem}
@@ -2833,12 +2845,21 @@
     </div>
 
     <div
-      class={`min-h-0 flex-1 overflow-hidden transition-opacity duration-300 ease-in-out ${
-        isSwitching ? "pointer-events-none opacity-60" : "opacity-100"
+      class={`relative min-h-0 flex-1 overflow-hidden transition-opacity duration-300 ease-in-out ${
+        isSwitching || editorSwitching
+          ? "pointer-events-none opacity-60"
+          : "opacity-100"
       } ${isSearching ? "hidden" : ""}`}
     >
+      {#if showLoader}
+        <div
+          class="pointer-events-none absolute inset-0 flex items-center justify-center"
+        >
+          <GripLoader color="#DDA15E" class="h-12 w-12" />
+        </div>
+      {/if}
       {#if loading && !activeProject}
-        <ShellLoader label="Loading project" class="h-full" />
+        <!-- The grip above covers the shell load. -->
       {:else if loadError && !activeProject}
         <section
           class="flex h-full items-center justify-center bg-background p-6"
@@ -2869,8 +2890,12 @@
       {:else}
         <!-- Kept mounted on every tab (only hidden) so unsaved editor edits survive tab switches. -->
         <div class={activeTab === "editor" ? "h-full" : "hidden"}>
+          <!-- Loads the pending project right away so the swap lands together with the shell. -->
           <SecretsEditorPage
-            projectId={displayedProjectId}
+            projectId={pendingProjectId ?? displayedProjectId}
+            busy={isSwitching}
+            bind:switching={editorSwitching}
+            bind:loading={editorLoading}
             projectName={activeProject?.name ?? ""}
             changedBy={changedByLabel}
             active={activeTab === "editor"}
diff --git a/apps/web/src/lib/projects/ui/ProjectsPage.svelte b/apps/web/src/lib/projects/ui/ProjectsPage.svelte
index 34d3451..a31ad85 100644
--- a/apps/web/src/lib/projects/ui/ProjectsPage.svelte
+++ b/apps/web/src/lib/projects/ui/ProjectsPage.svelte
@@ -14,7 +14,7 @@
   import { SymmetricCrypto } from "$lib/auth/symmetric-crypto";
   import { UserApi } from "$lib/auth/user.api";
   import { ProjectsApi, type Project } from "$lib/projects/projects.api";
-  import ShellLoader from "$lib/shared/ui/ShellLoader.svelte";
+  import GripLoader from "$lib/shared/ui/GripLoader.svelte";
   import {
     accountLoadErrorMessage,
     auth,
@@ -258,5 +258,7 @@
     </div>
   </div>
 {:else}
-  <ShellLoader class="h-screen w-screen" />
+  <div class="flex h-screen w-screen items-center justify-center">
+    <GripLoader color="#DDA15E" class="h-12 w-12" />
+  </div>
 {/if}
diff --git a/apps/web/src/lib/secrets/monaco/SecretsFileEditor.svelte b/apps/web/src/lib/secrets/monaco/SecretsFileEditor.svelte
index 9fd6335..51ee979 100644
--- a/apps/web/src/lib/secrets/monaco/SecretsFileEditor.svelte
+++ b/apps/web/src/lib/secrets/monaco/SecretsFileEditor.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
   import { onMount } from "svelte";
-  import loader from "@monaco-editor/loader";
   import type { ProjectRevealOn } from "$lib/auth/domain/project-settings";
   import { registerDotenvLanguage } from "./dotenv-language";
+  import { initMonaco } from "./init";
   import { injectMaskingCSS } from "./masking-css";
   import { createSecretMasking } from "./secretMasking";
 
@@ -15,6 +15,7 @@
     padding = { top: 16, bottom: 80 },
     lineNumbersMinChars = undefined,
     readOnly = false,
+    onReady,
   }: {
     value: string;
     onChange: (v: string) => void;
@@ -24,6 +25,8 @@
     padding?: { top: number; bottom: number };
     lineNumbersMinChars?: number;
     readOnly?: boolean;
+    /** Fires once Monaco is mounted and styled. */
+    onReady?: () => void;
   } = $props();
 
   let host = $state<HTMLDivElement | null>(null);
@@ -37,7 +40,7 @@
     let cancelled = false;
 
     void (async () => {
-      const monaco = await loader.init();
+      const monaco = await initMonaco();
       if (cancelled || !host) {
         return;
       }
@@ -78,6 +81,7 @@
 
       m.handleEditorMount(editorInstance, monaco);
       m.syncExternalValue(value, revealOn);
+      onReady?.();
     })();
 
     return () => {
@@ -100,6 +104,7 @@
       fontSize,
       padding,
       lineNumbersMinChars: lineNumbersMinChars ?? 5,
+      readOnly,
     });
   });
 
diff --git a/apps/web/src/lib/secrets/monaco/init.ts b/apps/web/src/lib/secrets/monaco/init.ts
new file mode 100644
index 0000000..c98fa2b
--- /dev/null
+++ b/apps/web/src/lib/secrets/monaco/init.ts
@@ -0,0 +1,19 @@
+import loader from "@monaco-editor/loader";
+
+/**
+ * Monaco's AMD bundle appends its stylesheet without waiting for it,
+ * so an editor created right after `loader.init()` paints unstyled for a frame.
+ */
+export async function initMonaco() {
+  const monaco = await loader.init();
+  const css = document.querySelector<HTMLLinkElement>(
+    'link[href$="/editor/editor.main.css"]',
+  );
+  if (css && !css.sheet) {
+    await new Promise((done) => {
+      css.addEventListener("load", done, { once: true });
+      css.addEventListener("error", done, { once: true });
+    });
+  }
+  return monaco;
+}
diff --git a/apps/web/src/lib/secrets/ui/SecretsEditorPage.svelte b/apps/web/src/lib/secrets/ui/SecretsEditorPage.svelte
index 0c88c7c..65a4b88 100644
--- a/apps/web/src/lib/secrets/ui/SecretsEditorPage.svelte
+++ b/apps/web/src/lib/secrets/ui/SecretsEditorPage.svelte
@@ -2,7 +2,7 @@
   import { goto } from "$app/navigation";
   import { resolve } from "$app/paths";
   import { EventSource } from "eventsource";
-  import { onDestroy } from "svelte";
+  import { onDestroy, untrack } from "svelte";
   import { MediaQuery } from "svelte/reactivity";
   import { fade } from "svelte/transition";
   import { toast } from "svelte-sonner";
@@ -43,6 +43,9 @@
     projectName = "",
     changedBy = null,
     active = true,
+    busy = false,
+    switching = $bindable(false),
+    loading = $bindable(false),
     onSaved,
     onConnectIntegrations,
   }: {
@@ -52,6 +55,12 @@
     changedBy?: string | null;
     /** False while another project tab is shown; the editor stays mounted so unsaved edits survive. */
     active?: boolean;
+    /** The shell is mid project switch; block edits until it settles. */
+    busy?: boolean;
+    /** True while the previous project stays on screen until `projectId` is decrypted. */
+    switching?: boolean;
+    /** True until the first project is decrypted; the shell shows its loader meanwhile. */
+    loading?: boolean;
     onSaved?: () => void | Promise<void>;
     onConnectIntegrations?: () => void;
   } = $props();
@@ -71,6 +80,10 @@
   let pushing = $state(false);
   let integrations = $state<Integration[]>([]);
   let isExternallyUpdated = $state(false);
+  let monacoReady = $state(false);
+  let loadSeq = 0;
+  /** Plaintext of the save in flight; its own SSE echo can arrive before the request resolves. */
+  let pendingSave: string | null = null;
   let projectEvents: EventSource | null = null;
   let projectEventsReconnect: ReturnType<typeof setTimeout> | null = null;
   let showSlideToConfirm = $state(false);
@@ -87,8 +100,9 @@
   const isDirty = $derived(
     normalizeEditorText(doc) !== normalizeEditorText(baseline),
   );
+  const frozen = $derived(switching || busy);
   const saveDisabled = $derived(
-    saving || !isDirty || readOnly || !aesKey || isExternallyUpdated,
+    saving || !isDirty || readOnly || frozen || !aesKey || isExternallyUpdated,
   );
   const hasGithubIntegration = $derived(integrations.length > 0);
   const pushDisabled = $derived(
@@ -96,6 +110,7 @@
       saving ||
       pushing ||
       readOnly ||
+      frozen ||
       isExternallyUpdated ||
       !hasGithubIntegration,
   );
@@ -134,6 +149,7 @@
     saving = false;
     pushing = false;
     isExternallyUpdated = false;
+    switching = false;
     showSlideToConfirm = false;
     resetSlideConfirm();
     loadPhase = nextPhase;
@@ -144,25 +160,32 @@
   }
 
   async function loadProjectFor(pid: string) {
+    const seq = ++loadSeq;
+    const stale = () => seq !== loadSeq;
     const loadRevision = keyAuth.revision;
-    loadPhase = "loading";
+    const lockedSinceStart = () =>
+      loadRevision !== keyAuth.revision || !keyAuth.hasMasterKey;
+    const fail = (phase: "error" | "forbidden", message: string) => {
+      clearDecryptedState(phase);
+      loadMessage = message;
+    };
+    // Like the legacy app: keep the previous project on screen (frozen) until this one is decrypted.
+    switching = loadPhase === "ready";
+    if (!switching) loadPhase = "loading";
     loadMessage = null;
     isExternallyUpdated = false;
     closeProjectEvents();
     aesKey = null;
-    baseline = "";
-    doc = "";
-    integrations = [];
     const jwt = auth.jwtToken;
     if (!jwt) {
       void goto(resolve("/app/login"));
       return;
     }
     const ok = await loadUserData();
+    if (stale()) return;
     if (!ok || !auth.userData) {
       if (!auth.jwtToken) return;
-      loadPhase = "error";
-      loadMessage = accountLoadErrorMessage();
+      fail("error", accountLoadErrorMessage());
       return;
     }
     const activeJwt = auth.jwtToken;
@@ -176,42 +199,41 @@
     try {
       project = await ProjectsApi.getProject(activeJwt, pid);
     } catch (e) {
+      if (stale()) return;
       if (e instanceof ApiResponseError && e.status === 404) {
         void goto(resolve("/app/project"), { replaceState: true });
         return;
       }
-      loadPhase = "error";
-      loadMessage = e instanceof Error ? e.message : "Failed to load project";
+      fail("error", e instanceof Error ? e.message : "Failed to load project");
       return;
     }
 
-    revealOn = normalizeProjectSettings(project.settings).revealOn;
+    let nextIntegrations: Integration[] = [];
     try {
-      integrations = await IntegrationsApi.getIntegrationsForProject(
+      nextIntegrations = await IntegrationsApi.getIntegrationsForProject(
         activeJwt,
         pid,
       );
     } catch {
-      integrations = [];
+      // Push stays disabled without integrations.
     }
-
-    const member = project.members?.find((m) => m.id === userId);
-    readOnly = member?.role === "read";
+    if (stale()) return;
 
     const encKeyForUser = project.encryptedSecretsKeys?.[userId];
     if (!encKeyForUser) {
-      loadPhase = "forbidden";
-      loadMessage = "You do not have a secrets key for this project.";
+      fail("forbidden", "You do not have a secrets key for this project.");
       return;
     }
 
     let key = await keystore.getProjectKey(project.id);
-    if (loadRevision !== keyAuth.revision || !keyAuth.hasMasterKey) {
+    if (stale()) return;
+    if (lockedSinceStart()) {
       clearDecryptedState();
       return;
     }
     if (!key) {
       const masterKey = await keystore.getMasterKey();
+      if (stale()) return;
       if (!masterKey) {
         clearDecryptedState();
         return;
@@ -222,44 +244,54 @@
           masterKey,
         );
         key = await SymmetricCrypto.importAesKey(projectKeyB64);
-        if (loadRevision !== keyAuth.revision || !keyAuth.hasMasterKey) {
+        if (stale()) return;
+        if (lockedSinceStart()) {
           clearDecryptedState();
           return;
         }
         await keystore.setProjectKey(project.id, key);
       } catch {
-        loadPhase = "error";
-        loadMessage =
-          "Could not decrypt the project key. Try unlocking again or re-login.";
+        if (stale()) return;
+        fail(
+          "error",
+          "Could not decrypt the project key. Try unlocking again or re-login.",
+        );
         return;
       }
     }
 
-    aesKey = key;
-
+    let content: string;
     try {
-      const content = await SymmetricCrypto.decryptWithKey(
+      content = await SymmetricCrypto.decryptWithKey(
         project.encryptedSecrets,
         key,
       );
-      if (loadRevision !== keyAuth.revision || !keyAuth.hasMasterKey) {
-        clearDecryptedState();
-        return;
-      }
-      doc = content;
-      baseline = content;
     } catch {
-      loadPhase = "error";
-      loadMessage = "Could not decrypt project secrets.";
+      if (stale()) return;
+      fail("error", "Could not decrypt project secrets.");
+      return;
+    }
+    if (stale()) return;
+    if (lockedSinceStart()) {
+      clearDecryptedState();
       return;
     }
 
+    revealOn = normalizeProjectSettings(project.settings).revealOn;
+    integrations = nextIntegrations;
+    readOnly = project.members?.find((m) => m.id === userId)?.role === "read";
+    aesKey = key;
+    doc = content;
+    baseline = content;
+    switching = false;
     loadPhase = "ready";
     openProjectEvents(pid, key);
   }
 
   $effect(() => {
-    void loadProjectFor(projectId);
+    const pid = projectId;
+    // Only a project change reloads; a token refresh must not wipe unsaved edits.
+    untrack(() => void loadProjectFor(pid));
   });
 
   $effect(() => {
@@ -269,7 +301,7 @@
 
   $effect(() => {
     if (loadPhase !== "locked" || !keyAuth.hasMasterKey) return;
-    void loadProjectFor(projectId);
+    untrack(() => void loadProjectFor(projectId));
   });
 
   onDestroy(() => {
@@ -299,6 +331,7 @@
       const encrypted = await SymmetricCrypto.encryptWithKey(content, key);
       if (saveRevision !== keyAuth.revision || !keyAuth.hasMasterKey)
         return false;
+      pendingSave = content;
       await ProjectsApi.updateProjectContent(jwt, projectId, {
         encryptedSecrets: encrypted,
       });
@@ -313,6 +346,7 @@
       }
       return false;
     } finally {
+      pendingSave = null;
       saving = false;
     }
   }
@@ -353,14 +387,17 @@
     try {
       const event = JSON.parse(data) as { newEncryptedSecrets?: string };
       if (!event.newEncryptedSecrets) return;
-      if (isDirty) {
-        isExternallyUpdated = true;
-        return;
-      }
       const next = await SymmetricCrypto.decryptWithKey(
         event.newEncryptedSecrets,
         key,
       );
+      if (aesKey !== key) return;
+      // Our own save echoing back (before or after its request resolves) is not an external update.
+      if (next === pendingSave || next === baseline) return;
+      if (isDirty) {
+        isExternallyUpdated = true;
+        return;
+      }
       doc = next;
       baseline = next;
     } catch {
@@ -368,6 +405,12 @@
     }
   }
 
+  $effect(() => {
+    // Through Monaco's first mount too, so the loader hands straight off to a styled editor.
+    loading =
+      loadPhase === "loading" || (loadPhase === "ready" && !monacoReady);
+  });
+
   $effect(() => {
     secretsEditorNavGuard.isDirty = loadPhase === "ready" && isDirty;
   });
@@ -550,11 +593,7 @@
 <svelte:window onkeydown={onGlobalKeydown} />
 
 {#if loadPhase === "loading"}
-  <div
-    class="flex min-h-[40vh] items-center justify-center text-sm text-muted-foreground"
-  >
-    Loading project…
-  </div>
+  <!-- The shell's grip loader covers this. -->
 {:else if loadPhase === "error" || loadPhase === "forbidden"}
   <div
     class="rounded-lg border border-border/60 bg-card/40 p-6 text-sm text-muted-foreground"
@@ -564,7 +603,7 @@
 {:else if loadPhase === "locked"}
   <!-- The unlock dialog covers this state (prod shows an empty editor area). -->
 {:else if loadPhase === "ready"}
-  <section class="relative h-full min-h-0">
+  <section class={cn("relative h-full min-h-0", !monacoReady && "invisible")}>
     {#if isExternallyUpdated}
       <div
         class="absolute top-4 left-1/2 z-20 w-[calc(100%-2rem)] max-w-xl -translate-x-1/2 rounded-lg border border-amber-500/30 bg-amber-500/10 px-4 py-3 text-sm text-amber-100 shadow-lg"
@@ -579,12 +618,13 @@
         value={doc}
         onChange={onDocChange}
         {revealOn}
-        {readOnly}
+        readOnly={readOnly || frozen}
         fontSize={mobile.current ? 16 : 14}
         padding={mobile.current
           ? { top: 12, bottom: 80 }
           : { top: 16, bottom: 80 }}
         lineNumbersMinChars={mobile.current ? 3 : undefined}
+        onReady={() => (monacoReady = true)}
       />
     {/key}
     {#if changedBy}
diff --git a/apps/web/src/lib/shared/ui/ShellLoader.svelte b/apps/web/src/lib/shared/ui/ShellLoader.svelte
deleted file mode 100644
index 25d5ad2..0000000
--- a/apps/web/src/lib/shared/ui/ShellLoader.svelte
+++ /dev/null
@@ -1,30 +0,0 @@
-<script lang="ts">
-  import { cn } from "$lib/utils";
-
-  let {
-    label = "Loading",
-    class: className = "",
-  }: {
-    label?: string;
-    class?: string;
-  } = $props();
-</script>
-
-<div
-  role="status"
-  aria-live="polite"
-  class={cn(
-    "flex items-center justify-center text-muted-foreground",
-    className,
-  )}
->
-  <span class="flex flex-col items-center gap-3">
-    <span
-      aria-hidden="true"
-      class="h-px w-8 origin-center animate-pulse rounded-full bg-[#DDA15E]/80 shadow-[0_0_14px_rgba(221,161,94,0.35)]"
-    ></span>
-    <span class="text-[12px] tracking-wide text-muted-foreground/70"
-      >{label}</span
-    >
-  </span>
-</div>