feat: add toggle for animated background with performance optimizations #299
Conversation
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
![roomote[bot]](https://avatars.githubusercontent.com/in/1546624?s=60&v=4){kind=small}
- Add user preference to disable animated background - Implement reduced motion detection for accessibility - Optimize animation performance (reduce particles, throttle mouse events, 30fps) - Add floating toggle button to enable/disable background - Persist user preference in localStorage Addresses GPU strain and battery drain issues reported by users
roomote
bot
requested review from
mrubens,
cte and
hannesrudolph
as code owners
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
![ellipsis-dev[bot]](https://avatars.githubusercontent.com/in/64358?s=60&v=4){kind=small}
| setIsEnabled(newValue); | ||
| localStorage.setItem('animatedBackgroundEnabled', String(newValue)); | ||
| // Reload the page to apply changes | ||
| window.location.reload(); |
There was a problem hiding this comment.
Reloading the page to apply the toggle isn’t optimal for UX; consider using state management or context to re-render components without a full page reload.
| {tutorial_videos_json_1.default.videos.map(function (video) { return (<div key={video.id} className="video-item"> | ||
| <div className="video-container" onClick={function (e) { | ||
| var target = e.currentTarget; | ||
| target.innerHTML = "<iframe src='https://www.youtube.com/embed/".concat(video.id, "?autoplay=1' title='").concat(video.title, "' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture' allowFullScreen></iframe>"); |
There was a problem hiding this comment.
Directly setting innerHTML on click bypasses React’s rendering. Consider using state to conditionally render an iframe instead.
| ctx.fillRect(0, 0, canvas.width, canvas.height); | ||
| }); | ||
| // Draw grid lines with perspective effect | ||
| ctx.strokeStyle = "rgba(50, 50, 70, ".concat(gridOpacity, ")"); |
There was a problem hiding this comment.
Consider extracting magic numbers (e.g. gridOpacity, gridSize, and curve strengths) into named constants to improve maintainability and ease of tuning.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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 PR addresses the GPU strain and battery drain issues caused by the animated background graphics on the documentation site.
Changes Made
1. User Preference Toggle
2. Accessibility Improvements
prefers-reduced-motionmedia query3. Performance Optimizations
willChange: transformCSS hint for better GPU optimizationalpha: falsecanvas context for better performance4. Code Organization
BackgroundTogglecomponent with proper stylingAnimatedBackgroundcomponent to respect user preferencesTesting
Impact
This change allows users who experience GPU strain or battery drain to disable the animated background while maintaining the visual appeal for users who prefer it. The performance optimizations also reduce the resource usage even when the animation is enabled.
Fixes the issue reported about GPU strain and battery drain on laptops when viewing the documentation.
Important
Adds a toggle for animated backgrounds with performance optimizations and accessibility improvements.
BackgroundTogglecomponent to toggle animated background, saving preference inlocalStorage.prefers-reduced-motionto automatically disable animation for users with motion sensitivity.AnimatedBackground.js.willChange: transformCSS hint for GPU optimization.BackgroundToggleandAnimatedBackgroundintoLayout/index.js.Codiconcomponent toMDXComponents.js.localStoragepersistence.This description was created by
for bd6e775. You can customize this summary. It will automatically update as commits are pushed.