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

Improve layout shift on load #1104

Open
FlxMgdnz opened this issue Oct 18, 2023 · 4 comments
Open

Improve layout shift on load #1104

FlxMgdnz opened this issue Oct 18, 2023 · 4 comments
Labels
enhancement New feature or request

Comments

@FlxMgdnz
Copy link
Member

FlxMgdnz commented Oct 18, 2023

Pages that integrate Hanko currently suffer from a layout shift or "flicker effect" when the Hanko Element loads:

20231018-0941-30.8917334.mp4

This should be improved. Ideas:

  • Give the component reasonable values for min-height and min-width
  • Implement transitions, i.e. if the content of the component changes, do a transition from height a to height b (to avoid the flicker effect) - this should also work on initial load, but also all other layout changes when going through the flows will benefit
@incruder1
Copy link

If this issue is available. can i try it?

@FlxMgdnz FlxMgdnz added the enhancement New feature or request label Oct 26, 2023
@jatingodnani
Copy link

@FlxMgdnz in which folder can i find this page?

@FlxMgdnz
Copy link
Member Author

FlxMgdnz commented Dec 1, 2023

It's here somewhere: https://github.com/teamhanko/hanko/tree/main/frontend/elements/src

I think part of the task is figuring out the right hierarchical level where to apply the changes to.

@jatingodnani
Copy link

@FlxMgdnz i found the file , how can i run this page on localhost?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
Status: 🔖 Up next
Development

No branches or pull requests

3 participants