fixed node loading

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}

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}>

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