tab conpment Too slow to switch

[zhoutengshen]

I have a problem in switching component. It's too slow to switch animation, there are more delays than 1000ms. My Component structure looks like this:

<div>
    <Tabs
        value={value}
        onChange={this.handleChange}
        >
            <Tab label="Item One" />
            <Tab label="Item Two" />
     </Tabs>
      {value === 0 && <TabContainer>Item One</TabContainer>}
</div>

The component is a complex component, where there are many data needs to be displayed. I want the < Tab > component to complete the switching animation immediately, instead of waiting to happen with the < TabContainer > component.

[oliviertassinari]

@zhoutengshen Please provide a full reproduction test case. This would help a lot 👷 . A live example would be perfect. This codesandbox.io template may be a good starting point. Thank you!

[zhoutengshen]

This is part of my project at codesandbox's address: . There is delay in Tab handover animation here. (ps:, I'm sorry for the bad English). @oliviertassinari

[ivaqmo123]

I am having the same issue...the switch to a tab with a mui-datatable inside takes about 3 seconds to switch...any help please?

Ivan

[oliviertassinari]

@ivaqmo123 Try using the React dev tool to see what rerender. Also, try replacing the tab component with a simple button to see if it helps. The tab slowness is likely the tip of the iceberg, hiding something wrong.

[ivaqmo123]

Hi @oliviertassinari, i changed the tab to render another mui datatable with less récords and the tab switch is a little bit faster. Seems this delay happens when tab needs to render More data, in muy case it Is 167 Rows which i think Is not many data.

[orpheus]

I'm facing a similar issue when switching between tabs. On change it triggers a redux action which changes a variable that is fed to a connected container component which renders the tabs. There's a lot going on in the connected component and I think that's what's causing the lag. Remove the action that fires onChange and the speed of tab switching is fine.

My case is too complex to easily reproduce. But I wanted to just note that I have a similar issue when dealing with large data sets that have to go through a rerender process on tab change. Ill try to memoize what I can and see if that helps

[httol]

Same issues i think

[tobychidi-zz]

Still having the same issue. Please what can be done?

The tab switch animation is frozen while components render...

[prasheel888]

Still having the same issue. Please what can be done?

The tab switch animation is frozen while components render...

did you find any alternative bro?

[Pedanfer]

Solution for UX while the user waits:

  const [isTabLoading, setIsTabLoading] = useState(false);

  const tabsData: Record<string, React.ReactNode> = {
    dashboard: isTabLoading ? <Loading /> : <Dashboard />,
    administrative: isTabLoading ? <Loading /> : <Admin />,
    consumedWater: <Loading />,
    communications: <Loading />,
    hydricEfficiency: <Loading />,
    alarms: <Loading />,
    gpsVisor: <Map />,
  };

        <Tabs
          onAnimationStart={() => setIsTabLoading(true)}
          onAnimationEnd={() => setIsTabLoading(false)}
          value={value}
          onChange={handleChange}
          orientation="vertical"
          variant="standard"
          className="tabContainer"
          component="div"
          sx={{
            width: "100%",
            "& .MuiTabs-indicator": {
              display: "none",
            },
          }}
        >
          {Object.keys(tabsData).map((title, index) => (
            <TabItem
              key={index}
              theme={theme}
              label={t(title)}
              value={index}
              selected={value === index}      
            />
          ))}
        </Tabs>