@codeleap/web 3.12.2 → 3.12.4

package/package.json

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

package/src/components/Overlay/index.tsx

@@ -25,7 +25,7 @@ export const Overlay = <T extends NativeHTMLElement>(overlayProps:OverlayProps<T
     responsiveVariants, 
     variants, 
     styles, 
-    scrollLocked = true, 
+    scrollLocked = false, 
     ...props 
   } = overlayProps
 

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,
@@ -11,6 +11,7 @@ import {
   MasonryProps,
   RenderComponentProps,
 } from 'masonic'
+import { EmptyPlaceholder } from '../components/EmptyPlaceholder'
 
 export type ItemMasonryProps<T> = RenderComponentProps<T>
 
@@ -22,21 +23,19 @@ export type ListMasonryProps<T> = MasonryProps<T> & {
 export function ListMasonry<Item>(props: ListMasonryProps<Item>) {
   const data = props?.items || []
 
+  const [reloadingLayout, setReloadingLayout] = useState(false)
+
   const dataPreviousLength = usePrevious(data?.length)
 
-  const masonryUpdater = React.useMemo(() => {
+  onUpdate(() => {
     if (data?.length < dataPreviousLength) {
-      return data?.length
-    } else {
-      return false
-    }
-  }, [dataPreviousLength, data?.length])
+      setReloadingLayout(true)
 
-  onUpdate(() => {
-    if (!!masonryUpdater && !!props?.itemsRehydrateIndicator) {
-      props?.onRefreshItems?.(() => null)
+      setTimeout(() => {
+        setReloadingLayout(false)
+      }, 3000)
     }
-  }, [masonryUpdater])
+  }, [data?.length])
 
   const containerRef = React.useRef(null)
 
@@ -65,12 +64,16 @@ export function ListMasonry<Item>(props: ListMasonryProps<Item>) {
     columnCount: listProps?.columnCount,
     maxColumnCount: listProps?.columnCount,
     rowGutter: listProps?.rowGutter
-  }, [masonryUpdater])
+  }, [reloadingLayout])
 
   const { scrollTop, isScrolling } = useScroller(listProps?.offset, listProps?.scrollFps)
 
   listProps.resizeObserver = useResizeObserver(listProps.positioner)
 
+  if (reloadingLayout) {
+    return <EmptyPlaceholder loading={true} title={''} description={null} />
+  }
+
   return useMasonry({
     ...listProps,
     scrollTop,