Optimize Theme Switcher Snapshots for Browserless.io#19
Draft
Optimize Theme Switcher Snapshots for Browserless.io#19
Conversation
- Implement API Readiness State (warm-up) to ensure browser availability before unlocking the theme switcher. - Batch multiple snapshot requests into a single API call to reduce WebSocket connections. - Process batched snapshot tasks in parallel within a single browser instance for visual consistency. - Add a Debug UI (floating button + popover) to manually toggle Puppeteer and modern-screenshot fallbacks. - Display the active snapshot method (Puppeteer, modern-screenshot, or Instant) as status text during the wipe animation. - Fix race conditions and improve state management during theme transitions.
|
👋 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. |
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
- Remove unused puppeteer import to fix Vercel build failure. - Process snapshot tasks sequentially to avoid 'detached frame' errors on low-concurrency Browserless.io connections. - Use createPortal for DebugControls to ensure fixed viewport positioning. - Address race conditions in useThemeWipe fallback logic. - Improve API readiness warmup verification.
- Implement API Readiness State (warm-up) to ensure browser availability before unlocking the theme toggle. - Batch multiple snapshot requests into a single API call to reduce WebSocket connection overhead. - Process batched snapshot tasks sequentially to maintain stability on low-concurrency connections like Browserless.io. - Inline all readable CSS rules in the DOM serializer to ensure visually perfect, styled snapshots in remote headless browsers. - Add a Debug UI (floating button + popover) portaled to document.body for manual fallback testing. - Display the active snapshot method (Puppeteer, modern-screenshot, or Instant) as status text during transitions. - Fix Vercel build errors (unused imports) and race conditions in transition logic.
- Implement API Readiness State (warm-up) to ensure browser availability. - Batch multiple snapshot requests into a single API call for Browserless.io compatibility. - Inline all readable CSS rules and preserve body attributes in the DOM serializer for visually perfect snapshots. - Perform a real theme switch and wait for React re-render before capturing Snapshot B. - Increase Snapshot API settle delay to 500ms for robust rendering. - Add portaled Debug UI for manual fallback testing and on-screen status feedback. - Fix Vercel build errors and race conditions in transition logic.
- Use fresh browser connections per request to resolve TargetCloseError. - Inline CSS rules and preserve body attributes for visually perfect rendering. - Wait for React re-render (3 frames) and font readiness before taking snapshots. - Batch snapshots into single connection with sequential task processing. - Implement API readiness check and debug UI with fallback logic. - Fix race conditions and build errors.
- Use fresh browser connections per request to resolve TargetCloseError. - Async getFullPageHTML to wait for fonts and images before serialization. - Inline CSS rules (1.5MB limit) and preserve body attributes for visually perfect rendering. - Wait for React re-render (3 frames + 250ms) before capturing Snapshot B. - Batch snapshots into single connection with sequential task processing and 1000ms settle delay. - Remove non-visual elements (script, template, etc.) to reduce payload size. - Implement API readiness check and portaled Debug UI with fallback logic. - Fix Vercel build errors and race conditions.
- Use fresh browser connections per request to resolve TargetCloseError. - Async getFullPageHTML to wait for fonts and images before serialization. - Resolve relative URLs in DOM and inlined CSS to absolute URLs for remote browsers. - Inline CSS rules (1.5MB limit) and images (via canvas) for visually perfect rendering. - Wait for React re-render (3 frames + 250ms) before capturing Snapshot B. - Batch snapshots into single connection with sequential task processing and 1000ms settle delay. - Implement API readiness check and portaled Debug UI with fallback logic. - Fix Vercel build errors and race conditions.
…lity - Implement robust CSS URL resolution in dom-serializer using new URL() with stylesheet base. - Use fresh browser connections per request to resolve TargetCloseError. - Async getFullPageHTML to wait for fonts and images before serialization. - Resolve relative URLs in DOM and inlined CSS to absolute URLs for remote browsers. - Inline CSS rules (1.5MB limit) and images (via canvas) for visually perfect rendering. - Wait for React re-render (3 frames + 250ms) before capturing Snapshot B. - Batch snapshots into single connection with sequential task processing and 1000ms settle delay. - Implement API readiness check and portaled Debug UI with fallback logic. - Fix Vercel build errors and race conditions.
…lity - Implement robust asset inlining in dom-serializer (fonts, images, bg-images) as data URLs. - Robustly resolve CSS relative URLs using new URL() with stylesheet base. - Use fresh browser connections per request to resolve TargetCloseError. - Async getFullPageHTML to wait for fonts and images before serialization. - Wait for React re-render (3 frames + 250ms) before capturing Snapshot B. - Batch snapshots into single connection with sequential task processing and 1000ms settle delay. - Implement API readiness check and portaled Debug UI with fallback logic. - Fix Vercel build errors and race conditions.
…, and mobile layout shifts - Implement conditional scrollbar compensation in useThemeWipe to prevent mobile layout shifts. - Robustly resolve and inline all visual assets in dom-serializer (fonts, images, bg-images) as data URLs. - Robustly resolve CSS relative URLs using new URL() with stylesheet base. - Use fresh browser connections per request to resolve TargetCloseError. - Async getFullPageHTML to wait for fonts and images before serialization. - Wait for React re-render (3 frames + 250ms) before capturing Snapshot B. - Batch snapshots into single connection with sequential task processing and 1000ms settle delay. - Implement API readiness check and portaled Debug UI with fallback logic. - Fix Vercel build errors and race conditions.
…free transitions - Implement masking phase in useThemeWipe to hide the background theme-switch 'dance' during snapshot capture. - Add static background layer to WipeAnimationOverlay to prevent target theme flash before wipe starts. - Robustly resolve and inline visual assets in dom-serializer (fonts, images, bg-images) as data URLs. - Implement conditional scrollbar compensation to prevent mobile layout shifts. - Use fresh browser connections per request to resolve TargetCloseError and ensure stability. - Batch snapshots into single connection with sequential task processing and 1000ms settle delay. - Implement API readiness check and portaled Debug UI with fallback logic. - Fix Vercel build errors and race conditions.
…free transitions - Implement masking phase in useThemeWipe to hide background theme-switch 'dance'. - Ensure consistent viewport dimensions (window.innerWidth) across all snapshot captures and overlay layers to prevent layout shifts. - Add static background layer to WipeAnimationOverlay for smooth transition from mask to animation. - Robustly resolve and inline visual assets in dom-serializer (fonts, images, bg-images) as data URLs. - Implement conditional scrollbar compensation to prevent mobile layout shifts. - Use fresh browser connections per request to resolve TargetCloseError and ensure stability. - Batch snapshots into single connection with sequential task processing and 1000ms settle delay. - Implement API readiness check and portaled Debug UI with fallback logic. - Fix Vercel build errors and race conditions.
…free transitions - Implement masking phase in useThemeWipe to hide background theme-switch 'dance'. - Ensure consistent viewport dimensions by capturing fixed width/height at start. - Update WipeAnimationOverlay to use captured pixel dimensions to prevent mobile layout shifts. - Robustly resolve and inline all visual assets in dom-serializer (fonts, images, bg-images) as data URLs. - Implement conditional scrollbar compensation to prevent mobile layout shifts. - Use fresh browser connections per request in API to resolve TargetCloseError. - Batch snapshots into single connection with sequential task processing and 1000ms settle delay. - Implement API readiness check and portaled Debug UI with fallback logic. - Fix Vercel build errors and race conditions.
- Implement API Readiness State (warm-up) to manage Browserless.io concurrency. - Batch multiple snapshot requests into a single API call with sequential processing. - Implement masking phase in useThemeWipe to eliminate theme-switch flashing. - Robustly inline and resolve all visual assets (fonts, images, bg-images) in dom-serializer. - Ensure consistent full-screen viewport dimensions to prevent layout shifts. - Implement conditional scrollbar compensation for accurate mobile/desktop rendering. - Remove developer debug UI while preserving on-screen status feedback during animation. - Fix Vercel build errors and resolve TargetCloseError issues in Snapshot API.
TimChinye
force-pushed
the
fix-browserless-concurrency-limits-11555592774675683851
branch
from
caa3557 to
38dd6e1
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This change addresses the 429 errors from Browserless.io by optimizing the snapshot workflow. It implements a warm-up check on mount to ensure the API is ready, batches both theme snapshots into a single request, and adds a developer debug menu for testing fallback paths. The animation overlay now also provides feedback on the method being used.
PR created automatically by Jules for task 11555592774675683851 started by @TimChinye