search

bestguy / sveltestrap

Bootstrap 4 & 5 components for Svelte
https://sveltestrap.js.org
MIT License
1.3k stars 183 forks source link

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

Closed lovasoa closed 2 years ago

lovasoa commented 2 years ago

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

bestguy commented 2 years ago

Thanks @lovasoa , released in https://github.com/bestguy/sveltestrap/releases/tag/v5.8.3