Tabs should lazy load active components

[adaboese]

I was very confused when I've used tabs to allow switching between multiple editors and everything broke. Turns out that Tabs load all the contents even if they are not visible.

I think this could be easily fixed if the API instead lazy loaded components, i.e.

import type { TabsProps } from '~/components/ui/tabs'
import * as Tabs from '~/components/ui/tabs'

export const Demo = (props: TabsProps) => {
  const options = [
    { id: 'react', label: 'React' },
  ]
  return (
    <Tabs.Root defaultValue="react" {...props}>
      <Tabs.List>
        {options.map((option) => (
          <Tabs.Trigger key={option.id} value={option.id} disabled={option.disabled}>
            {option.label}
          </Tabs.Trigger>
        ))}
        <Tabs.Indicator />
      </Tabs.List>
      <Tabs.Content value="react">{() => <React />}</Tabs.Content>
    </Tabs.Root>
  )
}

[cschroeter]

@adaboese

I'm not sure if I understand your problem but you should be able to <Tabs.Root lazyMount />

[adaboese]

Ah, missed that option!