tabs: Flash of unstyled content

[DanielSmith]

What is the recommended way to load tabs so that it does not flash like this? I am using the example from the docs:

[sajadevo]

Hi @DanielSmith,

Which example you've used because on the docs as you can see we don't have any flashing.

Cheers, Sajad

[sajadevo]

Hey @DanielSmith,

I've tested the tabs and they're working find please update to the latest version of @material-tailwind/react maybe it cause by previous versions of the library.

Cheers, Sajad

[blainehill2001]

Hi,

I also have the same issue, but am running on version 1.2.5.

It loads and shows the concatenation of all tabs for a split second. My tab code is taken straight from the documentation and am running on React 18.2.

See attached video:

https://user-images.githubusercontent.com/44901957/212768390-edd6d408-a9fe-456d-a9f6-15e90f36716a.mov

[boomspot]

Same issue here with 1.25

[sajadevo]

This issue has been fixed on v1.4.0.

[juanjlunar]

It is still happening on v1.4.2

[sajadevo]

@juanjlunar could you please share a short video or some code to reproduce the issue?

[juanjlunar]

@sajadevo

https://user-images.githubusercontent.com/26415034/224090732-5615b6b1-ffaa-4774-8d6f-f7f335170d9c.mov

Data to render:

const testData = [
  {
    id: 1,
    tab: 'tab-1',
    panelData: ['paragraph tab 1'],
  },
  {
    id: 2,
    tab: 'tab-2',
    panelData: ['paragraph tab 2'],
  },
  {
    id: 3,
    tab: 'tab-3',
    panelData: ['paragraph tab 3'],
  },
  {
    id: 4,
    tab: 'tab-4',
    panelData: ['paragraph tab 4'],
  },
]; 

Render tabs:

        <Tabs defaultValue={testData[0].id}>
          <TabsHeader>
            <div className="flex">
              {testData.map((testSingleData) => {
                return (
                  <Tab key={testSingleData.id} value={testSingleData.id}>
                    {testSingleData.tab}
                  </Tab>
                );
              })}
            </div>
          </TabsHeader>
          <TabsBody>
            {testData.map((testSingleData) => {
              return (
                <TabPanel
                  key={`panel-${testSingleData.id}`}
                  value={testSingleData.id}
                >
                  {testSingleData.panelData.map((p) => {
                    return <p>{p}</p>;
                  })}
                </TabPanel>
              );
            })}
          </TabsBody>
        </Tabs>

[Colbyg13]

This is still happening in "@material-tailwind/react": "^2.1.2"

From what I can tell it's an issue within the TabsBody and mapping through the array returning TabPanel's.

It's even happening on your documentation page.

This is just refreshing the page.

For anyone having this issue my current "fix" is to not map through my tabsArray and instead use a function to return a TabPanel based on the activeTab. The tabs lose the nice fade in/fade out animations, but it feels better than having extra elements showing on page load.

In my case the tabs are housing different types of payment forms, but the general idea is that getForm dynamically changes the form.