From d31b94c42ae4a026c3825a3b70df8d1e08ed0285 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Tue, 5 Oct 2021 13:44:38 +0700
Subject: [PATCH] fixed node loading

---
 src/containers/lab/LabGrid/index.tsx | 15 +++++++--------
 src/layouts/LabLayout/index.tsx      |  8 +++++---
 src/redux/lab/sagas.ts               |  3 +--
 3 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/containers/lab/LabGrid/index.tsx b/src/containers/lab/LabGrid/index.tsx
index f5b5e212..6d7bcaec 100644
--- a/src/containers/lab/LabGrid/index.tsx
+++ b/src/containers/lab/LabGrid/index.tsx
@@ -1,13 +1,15 @@
 import React, { FC } from 'react';
 import Masonry from 'react-masonry-css';
-import { useShallowSelect } from '~/utils/hooks/useShallowSelect';
 import styles from './styles.module.scss';
 import { LabNode } from '~/components/lab/LabNode';
-import { selectLabList, selectLabListNodes } from '~/redux/lab/selectors';
 import { EMPTY_NODE, NODE_TYPES } from '~/redux/node/constants';
 import { values } from 'ramda';
+import { ILabNode } from '~/redux/lab/types';
 
-interface IProps {}
+interface IProps {
+  isLoading: boolean;
+  nodes: ILabNode[];
+}
 
 const breakpointCols = {
   default: 2,
@@ -26,11 +28,8 @@ const LoadingNode = () => (
   />
 );
 
-const LabGrid: FC<IProps> = () => {
-  const nodes = useShallowSelect(selectLabListNodes);
-  const { is_loading } = useShallowSelect(selectLabList);
-
-  if (is_loading) {
+const LabGrid: FC<IProps> = ({ isLoading, nodes }) => {
+  if (isLoading) {
     return (
       <Masonry
         className={styles.wrap}
diff --git a/src/layouts/LabLayout/index.tsx b/src/layouts/LabLayout/index.tsx
index a083c346..e4ccca0e 100644
--- a/src/layouts/LabLayout/index.tsx
+++ b/src/layouts/LabLayout/index.tsx
@@ -20,7 +20,7 @@ import { useLabPagination } from '~/utils/hooks/lab/useLabPagination';
 interface IProps {}
 
 const LabLayout: FC<IProps> = () => {
-  const { is_loading } = useShallowSelect(selectLabList);
+  const { is_loading, nodes } = useShallowSelect(selectLabList);
   const dispatch = useDispatch();
 
   useLabPagination({ isLoading: is_loading });
@@ -30,16 +30,18 @@ const LabLayout: FC<IProps> = () => {
     dispatch(labGetStats());
   }, [dispatch]);
 
+  const isInitialLoading = is_loading && !nodes.length;
+
   return (
     <Container>
       <div className={styles.container}>
         <div className={styles.wrap}>
           <Group className={styles.content}>
             <div className={styles.head}>
-              <LabHead isLoading={is_loading} />
+              <LabHead isLoading={isInitialLoading} />
             </div>
 
-            <LabGrid />
+            <LabGrid nodes={nodes} isLoading={isInitialLoading} />
           </Group>
 
           <div className={styles.panel}>
diff --git a/src/redux/lab/sagas.ts b/src/redux/lab/sagas.ts
index d19380bb..6668556a 100644
--- a/src/redux/lab/sagas.ts
+++ b/src/redux/lab/sagas.ts
@@ -62,12 +62,11 @@ function* getMore() {
       return;
     }
 
-    const last = list.nodes[list.nodes.length];
+    const last = list.nodes[list.nodes.length - 1];
 
     if (!last) {
       return;
     }
-
     const after = last.node.created_at;
     const { nodes, count }: Unwrap<typeof getLabNodes> = yield call(getLabNodes, { after });
     const newNodes = [...list.nodes, ...nodes];