-
Notifications
You must be signed in to change notification settings - Fork 360
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Fleet UI: Updated styles to license expiration banner #18856
Conversation
@@ -6,5 +6,8 @@ | |||
// of the main-content when there is a banner. (e.g. sandbox mode) | |||
// Without it the main content pushes the banner off the page. | |||
overflow: auto; | |||
animation: fade-in 250ms ease-out; | |||
|
|||
> :not(.main-content--animation-disabled) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Open for other solutions to not make the banner flash on page change
tldr:
main-content
has animation: fade-in 250ms ease-out;
applied to it, but looks super weird to have that banner flash over and over on each page click since it's not moving (feels not React like at all!), so I removed the animation from the banners only by putting it in a div wrapper called .main-content--animation-disabled
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
see above
👀 |
/> | ||
)} | ||
/> | ||
<div className={`${baseClass}--animation-disabled`}> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Would React.memo
izing the components prevent those undesired rerenders/animations?
@@ -6,5 +6,8 @@ | |||
// of the main-content when there is a banner. (e.g. sandbox mode) | |||
// Without it the main content pushes the banner off the page. | |||
overflow: auto; | |||
animation: fade-in 250ms ease-out; | |||
|
|||
> :not(.main-content--animation-disabled) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
see above
Merging before freeze. TODO: look into memoization to prevent rerenders |
Issue
Cerra #17860
Description
Other
<InfoBanner/>
component and its stylingScreenshots
Checklist for submitter
If some of the following don't apply, delete the relevant line.
changes/
,orbit/changes/
oree/fleetd-chrome/changes
.