muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-24 20:36:40 +07:00
Code Packages Activity Actions

made lab infinite loader with intersection observer

Browse source
This commit is contained in:
Fedor Katurov 2021-10-12 16:07:51 +07:00
parent 9dbc5739b7
commit a553a06ac5
5 changed files with 63 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

13
src/containers/lab/LabGrid/index.tsx
View file

@ -1,14 +1,16 @@
import React, { FC } from 'react';
import React, { FC, useMemo } from 'react';
import Masonry from 'react-masonry-css';
import styles from './styles.module.scss';
import { LabNode } from '~/components/lab/LabNode';
import { EMPTY_NODE, NODE_TYPES } from '~/redux/node/constants';
import { values } from 'ramda';
import { ILabNode } from '~/redux/lab/types';
import { useLabPagination } from '~/utils/hooks/lab/useLabPagination';
interface IProps {
isLoading: boolean;
nodes: ILabNode[];
onLoadMore: () => void;
}
const breakpointCols = {
@ -28,7 +30,14 @@ const LoadingNode = () => (
/>
);
const LabGrid: FC<IProps> = ({ isLoading, nodes }) => {
const LabGrid: FC<IProps> = ({ isLoading, nodes, onLoadMore }) => {
const columns = useMemo(() => Array.from(document.querySelectorAll(`.${styles.column}`)), [
isLoading,
nodes,
]);
useLabPagination(isLoading, columns, onLoadMore);
if (isLoading) {
return (
<Masonry