chore(home): wait for app to load before displaying tabs

AXeL-dev · May 21, 2022 · e5855b0 · e5855b0
1 parent ad52338
commit e5855b0
Showing 1 changed file with 46 additions and 40 deletions.
diff --git a/src/ui/components/pages/Home/index.tsx b/src/ui/components/pages/Home/index.tsx
@@ -5,13 +5,15 @@ import { HomeView } from 'types';
 import Tab from './Tab';
 import TabPanel, { RecentVideosCount } from './TabPanel';
 import { useAppSelector } from 'store';
+import { selectApp } from 'store/selectors/app';
 import { selectSettings } from 'store/selectors/settings';
 import { selectWatchLaterVideosCount } from 'store/selectors/videos';
 import TabActions from './TabActions';
 
 interface HomeProps {}
 
 export function Home(props: HomeProps) {
+  const app = useAppSelector(selectApp);
   const settings = useAppSelector(selectSettings);
   const [activeTab, setActiveTab] = useState(settings.defaultView);
   const [recentVideosCount, setRecentVideosCount] = useState<RecentVideosCount>(
@@ -42,48 +44,52 @@ export function Home(props: HomeProps) {
 
   return (
     <Layout>
-      <Box
-        sx={{
-          display: 'flex',
-          alignItems: 'center',
-          borderBottom: 1,
-          borderColor: 'divider',
-          gap: 2,
-          px: 3,
-        }}
-      >
-        <Tabs
-          sx={{ flexGrow: 1, pt: 1 }}
-          value={activeTab}
-          onChange={handleTabChange}
-          aria-label="tabs"
-        >
-          {!hiddenViews.includes(HomeView.All) && (
-            <Tab label="All" value={HomeView.All} />
-          )}
-          {!hiddenViews.includes(HomeView.Recent) && (
-            <Tab
-              label="Recent"
-              value={HomeView.Recent}
-              badge={recentVideosCount.displayed}
-            />
-          )}
-          {!hiddenViews.includes(HomeView.WatchLater) && (
-            <Tab
-              label="Watch later"
-              value={HomeView.WatchLater}
-              badge={watchLaterVideosCount}
+      {app.loaded && (
+        <>
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              borderBottom: 1,
+              borderColor: 'divider',
+              gap: 2,
+              px: 3,
+            }}
+          >
+            <Tabs
+              sx={{ flexGrow: 1, pt: 1 }}
+              value={activeTab}
+              onChange={handleTabChange}
+              aria-label="tabs"
+            >
+              {!hiddenViews.includes(HomeView.All) && (
+                <Tab label="All" value={HomeView.All} />
+              )}
+              {!hiddenViews.includes(HomeView.Recent) && (
+                <Tab
+                  label="Recent"
+                  value={HomeView.Recent}
+                  badge={recentVideosCount.displayed}
+                />
+              )}
+              {!hiddenViews.includes(HomeView.WatchLater) && (
+                <Tab
+                  label="Watch later"
+                  value={HomeView.WatchLater}
+                  badge={watchLaterVideosCount}
+                />
+              )}
+            </Tabs>
+            <TabActions
+              tab={activeTab}
+              recentVideosCount={recentVideosCount.total}
+              watchLaterVideosCount={watchLaterVideosCount}
             />
+          </Box>
+          {activeTab && (
+            <TabPanel tab={activeTab} onCountChange={handleCountChange} />
           )}
-        </Tabs>
-        <TabActions
-          tab={activeTab}
-          recentVideosCount={recentVideosCount.total}
-          watchLaterVideosCount={watchLaterVideosCount}
-        />
-      </Box>
-      {activeTab && (
-        <TabPanel tab={activeTab} onCountChange={handleCountChange} />
+        </>
       )}
     </Layout>
   );