diff --git a/src/containers/lab/LabGrid/index.tsx b/src/containers/lab/LabGrid/index.tsx index 98b9e173..a8b9c1a3 100644 --- a/src/containers/lab/LabGrid/index.tsx +++ b/src/containers/lab/LabGrid/index.tsx @@ -1,52 +1,17 @@ -import React, { FC } from 'react'; +import { FC, memo } from 'react'; import { Columns } from '~/components/containers/Columns'; import { InfiniteScroll } from '~/components/containers/InfiniteScroll'; import { LabNoResults } from '~/components/lab/LabNoResults'; import { LabNode } from '~/components/lab/LabNode'; -import { EMPTY_NODE, NODE_TYPES } from '~/constants/node'; import { useLabContext } from '~/utils/context/LabContextProvider'; -import { values } from '~/utils/ramda'; import styles from './styles.module.scss'; interface IProps {} -const breakpointCols = { - default: 2, - 1280: 1, -}; - -const getRandomNodeType = () => - values(NODE_TYPES)[Math.floor(Math.random() * values(NODE_TYPES).length)]; - -const LoadingNode = () => ( - -); - -const LabGrid: FC = () => { - const { isLoading, nodes, hasMore, loadMore, search, setSearch } = useLabContext(); - - if (isLoading) { - return ( - - - - - - - - - - - - ); - } +const LabGrid: FC = memo(() => { + const { nodes, hasMore, loadMore, search, setSearch } = useLabContext(); if (search && !nodes.length) { return setSearch('')} />; @@ -56,7 +21,7 @@ const LabGrid: FC = () => {
- {nodes.map(node => ( + {nodes.map((node) => ( = () => {
); -}; +}); export { LabGrid }; diff --git a/src/containers/lab/LabLoading/index.tsx b/src/containers/lab/LabLoading/index.tsx new file mode 100644 index 00000000..2e0b74bd --- /dev/null +++ b/src/containers/lab/LabLoading/index.tsx @@ -0,0 +1,36 @@ +import React, { FC, memo } from 'react'; + +import { Columns } from '~/components/containers/Columns'; +import { LabNode } from '~/components/lab/LabNode'; +import { EMPTY_NODE, NODE_TYPES } from '~/constants/node'; +import { values } from '~/utils/ramda'; + +interface LabLoadingProps {} + +const getRandomNodeType = () => + values(NODE_TYPES)[Math.floor(Math.random() * values(NODE_TYPES).length)]; + +const LoadingNode = memo(() => ( + +)); + +const LabLoading: FC = memo(() => ( + + + + + + + + + + + +)); + +export { LabLoading }; diff --git a/src/hooks/lab/useGetLabNodes.ts b/src/hooks/lab/useGetLabNodes.ts index 06dea212..144b274c 100644 --- a/src/hooks/lab/useGetLabNodes.ts +++ b/src/hooks/lab/useGetLabNodes.ts @@ -10,24 +10,25 @@ import { INode } from '~/types'; import { GetLabNodesRequest, ILabNode, LabNodesSort } from '~/types/lab'; import { flatten, uniqBy } from '~/utils/ramda'; -const getKey: (isUser: boolean, sort?: LabNodesSort, search?: string) => SWRInfiniteKeyLoader = ( - isUser, - sort, - search -) => (index, prev: ILabNode[]) => { - if (!isUser) return null; - if (index > 0 && (!prev?.length || prev.length < 20)) return null; +const getKey: ( + isUser: boolean, + sort?: LabNodesSort, + search?: string, +) => SWRInfiniteKeyLoader = + (isUser, sort, search) => (index, prev: ILabNode[]) => { + if (!isUser) return null; + if (index > 0 && (!prev?.length || prev.length < 20)) return null; - const props: GetLabNodesRequest = { - limit: 20, - offset: index * 20, - sort: sort || LabNodesSort.New, - search: search || '', + const props: GetLabNodesRequest = { + limit: 20, + offset: index * 20, + sort: sort || LabNodesSort.New, + search: search || '', + }; + + return JSON.stringify(props); }; - return JSON.stringify(props); -}; - const parseKey = (key: string): GetLabNodesRequest => { try { return JSON.parse(key); @@ -49,12 +50,15 @@ export const useGetLabNodes = (sort?: LabNodesSort, search?: string) => { }, { fallbackData: [labStore.nodes], - onSuccess: data => labStore.setNodes(flatten(data)), + onSuccess: (data) => labStore.setNodes(flatten(data)), dedupingInterval: 300, - } + }, ); - const nodes = useMemo(() => uniqBy(n => n.node.id, flatten(data || [])), [data]); + const nodes = useMemo( + () => uniqBy((n) => n.node.id, flatten(data || [])), + [data], + ); const hasMore = (data?.[size - 1]?.length || 0) >= 1; const loadMore = useCallback(() => setSize(size + 1), [setSize, size]); @@ -63,20 +67,29 @@ export const useGetLabNodes = (sort?: LabNodesSort, search?: string) => { async (node: ILabNode) => { await mutate([[node], ...(data || [])]); }, - [data, mutate] + [data, mutate], ); /** updates node on cache */ const updateNode = useCallback( async (nodeId: number, node: Partial) => { await mutate( - data?.map(page => - page.map(it => (it.node.id === nodeId ? { ...it, node: { ...it.node, node } } : it)) - ) + data?.map((page) => + page.map((it) => + it.node.id === nodeId ? { ...it, node: { ...it.node, node } } : it, + ), + ), ); }, - [data, mutate] + [data, mutate], ); - return { nodes, isLoading: !data && isValidating, hasMore, loadMore, unshift, updateNode }; + return { + nodes, + isLoading: !!data?.length && isValidating, + hasMore, + loadMore, + unshift, + updateNode, + }; }; diff --git a/src/layouts/LabLayout/index.tsx b/src/layouts/LabLayout/index.tsx index b5c6fb23..02a42b1d 100644 --- a/src/layouts/LabLayout/index.tsx +++ b/src/layouts/LabLayout/index.tsx @@ -1,9 +1,10 @@ -import React, { FC } from 'react'; +import React, { FC, useMemo } from 'react'; import { Group } from '~/components/containers/Group'; import { Sticky } from '~/components/containers/Sticky'; import { LabHead } from '~/components/lab/LabHead'; import { LabGrid } from '~/containers/lab/LabGrid'; +import { LabLoading } from '~/containers/lab/LabLoading'; import { LabStats } from '~/containers/lab/LabStats'; import { Container } from '~/containers/main/Container'; import { SidebarRouter } from '~/containers/main/SidebarRouter'; @@ -13,6 +14,8 @@ import styles from './styles.module.scss'; interface IProps {} +const loader = ; + const LabLayout: FC = () => { const { isLoading } = useLabContext(); @@ -25,7 +28,7 @@ const LabLayout: FC = () => { - + {isLoading ? loader : }