From d34a4957a5e68d7f34b01b9920694a1e7428ac1e Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sun, 31 May 2026 05:16:19 +0000
Subject: [PATCH 1/2] =?UTF-8?q?=E2=9A=A1=20Bolt:=20[performance=20improvem?=
 =?UTF-8?q?ent]=20Defer=20expensive=20text=20analysis=20during=20streaming?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: aloewright <3641844+aloewright@users.noreply.github.com>
---
 .jules/bolt.md                                   |  3 +++
 apps/quill/client/components/playground-view.tsx | 11 +++++++++--
 2 files changed, 12 insertions(+), 2 deletions(-)
 create mode 100644 .jules/bolt.md

diff --git a/.jules/bolt.md b/.jules/bolt.md
new file mode 100644
index 00000000..7100e04c
--- /dev/null
+++ b/.jules/bolt.md
@@ -0,0 +1,3 @@
+## 2024-05-19 - useDeferredValue for rapidly updating UI
+**Learning:** During text streaming with very short intervals (e.g. 24ms), synchronous operations on the changing state (like expensive calculations or text analysis) will block the main thread and cause the UI to become unresponsive.
+**Action:** Use React's `useDeferredValue` for the rapidly changing state and perform the expensive synchronous computations on the deferred value to ensure the main thread isn't blocked.
diff --git a/apps/quill/client/components/playground-view.tsx b/apps/quill/client/components/playground-view.tsx
index 511226b4..9b469037 100644
--- a/apps/quill/client/components/playground-view.tsx
+++ b/apps/quill/client/components/playground-view.tsx
@@ -1,6 +1,6 @@
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { AnimatePresence, motion } from "framer-motion";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useDeferredValue, useEffect, useMemo, useRef, useState } from "react";
 import { USE_CASE_PRESETS } from "../../src/lib/presets";
 import { analyzeText, scoreDeterministic } from "../../src/lib/rubric";
 import type { Guide, UseCase } from "../../src/lib/types";
@@ -255,7 +255,14 @@ export function PlaygroundView({
     };
   }, [output]);
 
-  const snapshot = useMemo(() => analyzeText(visibleOutput), [visibleOutput]);
+  // Defer the rapidly changing visibleOutput so the expensive text analysis
+  // doesn't block the main thread during the 24ms interval streaming.
+  const deferredVisibleOutput = useDeferredValue(visibleOutput);
+
+  const snapshot = useMemo(
+    () => analyzeText(deferredVisibleOutput),
+    [deferredVisibleOutput]
+  );
   const { score, details } = useMemo(
     () =>
       guide

From bff43fc48a28df0f94b6c072ec4460a094e6a311 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sun, 31 May 2026 05:21:55 +0000
Subject: [PATCH 2/2] =?UTF-8?q?=E2=9A=A1=20Bolt:=20[performance=20improvem?=
 =?UTF-8?q?ent]=20Defer=20expensive=20text=20analysis=20during=20streaming?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: aloewright <3641844+aloewright@users.noreply.github.com>