#23 added is_loading to lab's head

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>
 );

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>
 

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;