Skip to content
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

Notifications: work around layout shift issues #313

Open
agjohnson opened this issue Mar 21, 2024 · 1 comment
Open

Notifications: work around layout shift issues #313

agjohnson opened this issue Mar 21, 2024 · 1 comment
Assignees
Labels
Accepted Accepted issue on our roadmap Improvement Minor improvement to code Needed: design decision A core team decision is required

Comments

@agjohnson
Copy link
Contributor

With the introduction of async loaded notifications, it can be quite frequent that the UI introduces layout shift, as notifications are loaded inline at the top of the page. We will need to account for this in some way, either with hardcoded space, overlapping notifications, floating notifications at the top of the window, or some other intervention.

@agjohnson agjohnson added Improvement Minor improvement to code Accepted Accepted issue on our roadmap Needed: design decision A core team decision is required labels Mar 21, 2024
@agjohnson agjohnson added this to the Deprecation and cleanup milestone Mar 21, 2024
@agjohnson agjohnson self-assigned this May 21, 2024
@agjohnson
Copy link
Contributor Author

I gave a try to hardcoding space for notifications between the main content and the header and was not happy with this option.

Without a notification the gap was too big and with a notification the space was too cramped. I only allowed for one notification worth of space. So two notifications would still involve CLS, though I would expect room for a single notification to be enough for the majority of cases.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Accepted Accepted issue on our roadmap Improvement Minor improvement to code Needed: design decision A core team decision is required
Projects
Status: In progress
Development

No branches or pull requests

1 participant