Fix #9

.gitignore

@@ -23,3 +23,4 @@ dist-ssr
 *.sln
 *.sw?
 business-cards-logo-zip-file.zip
+business_card_app.cards.json

package.json

@@ -14,6 +14,7 @@
         "@mantine/form": "^7.12.1",
         "@mantine/hooks": "^7.12.1",
         "@mantine/notifications": "^7.12.1",
+        "@react-hook/window-size": "^3.1.1",
         "@stylistic/eslint-plugin": "^2.6.3",
         "eslint-plugin-prefer-arrow": "^1.2.3",
         "eslint-plugin-react": "^7.35.0",

src/pages/Cards.tsx

@@ -1,12 +1,14 @@
 import { NavLink, useLoaderData, useLocation, useRouteLoaderData } from 'react-router-dom'
 import { CardsLoaderReturnData } from '../loadersActions'
-import { Masonry } from 'masonic'
+import { MasonryScroller, useContainerPosition, usePositioner, useResizeObserver } from 'masonic'
 import MasonryCard from '../components/cards/MasonryCard'
 import { Affix, Button, useMatches } from '@mantine/core'
 import { TbPlus } from 'react-icons/tb'
 import { useLang } from '../context/lang/useLang'
-import { CachedCardResponse, Role } from '../types'
+import { Role } from '../types'
 import { useRoles } from '../hooks/useRoles'
+import { useRef } from 'react'
+import { useWindowSize } from '@react-hook/window-size'
 
 const cardCreateRoles: Role[] = ['admin', 'business']
 
@@ -34,11 +36,37 @@ const Cards = () => {
                 0
     ))
 
+    // We only want to use positioner when the collection has gotten smaller, because it causes a flicker
+    // https://github.com/jaredLunde/masonic/issues/12#issuecomment-1710000167
+    const lengthRef = useRef<number>(0)
+
+    const containerRef = useRef(null)
+    const [windowWidth, windowHeight] = useWindowSize()
+    const { offset, width } = useContainerPosition(containerRef, [
+        windowWidth,
+        windowHeight
+    ])
+    const positioner = usePositioner(
+        { width, columnWidth, columnGutter },
+        [cards.length < lengthRef.current]
+    )
+    const resizeObserver = useResizeObserver(positioner)
+
+    lengthRef.current = cards.length
+
     return (
         <>
-            <Masonry items={[...cards]} render={MasonryCard} key={pathname}
-                columnWidth={columnWidth} columnGutter={columnGutter}
-                itemKey={(data, index) => (data as CachedCardResponse | undefined)?._id ?? index} />
+            <MasonryScroller
+                positioner={positioner}
+                resizeObserver={resizeObserver}
+                containerRef={containerRef}
+                items={cards}
+                height={windowHeight}
+                offset={offset}
+                overscanBy={6}
+                render={MasonryCard}
+                key={pathname}
+            />
             {
                 hasRole(...cardCreateRoles) &&
                 <Affix position={{ top: 80, right: 20 }}>