@codeleap/web 3.10.2 → 3.10.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/web",
-  "version": "3.10.2",
+  "version": "3.10.3",
   "main": "src/index.ts",
   "repository": {
     "url": "https://github.com/codeleap-uk/internal-libs-monorepo.git",
@@ -10,9 +10,9 @@
   "license": "UNLICENSED",
   "devDependencies": {
     "@codeleap/config": "*",
+    "@emotion/react": "link:../../apps/web/node_modules/@emotion/react",
     "@types/react-slick": "^0.23.10",
     "@types/react-window": "1.8.5",
-    "@emotion/react": "link:../../apps/web/node_modules/@emotion/react",
     "react": "link:../../apps/web/node_modules/react"
   },
   "scripts": {
@@ -22,9 +22,9 @@
   "dependencies": {
     "@radix-ui/react-slider": "1.1.1",
     "@radix-ui/react-tooltip": "^1.0.6",
-    "@tanstack/react-virtual": "^3.0.0-beta.54",
     "framer-motion": "^10.10.0",
     "js-cookie": "^3.0.1",
+    "masonic": "^3.7.0",
     "rc-slider": "^9.7.5",
     "react-autosize-textarea": "^7.1.0",
     "react-input-mask": "^2.0.4",
@@ -40,6 +40,7 @@
   },
   "peerDependencies": {
     "@codeleap/common": "*",
+    "@emotion/react": "11.10.6",
     "@reach/router": "^1.3.4",
     "axios": "1.3.5",
     "gatsby-plugin-intl": "^0.3.3",
@@ -47,7 +48,6 @@
     "react-dom": "18.1.0",
     "react-helmet": "^6.1.0",
     "react-select": "*",
-    "typescript": "4.5.4",
-    "@emotion/react": "11.10.6"
+    "typescript": "4.5.4"
   }
 }

package/src/components/Grid/index.tsx

@@ -1,24 +1,15 @@
 import React from 'react'
-import { useDefaultComponentStyle, useCallback } from '@codeleap/common'
+import { useDefaultComponentStyle } from '@codeleap/common'
 import { View, ViewProps } from '../View'
 import { EmptyPlaceholder } from '../EmptyPlaceholder'
 import { GridPresets } from './styles'
-import { useVirtualizer, VirtualItem } from '@tanstack/react-virtual'
 import { GridProps } from './types'
 import { ListLayout, useInfiniteScroll } from '../List'
+import { RenderComponentProps as MasonryItemProps, Masonry as GridMasonry } from 'masonic'
 
 export * from './styles'
 export * from './types'
 
-const generateColumns = (count: number) => {
-  return new Array(count).fill(0).map((_, i) => {
-    const key: string = i.toString()
-    return {
-      key,
-    }
-  })
-}
-
 const RenderSeparator = (props: { separatorStyles: ViewProps<'div'>['css'] }) => {
   return (
     <View css={[props?.separatorStyles]}></View>
@@ -29,34 +20,37 @@ const defaultProps: Partial<GridProps> = {
   ListFooterComponent: null,
   ListHeaderComponent: null,
   ListLoadingIndicatorComponent: null,
-  ListRefreshControlComponent: null,
   ListEmptyComponent: EmptyPlaceholder,
   ListSeparatorComponent: RenderSeparator,
   refreshDebounce: 3000,
   refreshSize: 40,
-  refreshThreshold: 0.5,
-  refreshPosition: 2,
+  refreshThreshold: 0.1,
+  refreshPosition: 16,
   refresh: true,
-  numColumns: 2,
+  columnItemsSpacing: 8,
+  rowItemsSpacing: 8,
+  overscan: 2,
 }
 
-const GridCP = React.forwardRef<'div', GridProps>((flatGridProps, ref) => {
+export function Grid<T = any>(props: GridProps<T>) {
   const allProps = {
-    ...defaultProps,
-    ...flatGridProps,
-  }
+    ...Grid.defaultProps,
+    ...props,
+  } as GridProps
 
   const {
     variants = [],
     responsiveVariants = {},
     styles = {},
     renderItem: RenderItem,
-    data,
-    ListLoadingIndicatorComponent,
+    columnItemsSpacing,
+    rowItemsSpacing,
     ListSeparatorComponent,
-    virtualizerOptions = {},
-    numColumns,
+    data,
+    overscan,
     separators,
+    masonryProps = {},
+    numColumns,
   } = allProps
 
   const variantStyles = useDefaultComponentStyle<'u:Grid', typeof GridPresets>('u:Grid', {
@@ -65,105 +59,56 @@ const GridCP = React.forwardRef<'div', GridProps>((flatGridProps, ref) => {
     styles,
   })
 
-  const separator = separators && <ListSeparatorComponent separatorStyles={variantStyles.separator} />
+  const { layoutProps, onLoadMore } = useInfiniteScroll(allProps)
 
-  const {
-    dataVirtualizer,
-    parentRef,
-    items,
-    layoutProps,
-  } = useInfiniteScroll({
-    ...allProps,
-    overscan: 5,
-  })
+  const separator = React.useMemo(() => {
+    return separators ? <ListSeparatorComponent separatorStyles={variantStyles.separator} /> : null
+  }, [])
 
-  const columns = React.useMemo(() => {
-    return generateColumns(numColumns)
-  }, [numColumns])
-
-  const columnVirtualizer = useVirtualizer({
-    horizontal: true,
-    count: columns?.length,
-    getScrollElement: () => parentRef.current,
-    estimateSize: () => null,
-    overscan: 5,
-    ...virtualizerOptions,
-  })
+  const renderItem = React.useCallback((_item: MasonryItemProps<any>) => {
+    if (!RenderItem) return null
 
-  const columnItems = columnVirtualizer.getVirtualItems()
+    const gridLength = data?.length || 0
 
-  const renderItem = useCallback((_item: VirtualItem) => {
-    if (!RenderItem) return null
+    const isFirst = _item?.index === 0
+    const isLast = _item?.index === gridLength - 1
+    const isOnly = isFirst && isLast
 
-    const showIndicator = (_item?.index === (data?.length / numColumns)) && !!ListLoadingIndicatorComponent
+    const _itemProps = {
+      ..._item,
+      isOnly,
+      isLast,
+      isFirst,
+      item: _item?.data
+    }
 
-    const gridLength = data?.length || 0
+    if (!_itemProps?.item) return null
 
     return <>
-      {/* Necessary for correct list render */}
-      <div
-        css={[
-          variantStyles.itemWrapper,
-          { transform: `translateY(${_item?.start - dataVirtualizer?.options?.scrollMargin}px)` }
-        ]}
-        key={_item?.key}
-        data-index={_item?.index}
-        ref={dataVirtualizer?.measureElement}
-      >
-        {_item?.index !== 0 ? separator : null}
-
-        <View css={[variantStyles.column]}>
-          {columnItems.map(column => {
-            const rowIndex = _item?.index
-            const columnIndex = column?.index
-            const itemIndex = (rowIndex * numColumns) + columnIndex
-            
-            const isFirst = itemIndex === 0
-            const isLast = itemIndex === gridLength - 1
-            const isOnly = isFirst && isLast
-        
-            const isLastInRow = columnIndex === numColumns
-            const isFirstInRow = columnIndex === 0
-            const isOnlyInRow = isFirstInRow && isLastInRow
-
-            const _itemProps = {
-              ..._item,
-              key: itemIndex,
-              index: itemIndex,
-              isOnly,
-              isLast,
-              isFirst,
-              column,
-              isFirstInRow,
-              isLastInRow,
-              isOnlyInRow,
-              rowIndex,
-              item: data?.[itemIndex]
-            }
-
-            if (!_itemProps?.item) return null
-
-            return <RenderItem {..._itemProps} />
-          })}
-        </View>
-
-        {showIndicator && <ListLoadingIndicatorComponent />}
-      </div>
+      {_item?.index <= numColumns ? null : separator}
+      <RenderItem {..._itemProps} />
     </>
-  }, [RenderItem, data?.length, dataVirtualizer?.measureElement])
+  }, [])
 
   return (
     <ListLayout
       {...allProps}
       {...layoutProps}
-      variantStyles={variantStyles} // @ts-ignore
-      ref={ref}
+      variantStyles={variantStyles}
     >
-      {items?.map((item) => renderItem(item))}
+      <GridMasonry
+        items={data}
+        columnGutter={columnItemsSpacing}
+        rowGutter={rowItemsSpacing}
+        overscanBy={overscan}
+        render={renderItem}
+        onRender={onLoadMore}
+        itemKey={item => item?.id}
+        columnCount={numColumns}
+        {...masonryProps}
+      />
     </ListLayout>
   )
-})
-
-export type GridComponentType = <T extends any[] = any[]>(props: GridProps<T>) => React.ReactElement
+}
 
-export const Grid = GridCP as unknown as GridComponentType
+Grid.defaultProps = defaultProps

package/src/components/Grid/styles.ts

@@ -1,10 +1,10 @@
 import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
 import { ListComposition, ListParts } from '../List'
 
-export type GridParts = ListParts | 'column'
+export type GridParts = ListParts
 
 export type GridComposition = ListComposition | GridParts
 
 const createGridStyle = createDefaultVariantFactory<GridComposition>()
 
-export const GridPresets = includePresets(style => createGridStyle(() => ({ content: style })))
+export const GridPresets = includePresets(style => createGridStyle(() => ({ wrapper: style })))

package/src/components/Grid/types.ts

@@ -1,24 +1,15 @@
 import { ComponentVariants, StylesOf } from '@codeleap/common'
-import { VirtualItem } from '@tanstack/react-virtual'
 import { ComponentCommonProps } from '../../types'
-import { AugmentedRenderItemInfo, ListProps } from '../List'
+import { ListProps } from '../List'
 import { GridComposition, GridPresets } from './styles'
 
-type GridAugmentedRenderItemInfo<T> = AugmentedRenderItemInfo<T> & {
-  column: VirtualItem
-  isLastInRow: boolean
-  isOnlyInRow: boolean
-  isFirstInRow: boolean
-  rowIndex: number
-}
-
 export type GridProps<
   T = any[],
   Data = T extends Array<infer D> ? D : never
 > = 
-  Omit<ListProps<T, Data>, 'variants' | 'styles' | 'renderItem'> &
+  Omit<ListProps<T, Data>, 'variants' | 'styles'> &
   ComponentVariants<typeof GridPresets> &  {
     styles?: StylesOf<GridComposition>
-    numColumns?: number
-    renderItem: (data: GridAugmentedRenderItemInfo<T>) => React.ReactElement
+    columnItemsSpacing?: number
+    numColumns: number
   } & ComponentCommonProps

package/src/components/List/ListLayout.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { StylesOf, TypeGuards, useCodeleapContext } from '@codeleap/common'
+import { StylesOf } from '@codeleap/common'
 import { ListComposition, ListParts } from './styles'
 import { ListProps } from './types'
 import { View } from '../View'
@@ -12,87 +12,92 @@ type ListLayoutProps = Omit<ListProps, 'renderItem'> & UseInfiniteScrollReturn['
   children?: React.ReactNode
 }
 
+type ListRefreshControlComponent = Partial<ListLayoutProps> & {
+  enabled: boolean
+  variantStyles: StylesOf<ListComposition>
+}
+
+const DefaultRefreshIndicator = (props: ListRefreshControlComponent) => {
+  const { 
+    refreshing, 
+    variantStyles, 
+    refreshPosition, 
+    refreshControlProps, 
+    debugName, 
+    refreshSize, 
+    refreshControlIndicatorProps,
+    enabled,
+  } = props
+
+  if (!enabled) return null
+  
+  return (
+    <motion.div
+      css={[variantStyles?.refreshControl]}
+      initial={false}
+      animate={{
+        opacity: refreshing ? 1 : 0,
+        top: refreshing ? refreshPosition : 0
+      }}
+      {...refreshControlProps}
+    >
+      <ActivityIndicator
+        debugName={debugName + 'refresh-indicator'}
+        size={refreshSize}
+        style={variantStyles.refreshControlIndicator}
+        {...refreshControlIndicatorProps}
+      />
+    </motion.div>
+  )
+}
+
 export const ListLayout = (props: ListLayoutProps) => {
   const {
     ListEmptyComponent,
     ListFooterComponent,
     ListHeaderComponent,
-    ListRefreshControlComponent,
+    refresh,
+    ListRefreshControlComponent = DefaultRefreshIndicator,
     variantStyles,
     isEmpty,
     isLoading,
-    refreshPosition,
     placeholder = {},
-    parentRef,
     style,
-    dataVirtualizer,
-    refresh,
-    refreshing,
-    refreshControlProps,
-    refreshControlIndicatorProps = {},
-    refreshSize,
     children,
-    ref,
     debugName,
+    isFetching,
+    isFetchingNextPage,
+    ListLoadingIndicatorComponent,
+    scrollableRef,
   } = props
 
-  const { Theme } = useCodeleapContext()
-
-  const getKeyStyle = React.useCallback((key: ListParts) => {
-    return [
-      variantStyles[key],
-      isLoading && variantStyles[`${key}:loading`],
-      isEmpty && variantStyles[`${key}:empty`],
-    ]
-  }, [isLoading, isEmpty])
-
-  const _refreshPosition = React.useMemo(() => {
-    return Theme.spacing.value(refreshPosition)
-  }, [refreshPosition])
+  const getKeyStyle = React.useCallback((key: ListParts) => ([
+    variantStyles[key],
+    isLoading && variantStyles[`${key}:loading`],
+    isEmpty && variantStyles[`${key}:empty`],
+  ]), [isLoading, isEmpty])
 
   return (
-    // @ts-ignore
-    <View css={[getKeyStyle('wrapper'), style]}>
-      {!!ListHeaderComponent && <ListHeaderComponent />}
+    <View css={[getKeyStyle('wrapper'), style]} ref={scrollableRef}>
+      {!!ListHeaderComponent ? <ListHeaderComponent /> : null}
 
-      {isEmpty ? <ListEmptyComponent debugName={debugName} {...placeholder} /> : (
-        <View
-          ref={parentRef}
-          css={[getKeyStyle('innerWrapper')]}
-        >
-          <View
-            //@ts-ignore
-            ref={ref}
-            css={[
-              getKeyStyle('content'),
-              { height: dataVirtualizer.getTotalSize() }
-            ]}
-          >
-            {TypeGuards.isNil(ListRefreshControlComponent) && refresh ? (
-              <motion.div
-                css={[variantStyles?.refreshControl]}
-                initial={false}
-                animate={{
-                  opacity: refreshing ? 1 : 0,
-                  top: refreshing ? _refreshPosition : 0
-                }}
-                {...refreshControlProps}
-              >
-                <ActivityIndicator
-                  debugName={debugName}
-                  size={refreshSize} 
-                  style={variantStyles.refreshControlIndicator} 
-                  {...refreshControlIndicatorProps} 
-                />
-              </motion.div>
-            ) : (<ListRefreshControlComponent /> ?? null)}
+      {isEmpty
+        ? <ListEmptyComponent debugName={debugName} {...placeholder} />
+        : (
+          <View css={[getKeyStyle('innerWrapper')]}>
+            <ListRefreshControlComponent
+              {...props}
+              enabled={refresh}
+              variantStyles={variantStyles}
+            />
 
             {children}
           </View>
-        </View>
-      )}
+        )}
+
+      {(isFetching || isFetchingNextPage) ? <ListLoadingIndicatorComponent /> : null}
 
-      {!!ListFooterComponent && <ListFooterComponent />}
+      {!!ListFooterComponent ? <ListFooterComponent /> : null}
     </View>
   )
 }

package/src/components/List/index.tsx

@@ -1,12 +1,12 @@
 import React from 'react'
-import { useDefaultComponentStyle, useCallback } from '@codeleap/common'
+import { useDefaultComponentStyle } from '@codeleap/common'
 import { View, ViewProps } from '../View'
 import { EmptyPlaceholder } from '../EmptyPlaceholder'
 import { ListPresets } from './styles'
-import { VirtualItem } from '@tanstack/react-virtual'
 import { useInfiniteScroll } from './useInfiniteScroll'
 import { ListProps } from './types'
 import { ListLayout } from './ListLayout'
+import { RenderComponentProps as MasonryItemProps, List as ListMasonry } from 'masonic'
 
 export * from './styles'
 export * from './PaginationIndicator'
@@ -14,8 +14,6 @@ export * from './useInfiniteScroll'
 export * from './types'
 export * from './ListLayout'
 
-export type ListComponentType = <T extends any[] = any[]>(props: ListProps<T>) => React.ReactElement
-
 const RenderSeparator = (props: { separatorStyles: ViewProps<'div'>['css'] }) => {
   return (
     <View css={[props?.separatorStyles]}></View>
@@ -26,31 +24,34 @@ const defaultProps: Partial<ListProps> = {
   ListFooterComponent: null,
   ListHeaderComponent: null,
   ListLoadingIndicatorComponent: null,
-  ListRefreshControlComponent: null,
   ListEmptyComponent: EmptyPlaceholder,
   ListSeparatorComponent: RenderSeparator,
   refreshDebounce: 3000,
   refreshSize: 40,
-  refreshThreshold: 0.5,
-  refreshPosition: 2,
+  refreshThreshold: 0.1,
+  refreshPosition: 16,
   refresh: true,
+  rowItemsSpacing: 8,
+  overscan: 2,
 }
 
-export const List: ListComponentType = React.forwardRef<'div', ListProps>((flatListProps, ref) => {
-  const allProps = { // @ts-ignore
+export function List<T = any>(props: ListProps<T>) {
+  const allProps = {
     ...List.defaultProps,
-    ...flatListProps,
-  }
+    ...props,
+  } as ListProps
 
   const {
     variants = [],
     responsiveVariants = {},
     styles = {},
-    ListLoadingIndicatorComponent,
     renderItem: RenderItem,
+    rowItemsSpacing,
     ListSeparatorComponent,
     data,
+    overscan,
     separators,
+    masonryProps = {},
   } = allProps
 
   const variantStyles = useDefaultComponentStyle<'u:List', typeof ListPresets>('u:List', {
@@ -59,24 +60,19 @@ export const List: ListComponentType = React.forwardRef<'div', ListProps>((flatL
     styles,
   })
 
-  const {
-    items,
-    dataVirtualizer,
-    layoutProps,
-  } = useInfiniteScroll(allProps)
+  const { layoutProps, onLoadMore } = useInfiniteScroll(allProps)
 
-  const separator = separators && <ListSeparatorComponent separatorStyles={variantStyles.separator} />
+  const separator = React.useMemo(() => {
+    return separators ? <ListSeparatorComponent separatorStyles={variantStyles.separator} /> : null
+  }, [])
 
-  const renderItem = useCallback((_item: VirtualItem) => {
+  const renderItem = React.useCallback((_item: MasonryItemProps<any>) => {
     if (!RenderItem) return null
 
-    const showIndicator = (_item?.index > data?.length - 1) && !!ListLoadingIndicatorComponent
-
     const listLength = data?.length || 0
 
     const isFirst = _item?.index === 0
     const isLast = _item?.index === listLength - 1
-
     const isOnly = isFirst && isLast
 
     const _itemProps = {
@@ -84,37 +80,32 @@ export const List: ListComponentType = React.forwardRef<'div', ListProps>((flatL
       isOnly,
       isLast,
       isFirst,
-      item: data?.[_item?.index]
+      item: _item?.data,
     }
 
-    return (
-      <div
-        css={[variantStyles.itemWrapper]}
-        key={_item?.key}
-        data-index={_item?.index}
-        ref={dataVirtualizer?.measureElement}
-      >
-        {!isFirst && separator}
-        {showIndicator && <ListLoadingIndicatorComponent />}
-        {!!_itemProps?.item && <RenderItem {..._itemProps} />}
-      </div>
-    )
-  }, [RenderItem, data?.length, dataVirtualizer?.measureElement])
+    return <>
+      {isFirst ? null : separator}
+      <RenderItem {..._itemProps} />
+    </>
+  }, [])
 
   return (
     <ListLayout
       {...allProps}
       {...layoutProps}
-      variantStyles={variantStyles} // @ts-ignore
-      ref={ref}
+      variantStyles={variantStyles}
     >
-      {/* Necessary for correct list render */}
-      <div css={[variantStyles.list, { transform: `translateY(${items?.[0]?.start}px)` }]}>
-        {items?.map((item) => renderItem(item))}
-      </div>
+      <ListMasonry
+        items={data}
+        rowGutter={rowItemsSpacing}
+        overscanBy={overscan}
+        render={renderItem}
+        onRender={onLoadMore}
+        itemKey={item => item?.id}
+        {...masonryProps}
+      />
     </ListLayout>
   )
-})
+}
 
-// @ts-ignore
 List.defaultProps = defaultProps

package/src/components/List/styles.ts

@@ -6,12 +6,9 @@ type ListStates = 'empty' | 'loading'
 export type ListParts = 
   ViewComposition | 
   'innerWrapper' | 
-  'content' | 
   'separator' | 
-  'itemWrapper' |
   'refreshControl' |
-  'refreshControlIndicator' |
-  'list'
+  'refreshControlIndicator'
 
 export type ListComposition = `${ListParts}:${ListStates}` | ListParts
 

package/src/components/List/types.ts

@@ -1,13 +1,14 @@
 import { ComponentVariants, PropsOf, StylesOf } from '@codeleap/common'
-import { VirtualItem, VirtualizerOptions } from '@tanstack/react-virtual'
 import { EmptyPlaceholderProps } from '../EmptyPlaceholder'
 import { View, ViewProps } from '../View'
 import { ListComposition, ListPresets } from './styles'
 import { motion } from 'framer-motion'
 import { ActivityIndicatorProps } from '../ActivityIndicator'
 import { ComponentCommonProps } from '../../types'
+import { RenderComponentProps, ListProps as ListMasonryProps } from 'masonic'
+import { UseInfiniteScrollArgs } from './useInfiniteScroll'
 
-export type AugmentedRenderItemInfo<T> = VirtualItem & {
+export type AugmentedRenderItemInfo<T> = RenderComponentProps<T> & {
   item: T
   isFirst: boolean
   isLast: boolean
@@ -38,7 +39,6 @@ Data = T extends Array<infer D> ? D : never
     isFetchingNextPage?: boolean
     fetchNextPage?: () => void
     ListHeaderComponent?: () => React.ReactElement
-    virtualizerOptions?: Partial<VirtualizerOptions<any, any>>
     refreshDebounce?: number
     refreshSize?: number
     refreshThreshold?: number
@@ -48,4 +48,7 @@ Data = T extends Array<infer D> ? D : never
     refreshControlIndicatorProps?: Partial<ActivityIndicatorProps>
     style?: React.CSSProperties
     ref?: React.MutableRefObject<undefined>
-} & ComponentCommonProps
+    rowItemsSpacing?: number
+    overscan?: number
+    masonryProps?: Partial<ListMasonryProps<T>>
+} & ComponentCommonProps & UseInfiniteScrollArgs

package/src/components/List/useInfiniteScroll.ts

@@ -1,113 +1,123 @@
-import { onUpdate } from '@codeleap/common'
-import { useVirtualizer, VirtualItem, Virtualizer, VirtualizerOptions } from '@tanstack/react-virtual'
 import React from 'react'
+import { AnyFunction, onUpdate, TypeGuards } from '@codeleap/common'
 import { ListProps } from '.'
 import { GridProps } from '../Grid'
+import { useInfiniteLoader, LoadMoreItemsCallback, UseInfiniteLoaderOptions, useContainerPosition, useScroller } from 'masonic'
 
-export type UseInfiniteScrollProps<TS extends Element = any, T extends Element = any> = 
-  ListProps & 
-  GridProps & 
-  Pick<VirtualizerOptions<TS, T>, 'overscan'>
+export type UseInfiniteScrollArgs<Item extends Element = any> = {
+  threshold?: number
+  onLoadMore?: AnyFunction
+  loadMoreOptions?: Partial<UseInfiniteLoaderOptions<Item>>
+}
+
+export type UseInfiniteScrollProps<Item extends Element = any> =
+  Partial<ListProps> &
+  Partial<GridProps> & 
+  UseInfiniteScrollArgs<Item>
 
-export type UseInfiniteScrollReturn<TS extends Element = any, T extends Element = any> = {
-  dataVirtualizer: Virtualizer<TS, T>
-  count: number
-  items: VirtualItem[]
+export type UseInfiniteScrollReturn<Item extends Element = any> = {
+  onLoadMore: LoadMoreItemsCallback<Item>
   isRefresh: boolean
-  parentRef: React.MutableRefObject<undefined>
   layoutProps: {
     isEmpty: boolean
     refreshing: boolean
-    parentRef: React.MutableRefObject<undefined>
-    dataVirtualizer: Virtualizer<TS, T>
+    scrollableRef: React.MutableRefObject<undefined>
   }
 }
 
-export const useInfiniteScroll = (props: UseInfiniteScrollProps): UseInfiniteScrollReturn => {
-  const {
-    onRefresh,
-    data,
-    hasNextPage,
-    isFetchingNextPage,
-    fetchNextPage,
-    virtualizerOptions = {},
-    refreshDebounce,
-    refreshThreshold,
-    overscan = 10,
-    numColumns = 1,
-  } = props
-
-  const parentRef = React.useRef()
-
-  const [refreshing, setRefreshing] = React.useState(false)
-
-  const count = hasNextPage ? data?.length + 1 : data?.length
-
-  const dataVirtualizer = useVirtualizer({
-    count,
-    getScrollElement: () => parentRef.current,
-    estimateSize: () => null,
-    overscan,
-    ...virtualizerOptions,
-  })
+type UseRefreshOptions = {
+  threshold: number
+  debounce: number
+  enabled: boolean
+}
 
-  const isRefresh = React.useMemo(() => {
-    const _offset = dataVirtualizer?.scrollOffset
-    const _refresh = _offset <= refreshThreshold && dataVirtualizer?.isScrolling
+export const useRefresh = (onRefresh = () => null, options: UseRefreshOptions) => {
+  const {
+    threshold,
+    debounce,
+    enabled,
+  } = options
+
+  if (!enabled) return {
+    refresh: false,
+    scrollableRef: null,
+  }
 
-    return _refresh
-  }, [dataVirtualizer?.scrollOffset, dataVirtualizer?.isScrolling])
+  const [refresh, setRefresh] = React.useState(false)
 
-  const isEmpty = !data || !data?.length
+  const containerRef = React.useRef(null)
 
-  const items = dataVirtualizer?.getVirtualItems()
+  const { offset } = useContainerPosition(containerRef)
+  const { scrollTop, isScrolling } = useScroller(offset, 2)
 
-  onUpdate(() => {
-    if (isRefresh) {
-      setRefreshing(true)
+  const handleRefresh = React.useCallback(() => {
+    if (!refresh && isScrolling) {
+      setRefresh(true)
       onRefresh?.()
 
       setTimeout(() => {
-        setRefreshing(false)
-      }, refreshDebounce)
+        setRefresh(false)
+      }, debounce)
     }
-  }, [!!isRefresh])
+  }, [refresh, isScrolling])
 
   onUpdate(() => {
-    const [lastItem] = [...(items ?? [])]?.reverse()
-
-    if (!lastItem) {
-      return
+    if (scrollTop <= threshold) {
+      handleRefresh()
     }
+  }, [scrollTop])
 
-    const itemsLength = (data?.length / numColumns) - 1
+  return {
+    refresh,
+    scrollableRef: containerRef,
+  }
+}
 
-    if (
-      lastItem?.index >= itemsLength &&
-      hasNextPage &&
-      !isFetchingNextPage
-    ) {
-      fetchNextPage?.()
-    }
-  }, [
+export function useInfiniteScroll<Item extends Element = any>(props: UseInfiniteScrollProps<Item>): UseInfiniteScrollReturn<Item> {
+  const {
+    onRefresh,
+    data,
     hasNextPage,
+    refresh: refreshEnabled,
     fetchNextPage,
-    data?.length,
-    isFetchingNextPage,
-    items,
-  ])
+    refreshThreshold,
+    refreshDebounce,
+    loadMoreOptions = {},
+    onLoadMore,
+    threshold = 3,
+  } = props
+
+  const infiniteLoader = useInfiniteLoader(
+    async (args) => {
+      if (hasNextPage) await fetchNextPage?.()
+      if (TypeGuards.isFunction(onLoadMore)) await onLoadMore?.(args)
+    },
+    {
+      isItemLoaded: (index, items) => !!items?.[index],
+      minimumBatchSize: 32,
+      threshold: threshold,
+      ...loadMoreOptions,
+    },
+  )
+
+  const { refresh, scrollableRef } = useRefresh(
+    onRefresh, 
+    { 
+      threshold: refreshThreshold, 
+      debounce: refreshDebounce,
+      enabled: refreshEnabled,
+    }
+  )
+
+  const isEmpty = React.useMemo(() => (!data || !data?.length), [data?.length])
 
   return {
-    items,
-    dataVirtualizer,
-    isRefresh,
-    count,
-    parentRef,
+    onLoadMore: infiniteLoader,
+    isRefresh: refresh,
     layoutProps: {
-      parentRef,
-      refreshing,
+      scrollableRef,
+      refreshing: refresh,
       isEmpty,
-      dataVirtualizer
     }
   }
 }