@codeleap/web 3.12.1 → 3.12.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/web",
-  "version": "3.12.1",
+  "version": "3.12.3",
   "main": "src/index.ts",
   "repository": {
     "url": "https://github.com/codeleap-uk/internal-libs-monorepo.git",

package/src/lib/ListMasonry.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { useWindowSize } from '@react-hook/window-size'
-import { AnyFunction, onUpdate, usePrevious } from '@codeleap/common'
+import { AnyFunction, onUpdate, usePrevious, useState } from '@codeleap/common'
 
 import {
   useMasonry,
@@ -10,8 +10,11 @@ import {
   useResizeObserver,
   MasonryProps,
   RenderComponentProps,
+  MasonryScroller,
 } from 'masonic'
 
+import { EmptyPlaceholder } from '../components/EmptyPlaceholder'
+
 export type ItemMasonryProps<T> = RenderComponentProps<T>
 
 export type ListMasonryProps<T> = MasonryProps<T> & {
@@ -20,7 +23,17 @@ export type ListMasonryProps<T> = MasonryProps<T> & {
 }
 
 export function ListMasonry<Item>(props: ListMasonryProps<Item>) {
-  const data = props?.items || []
+  const {
+    columnCount,
+    columnGutter,
+    rowGutter,
+    items,
+    render,
+  } = props
+
+  const data = items || []
+
+  const [reloadingLayout, setReloadingLayout] = useState(false)
 
   const dataPreviousLength = usePrevious(data?.length)
 
@@ -34,7 +47,11 @@ export function ListMasonry<Item>(props: ListMasonryProps<Item>) {
 
   onUpdate(() => {
     if (!!masonryUpdater && !!props?.itemsRehydrateIndicator) {
-      props?.onRefreshItems?.(() => null)
+      setReloadingLayout(true)
+
+      setTimeout(() => {
+        setReloadingLayout(false)
+      }, 3000)
     }
   }, [masonryUpdater])
 
@@ -47,34 +64,42 @@ export function ListMasonry<Item>(props: ListMasonryProps<Item>) {
 
   const containerPosition = useContainerPosition(containerRef, windowSize)
 
-  const listProps = Object.assign(
-    {
-      offset: containerPosition?.offset,
-      width: containerPosition?.width || containerRef?.current?.clientWidth || windowSize?.[0],
-      height: windowSize?.[1],
-      containerRef,
-      scrollFps: props?.scrollFps || 12,
-    },
-    props
-  ) as any
-
-  listProps.positioner = usePositioner({ 
+  const listProps = {
+    offset: containerPosition?.offset,
+    width: containerPosition?.width || containerRef?.current?.clientWidth || windowSize?.[0],
+    height: windowSize?.[1],
+    containerRef,
+    scrollFps: props?.scrollFps || 12,
+  }
+
+  const positioner = usePositioner({ 
     width: listProps?.width, 
-    columnGutter: listProps?.columnGutter, 
-    columnWidth: listProps?.columnWidth,
-    columnCount: listProps?.columnCount,
-    maxColumnCount: listProps?.columnCount,
-    rowGutter: listProps?.rowGutter
-  }, [masonryUpdater])
+    columnGutter: columnGutter, 
+    columnCount: columnCount,
+    maxColumnCount: columnCount,
+    rowGutter: rowGutter
+  }, [masonryUpdater, reloadingLayout])
 
-  const { scrollTop, isScrolling } = useScroller(listProps?.offset, listProps?.scrollFps)
+  const resizeObserver = useResizeObserver(positioner)
 
-  listProps.resizeObserver = useResizeObserver(listProps.positioner)
+  if (reloadingLayout) {
+    return (
+      <EmptyPlaceholder loading={true} />
+    )
+  }
 
-  return useMasonry({
-    ...listProps,
-    scrollTop,
-    isScrolling,
-    items: data,
-  })
+  return (
+    <MasonryScroller
+      // {...props}
+      positioner={positioner}
+      resizeObserver={resizeObserver}
+      containerRef={containerRef}
+      items={data}
+      height={listProps?.height}
+      offset={listProps?.offset}
+      overscanBy={6}
+      render={render}
+      scrollFps={listProps?.scrollFps}
+    />
+  )
 }