Reimplement Masonry layout component

src/app/components/blocks/OverviewContent.tsx

@@ -4,7 +4,7 @@ import useForceUpdate from "use-force-update";
 import { useAtom, useAtomValue } from "jotai";
 import { RESET } from "jotai/utils";
 import { ethers } from "ethers";
-import Masonry from "lib/masonry-layout/Masonry";
+import Masonry from "lib/react-masonry/Masonry";
 
 import {
   AccountAsset,
@@ -231,6 +231,30 @@ const TokenList: FC = () => {
     [setTokenType, setTokenSlug]
   );
 
+  const renderNFTCard = useCallback(
+    (nft: AccountNFT, i: number) => (
+      <NftCard
+        key={nft.tokenSlug}
+        ref={
+          i === tokens.length - LOAD_MORE_ON_NFT_FROM_END - 1
+            ? loadMoreTriggerAssetRef
+            : null
+        }
+        nft={nft}
+        isActive={!manageModeEnabled && tokenSlug === nft.tokenSlug}
+        onAssetSelect={handleTokenSelect}
+        isManageMode={manageModeEnabled}
+      />
+    ),
+    [
+      tokens.length,
+      manageModeEnabled,
+      tokenSlug,
+      handleTokenSelect,
+      loadMoreTriggerAssetRef,
+    ]
+  );
+
   return (
     <div
       className={classNames(
@@ -354,22 +378,7 @@ const TokenList: FC = () => {
               ))}
             </>
           ) : (
-            <Masonry gap="0.25rem">
-              {tokens.map((nft, i) => (
-                <NftCard
-                  key={nft.tokenSlug}
-                  ref={
-                    i === tokens.length - LOAD_MORE_ON_NFT_FROM_END - 1
-                      ? loadMoreTriggerAssetRef
-                      : null
-                  }
-                  nft={nft as AccountNFT}
-                  isActive={!manageModeEnabled && tokenSlug === nft.tokenSlug}
-                  onAssetSelect={handleTokenSelect}
-                  isManageMode={manageModeEnabled}
-                />
-              ))}
-            </Masonry>
+            <Masonry items={tokens} renderItem={renderNFTCard} gap="0.25rem" />
           )}
         </ScrollAreaContainer>
       )}

src/lib/react-masonry/Masonry.tsx

@@ -0,0 +1,48 @@
+import { HTMLAttributes, memo, ReactNode, useMemo } from "react";
+
+type MasonryProps = HTMLAttributes<HTMLDivElement> & {
+  items: any[];
+  renderItem: (item: any, i: number) => ReactNode;
+  gap: string;
+};
+
+const Masonry = memo<MasonryProps>(({ items, renderItem, gap, ...rest }) => {
+  const columns = useMemo(() => {
+    const col: any[][] = [[], [], []];
+
+    if (items.length === 0) return col;
+
+    for (let i = 0; i < items.length; i++) {
+      col[i % 3].push({ item: items[i], i });
+    }
+
+    return col;
+  }, [items]);
+
+  return (
+    <div
+      style={{
+        display: "grid",
+        gridTemplateColumns: `repeat(${columns.length}, minmax(0.5rem, 1fr))`,
+        columnGap: gap,
+        alignItems: "start",
+      }}
+      {...rest}
+    >
+      {columns.map((columnItems, columnIndex) => (
+        <div
+          key={columnIndex}
+          style={{
+            display: "grid",
+            gridTemplateColumns: "100%",
+            rowGap: gap,
+          }}
+        >
+          {columnItems.map(({ item, i }) => renderItem(item, i))}
+        </div>
+      ))}
+    </div>
+  );
+});
+
+export default Masonry;