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

Prevent layout shift when the theme switcher is rendered #5085

Closed
obulat opened this issue Oct 27, 2024 · 1 comment · Fixed by #5116
Closed

Prevent layout shift when the theme switcher is rendered #5085

obulat opened this issue Oct 27, 2024 · 1 comment · Fixed by #5116
Assignees
Labels
🕹 aspect: interface Concerns end-users' experience with the software ✨ goal: improvement Improvement to an existing user-facing feature 🟧 priority: high Stalls work on the project or its dependents 🧱 stack: frontend Related to the Nuxt frontend

Comments

@obulat
Copy link
Contributor

obulat commented Oct 27, 2024

Problem

Currently, when the theme switcher is rendered, it shifts the footer layout. This was done to avoid client-server mismatch and subsequent re-rendering.

Description

A better solution would be to render a "unknown" value on the server, and then, in onMounted, set the correct value in the theme switcher. This way, there will be no layout shifting and no client-server mismatch.

Alternatives

Additional context

@obulat obulat added ✨ goal: improvement Improvement to an existing user-facing feature 🕹 aspect: interface Concerns end-users' experience with the software 🟧 priority: high Stalls work on the project or its dependents 🧱 stack: frontend Related to the Nuxt frontend labels Oct 27, 2024
@openverse-bot openverse-bot moved this to 📋 Backlog in Openverse Backlog Oct 27, 2024
@dhruvkb dhruvkb self-assigned this Oct 28, 2024
@openverse-bot openverse-bot moved this from 📋 Backlog to 📅 To Do in Openverse Backlog Oct 28, 2024
@obulat obulat mentioned this issue Oct 30, 2024
9 tasks
@dhruvkb
Copy link
Member

dhruvkb commented Oct 31, 2024

Another issue is that the "System" option also includes the actual applied theme in the option name, which causes hydration issues on clients whose default system theme is dark.

Image

@openverse-bot openverse-bot moved this from 📅 To Do to 🏗 In Progress in Openverse Backlog Oct 31, 2024
@openverse-bot openverse-bot moved this from 🏗 In Progress to ✅ Done in Openverse Backlog Oct 31, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🕹 aspect: interface Concerns end-users' experience with the software ✨ goal: improvement Improvement to an existing user-facing feature 🟧 priority: high Stalls work on the project or its dependents 🧱 stack: frontend Related to the Nuxt frontend
Projects
Archived in project
Development

Successfully merging a pull request may close this issue.

2 participants