I am using a svelte tabs component that is described here:
https://svelte.dev/repl/8e68120858e5322272dc9136c4bb79cc?version=3.5.1
Inside two tabs I have the following svelte template code:
<TabPanel>
<Filter/>
<div id='to-filter' class='scroll-container'>
{#each value.items as item, i}
<Item
itemFilter={item.name}
itemDay={item.itemDay}
itemMonth={item.itemMonth}
itemYear={item.itemYear}
itemCity={item.itemCity}
itemCountry={item.itemCountry}
itemVenue={item.venue}
itemLink={item.link}
itemDotw={itemDatesOnly[i].itemDotw}
/>
{/each}
</div>
</TabPanel>
Every time I click on the tabs to switch between the data, it seems to reload or rebuild it. How can I adjust the tab component so that it's not destroying the data each time?
Replace the following code block in TabPanel.svelte
{#if $selectedPanel === panel}
<slot></slot>
{/if}
With something like this:
<div hidden={$selectedPanel !== panel}>
<slot></slot>
</div>
This will ensure that all Tab Panels that are not currently active get a hidden
attribute, rendering them invisible for the user, but they will be present in the DOM.
This should prevent your nested components from being re-rendered, because they are not destroyed and remounted whenever you toggle between tabs.