Svelte Tabs - Don't reload / destroy data

Question

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?

Answer 1

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.