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

During the initial rendering of a <TabContent>, no tab is displayed #425

Closed
lovasoa opened this issue Jan 17, 2022 · 1 comment · Fixed by #426
Closed

During the initial rendering of a <TabContent>, no tab is displayed #425

lovasoa opened this issue Jan 17, 2022 · 1 comment · Fixed by #426

Comments

@lovasoa
Copy link
Contributor

lovasoa commented Jan 17, 2022

When rendering a on the server side, the initial render has all tabs disabled. We have to wait until the page is fully loaded and all the components are mounted on the client side for the active tab content to appear. This causes flickering, a bad user experience, and a bad SEO.

The problem is in TabPane:
https://github.com/bestguy/sveltestrap/blob/master/src/TabPane.svelte#L15-L21

It first loads activeTabId from its parent. But the parent initially sets it to undefined.
Then it waits until it is mounted before sending to the parent the information that it is active.
Then it waits until it receives the same information back from the parent before finally setting tabOpen=true

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants