[Bug]: Transition from Compare tab to Professor tab has lag time

[AbhiramTadepalli]

What happened?

When 3 tabs are available, once all data has loaded. Going from Tab 3 (compare) to Tab 1 (professor) causes some lag time.

Could have something to do with loading-unloading of the Tab Components in the carousel

• [x] Ensure that an API call is not being made every time you switch tabs
• [x] Fix the lag time

Version

Beta 0.1.0

What browsers are you seeing the problem on?

No response

Relevant log output

No response

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[AbhiramTadepalli]

@TyHil what was your insight on this?

[TyHil]

Currently we're using the framer library to animate between the tabs which unmounts the tabs when switched, so they have to reload when switched back. The solution right now could be to ditch the animations and use Material UI's TabPanel which has a keepMounted prop. Animation is very likely possible with TabPanel but could be differed to after the redesign release. @AbhiramTadepalli what do you think?

Material UI Tabs: https://mui.com/material-ui/react-tabs/ TabPanel API: https://mui.com/material-ui/api/tab-panel/ This would all be changed in the src/components/common/Carousel/carousel.tsx file btw.

[AbhiramTadepalli]

Sidenote: I think the transition looks really good and it should be kept.

However, even after https://github.com/UTDNebula/utd-trends/commit/aa89093ded77bf8e11d0d161b909584114154de2 it exhibits lag time when switching from the compare tab to the professor tab. Which probably has something to do with the actual unmounting and not the transition.

@TyHil do you concur?

[TyHil]

I like the transition too but I don't think it's worth the buggy stuff. Although I haven't been able to recreate the lag.

@harshptl05 is planning to use MUI TabPanel which should keep it mounted tho