Hide the form-switch animation when the options page loads the initial values #2807
Conversation
…alizes the current values.
There was a problem hiding this comment.
Pull request overview
This PR fixes a visual bug where form-switch elements display a distracting animation when the options/settings page loads. The solution temporarily disables CSS transitions on page load and re-enables them after initial values are set.
Key changes:
- Adds a
no-transitionsCSS class that disables all transitions on descendant elements - Applies the class to the body element on initial page load
- Removes the class after a 200ms delay once settings are initialized
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| keepassxc-browser/options/options.html | Adds no-transitions class to body element to disable transitions on initial load |
| keepassxc-browser/options/options.css | Defines the no-transitions CSS rule that disables all transitions on child elements |
| keepassxc-browser/options/options.js | Implements timeout logic to remove no-transitions class after 200ms, allowing normal transitions to resume |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
varjolintu
left a comment
varjolintu
left a comment
There was a problem hiding this comment.
Implement the Copilot's suggestion.
Apply suggestion from GitHub Copilot to narrow CSS selector. Co-authored-by: Copilot <[email protected]>
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Co-authored-by: Copilot <[email protected]>
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 3 out of 3 changed files in this pull request and generated no new comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
2 participants
This hides the bootstrap animation on the
form-switchelements in the Settings page when the page loads the initial values.Screenshots or videos
When I open the Settings, I see this distracting animation:
Screen.Recording.2025-12-22.at.22.04.37.mov
Testing strategy
When I was testing without
setTimeoutthen the animation still showed up for me. I don't know how the browser internals keeps track of it but adding a short timeout seems reasonable to me.To test, simply open the settings page and use your browser's hard reload shortcut.
Type of change