From e44ad8e5c259f1f8c26411a45c4dd3d73584d332 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Mon, 22 Mar 2021 17:53:28 +0700
Subject: [PATCH] #23 added is_loading to lab's head

---
 src/components/lab/LabHead/index.tsx   | 18 +++++++++++++-----
 src/containers/lab/LabLayout/index.tsx |  5 ++++-
 src/redux/lab/selectors.ts             |  1 +
 3 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/components/lab/LabHead/index.tsx b/src/components/lab/LabHead/index.tsx
index 40d1a908..1f61048f 100644
--- a/src/components/lab/LabHead/index.tsx
+++ b/src/components/lab/LabHead/index.tsx
@@ -2,16 +2,24 @@ import React, { FC } from 'react';
 import styles from './styles.module.scss';
 import { LabHeadItem } from '~/components/lab/LabHeadItem';
 
-interface IProps {}
+interface IProps {
+  isLoading?: boolean;
+}
 
-const LabHead: FC<IProps> = () => (
+const LabHead: FC<IProps> = ({ isLoading }) => (
   <div className={styles.wrap}>
     <div className={styles.group}>
-      <LabHeadItem icon="recent" active>
+      <LabHeadItem icon="recent" active isLoading={isLoading}>
         Свежие
       </LabHeadItem>
-      <LabHeadItem icon="hot">Популярные</LabHeadItem>
-      <LabHeadItem icon="star_full">Важные</LabHeadItem>
+
+      <LabHeadItem icon="hot" isLoading={isLoading}>
+        Популярные
+      </LabHeadItem>
+
+      <LabHeadItem icon="star_full" isLoading={isLoading}>
+        Важные
+      </LabHeadItem>
     </div>
   </div>
 );
diff --git a/src/containers/lab/LabLayout/index.tsx b/src/containers/lab/LabLayout/index.tsx
index d27e9136..e7ab264b 100644
--- a/src/containers/lab/LabLayout/index.tsx
+++ b/src/containers/lab/LabLayout/index.tsx
@@ -14,10 +14,13 @@ import { LabBanner } from '~/components/lab/LabBanner';
 import { LabHead } from '~/components/lab/LabHead';
 import { Filler } from '~/components/containers/Filler';
 import { LabStats } from '~/containers/lab/LabStats';
+import { useShallowSelect } from '~/utils/hooks/useShallowSelect';
+import { selectLabList, selectLabListNodes, selectLabStatsLoading } from '~/redux/lab/selectors';
 
 interface IProps {}
 
 const LabLayout: FC<IProps> = () => {
+  const { is_loading } = useShallowSelect(selectLabList);
   const dispatch = useDispatch();
 
   useEffect(() => {
@@ -30,7 +33,7 @@ const LabLayout: FC<IProps> = () => {
       <Container>
         <div className={styles.wrap}>
           <Group className={styles.content}>
-            <LabHead />
+            <LabHead isLoading={is_loading} />
             <LabGrid />
           </Group>
 
diff --git a/src/redux/lab/selectors.ts b/src/redux/lab/selectors.ts
index 19bdf7e8..9c47744c 100644
--- a/src/redux/lab/selectors.ts
+++ b/src/redux/lab/selectors.ts
@@ -2,6 +2,7 @@ import { IState } from '~/redux/store';
 
 export const selectLab = (state: IState) => state.lab;
 export const selectLabListNodes = (state: IState) => state.lab.list.nodes;
+export const selectLabList = (state: IState) => state.lab.list;
 export const selectLabStatsHeroes = (state: IState) => state.lab.stats.heroes;
 export const selectLabStatsTags = (state: IState) => state.lab.stats.tags;
 export const selectLabStatsLoading = (state: IState) => state.lab.stats.is_loading;