⚡ Bolt: Use deferred value for rubric analysis during text streaming#60
⚡ Bolt: Use deferred value for rubric analysis during text streaming#60aloewright wants to merge 1 commit into
Conversation
Wrap visibleOutput with useDeferredValue before passing it to the expensive synchronous analyzeText computation. This prevents the main thread from blocking during the rapid character-by-character fake streaming (~24ms intervals), keeping the UI responsive. Co-authored-by: aloewright <3641844+aloewright@users.noreply.github.com>
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
|
Warning Review limit reached
More reviews will be available in 42 minutes and 32 seconds. Learn how PR review limits work. Your organization has run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Deploying with
|
| Status | Name | Latest Commit | Updated (UTC) |
|---|---|---|---|
| ✅ Deployment successful! View logs |
postpilot | 0d57397 | Jun 01 2026, 05:48 AM |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces performance optimizations to prevent main thread blocking during rapid fake text streaming in the playground view. Specifically, it integrates React's useDeferredValue hook to wrap the rapidly updating visibleOutput state before passing it to the expensive synchronous analyzeText function. Additionally, a documentation file .jules/bolt.md has been added to record this learning and action. There are no review comments, and I have no additional feedback to provide.
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 0d57397454
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| const deferredVisibleOutput = useDeferredValue(visibleOutput); | ||
| const snapshot = useMemo( | ||
| () => analyzeText(deferredVisibleOutput), |
There was a problem hiding this comment.
When a user runs the playground again after a previous result, useDeferredValue can keep returning the prior output while visibleOutput is already streaming the new response. The render guard for <RubricSnapshot> still uses visibleOutput.length > 0, so the UI can display scores/details computed from the previous answer under the new streaming text until the deferred update catches up, which is especially likely when these expensive renders are being interrupted. Consider gating the snapshot on the deferred text being current, or clearing/hiding the rubric while the deferred value is stale.
Useful? React with 👍 / 👎.
There was a problem hiding this comment.
Pull request overview
Optimizes the Quill playground’s “fake streaming” UI by deferring expensive deterministic rubric analysis work so frequent visibleOutput updates don’t force synchronous scoring on every render.
Changes:
- Wraps
visibleOutputwithuseDeferredValuebefore callinganalyzeTextinapps/quill/client/components/playground-view.tsx. - Adds a Bolt learning note documenting the performance rationale in
.jules/bolt.md.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| apps/quill/client/components/playground-view.tsx | Defers rubric analysis input to reduce main-thread contention during rapid streaming updates. |
| .jules/bolt.md | Documents the performance learning/action behind deferring expensive rubric computations. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| // ⚡ Bolt: Wrap visibleOutput with useDeferredValue before passing it to the expensive | ||
| // synchronous analyzeText computation. This prevents the main thread from blocking | ||
| // during the rapid character-by-character fake streaming (~24ms intervals), keeping | ||
| // the UI responsive. | ||
| const deferredVisibleOutput = useDeferredValue(visibleOutput); | ||
| const snapshot = useMemo( | ||
| () => analyzeText(deferredVisibleOutput), | ||
| [deferredVisibleOutput] | ||
| ); |
| @@ -0,0 +1,3 @@ | |||
| ## 2024-06-01 - Prevent main thread blocking during fake text streaming | |||
| @@ -0,0 +1,3 @@ | |||
| ## 2024-06-01 - Prevent main thread blocking during fake text streaming | |||
| **Learning:** During rapid state updates like fake text streaming (e.g. interval ~24ms), passing the rapidly changing state directly to expensive synchronous evaluation functions (like deterministic scoring/analyzing) causes severe main thread blocking and unresponsiveness. | |||
| **Action:** Use React's `useDeferredValue` to wrap the rapidly updating stream state before passing it to expensive synchronous functions. This allows React to prioritize UI updates and interrupt the expensive rendering. | |||
💡 What: The optimization implemented
Wrapped the
visibleOutputstate withuseDeferredValuebefore passing it to theanalyzeTextfunction inapps/quill/client/components/playground-view.tsx.🎯 Why: The performance problem it solves
During the fake streaming process in the playground,
visibleOutputupdates very frequently (approx. every 24ms). TheanalyzeTextand subsequentscoreDeterministicfunctions are synchronous and computationally heavy. By directly depending onvisibleOutput, they were forced to execute on the main thread for every single character added, causing severe main thread blocking and UI unresponsiveness.📊 Impact: Expected performance improvement
Prevents UI blocking during the "streaming" state by allowing React to interrupt the expensive rendering/calculations in favor of immediate UI updates. The scoring will now update seamlessly as the text streams in, without causing jank or stuttering.
🔬 Measurement: How to verify the improvement
Run the playground application locally and trigger a prompt. Observe the smooth character-by-character rendering and responsive UI during the streaming phase, even as the rubric scoring calculation catches up in the background.
PR created automatically by Jules for task 2958492942459268870 started by @aloewright