Fix race condition when fetch tab data

src/screens/Classroom/Header/index.js

@@ -18,6 +18,7 @@ function Header({
   classroom,
   selectedTabOption,
   onSelectTabOption,
+  isLoading,
 }) {
   const { title, paper, tabs, avatar, tooltip } = styles[layoutType];
   return classroom === null ? (
@@ -46,7 +47,11 @@ function Header({
           sx={tabs}
         >
           {Object.values(TAB_OPTIONS).map(option => (
-            <Tab key={option.value} label={option.lable} />
+            <Tab
+              key={option.value}
+              label={option.lable}
+              disabled={isLoading && option.value !== selectedTabOption}
+            />
           ))}
         </Tabs>
       </Paper>

src/screens/Classroom/View.js

@@ -15,6 +15,7 @@ function View({
   announcementsTabData,
   assignmentsTabData,
   peopleTabData,
+  isLoading,
 }) {
   const { container } = styles[layoutType];
   return (
@@ -24,6 +25,7 @@ function View({
         classroom={classroom}
         selectedTabOption={selectedTabOption}
         onSelectTabOption={onSelectTabOption}
+        isLoading={isLoading}
       />
       <AnnouncementsTab
         layoutType={layoutType}

src/screens/Classroom/index.js

@@ -119,6 +119,7 @@ function Classroom() {
       peopleTabData={
         tabData && tabData.tab === 'people' ? tabData : { state: 'gone' }
       }
+      isLoading={tabData && tabData.state === 'loading'}
     />
   );
 }