add: react-visualizer for performant lists

package-lock.json

@@ -26,6 +26,7 @@
         "next-usequerystate": "^1.20.0",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
+        "react-virtualized": "^9.22.6",
         "tailwind-merge": "^3.3.1",
         "zustand": "^5.0.6"
       },
@@ -35,6 +36,7 @@
         "@types/node": "^20",
         "@types/react": "^19",
         "@types/react-dom": "^19",
+        "@types/react-virtualized": "^9.22.2",
         "eslint": "^9",
         "eslint-config-next": "15.3.4",
         "tailwindcss": "^4",
@@ -69,6 +71,15 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.27.6",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.27.6.tgz",
+      "integrity": "sha512-vbavdySgbTTrmFE+EsiqUTzlOr5bzlnJtUv9PynGCAKvfQqjIXbvFdumPM/GxMDfyuGMJaJAU6TO4zc1Jf1i8Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@emnapi/core": {
       "version": "1.4.3",
       "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.4.3.tgz",
@@ -1922,6 +1933,13 @@
         "undici-types": "~6.21.0"
       }
     },
+    "node_modules/@types/prop-types": {
+      "version": "15.7.15",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
+      "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/react": {
       "version": "19.1.8",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.8.tgz",
@@ -1942,6 +1960,17 @@
         "@types/react": "^19.0.0"
       }
     },
+    "node_modules/@types/react-virtualized": {
+      "version": "9.22.2",
+      "resolved": "https://registry.npmjs.org/@types/react-virtualized/-/react-virtualized-9.22.2.tgz",
+      "integrity": "sha512-0Eg/ME3OHYWGxs+/n4VelfYrhXssireZaa1Uqj5SEkTpSaBu5ctFGOCVxcOqpGXRiEdrk/7uho9tlZaryCIjHA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/prop-types": "*",
+        "@types/react": "*"
+      }
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "8.35.1",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.35.1.tgz",
@@ -3087,7 +3116,6 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/damerau-levenshtein": {
@@ -3254,6 +3282,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/dunder-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -5954,6 +5992,12 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
       "license": "MIT"
     },
+    "node_modules/react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==",
+      "license": "MIT"
+    },
     "node_modules/react-remove-scroll": {
       "version": "2.7.1",
       "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.7.1.tgz",
@@ -6023,6 +6067,33 @@
         }
       }
     },
+    "node_modules/react-virtualized": {
+      "version": "9.22.6",
+      "resolved": "https://registry.npmjs.org/react-virtualized/-/react-virtualized-9.22.6.tgz",
+      "integrity": "sha512-U5j7KuUQt3AaMatlMJ0UJddqSiX+Km0YJxSqbAzIiGw5EmNz0khMyqP2hzgu4+QUtm+QPIrxzUX4raJxmVJnHg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.7.2",
+        "clsx": "^1.0.4",
+        "dom-helpers": "^5.1.3",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.7.2",
+        "react-lifecycles-compat": "^3.0.4"
+      },
+      "peerDependencies": {
+        "react": "^16.3.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.3.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/react-virtualized/node_modules/clsx": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
+      "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",

package.json

@@ -27,6 +27,7 @@
     "next-usequerystate": "^1.20.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-virtualized": "^9.22.6",
     "tailwind-merge": "^3.3.1",
     "zustand": "^5.0.6"
   },
@@ -36,6 +37,7 @@
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
+    "@types/react-virtualized": "^9.22.2",
     "eslint": "^9",
     "eslint-config-next": "15.3.4",
     "tailwindcss": "^4",

src/app/[name]/orders/page.tsx

@@ -4,10 +4,9 @@ import Button from '@/components/button/PrimaryButton';
 import CalendarIcon from '@/components/icons/CalendarIcon';
 import LocationPinIcon from '@/components/icons/LocationPinIcon';
 import TabContainer from '@/components/tab/TabContainer'
-import TabItemRenderer from '@/components/tab/TabItemRenderer'
+import { TabItem } from '@/components/tab/TabItem';
-import clsx from 'clsx';
 import Image from 'next/image';
-import React, { useCallback, useState } from 'react'
+import React from 'react'
 
 const currentOrders = [
     {
@@ -21,25 +20,51 @@ const currentOrders = [
             { id: 2, quantity: 2, image: '/assets/images/food-preview.png' },
         ]
     },
+    {
+        id: 1,
+        address: '1...',
+        date: 'دوشنبه، 28 مرداد 1403',
+        price: '560,000',
+        items: [
+            { id: 0, quantity: 1, image: '/assets/images/food-preview.png' },
+            { id: 1, quantity: 1, image: '/assets/images/food-preview.png' },
+            { id: 2, quantity: 2, image: '/assets/images/food-preview.png' },
+        ]
+    },
+    {
+        id: 2,
+        address: '2...',
+        date: 'دوشنبه، 28 مرداد 1403',
+        price: '560,000',
+        items: [
+            { id: 0, quantity: 1, image: '/assets/images/food-preview.png' },
+            { id: 1, quantity: 1, image: '/assets/images/food-preview.png' },
+            { id: 2, quantity: 2, image: '/assets/images/food-preview.png' },
+        ]
+    },
+    {
+        id: 3,
+        address: '3...',
+        date: 'دوشنبه، 28 مرداد 1403',
+        price: '560,000',
+        items: [
+            { id: 0, quantity: 1, image: '/assets/images/food-preview.png' },
+            { id: 1, quantity: 1, image: '/assets/images/food-preview.png' },
+            { id: 2, quantity: 2, image: '/assets/images/food-preview.png' },
+        ]
+    },
 ]
 
 function OrdersIndex() {
-    const [selectedTab, setSelectedTab] = useState(0);
     const categories = [
         { id: 0, title: 'سفارشات فعال', image: '/assets/images/food-image.png' },
         { id: 1, title: 'سفارشات قبلی', image: '/assets/images/food-image.png' }
     ]
 
-    const updateTab = useCallback((index: number) => {
-        setSelectedTab(index);
-    }, []);
-
     const firstTab = () => {
-        return (
+        return currentOrders.map((order) => {
-            <div>
-                {currentOrders.map((order) => {
                     return (
-                        <div key={order.id} className='w-full px-[17px] mt-4 pt-8 pb-6 bg-white rounded-3xl'>
+                        <div key={order.id} className='w-full px-[17px] mb-4 pt-8 pb-6 bg-white rounded-3xl'>
                             <div className="text-sm2">
                                 <div className='flex gap-2'>
                                     <LocationPinIcon size={16} />
@@ -81,41 +106,24 @@ function OrdersIndex() {
                             <Button className='mt-6 font-medium!'>پیگیری سفارش</Button>
                         </div>
                     )
-                })}
+                })
-            </div>
-        )
     }
 
 
     return (
-        <div className='pt-8'>
+        <div>
             <TabContainer
                 className='h-[72px] !pt-3 !pb-2 overflow-y-hidden'>
-                {categories.map((item, index) => (
+                <TabItem title={categories[0].title} imageSrc={categories[0].image}>
-                    <TabItemRenderer
+                    {firstTab()}
-                        key={index}
+                </TabItem>
-                        className={''}
+                <TabItem title={categories[0].title} imageSrc={categories[0].image}>
-                        onClick={() => updateTab(index)}
+                    <div>empty</div>
-                    >
+                </TabItem>
-                        <Image
-                            priority
-                            src={item.image}
-                            width={24}
-                            height={24}
-                            alt="category image"
-                        />
-                        <span className={clsx(
-                            'text-xs transition-all duration-150',
-                            index === selectedTab ? 'text-black' : 'text-disabled-text'
-                        )}>
-                            {item.title}
-                        </span>
-                    </TabItemRenderer>
-                ))}
             </TabContainer>
 
             {/* First tab */}
-            {selectedTab === 0 && firstTab()}
+            {/* {selectedTab === 0 && firstTab()} */}
         </div>
     )
 }

src/components/tab/TabContainer.tsx

@@ -1,25 +1,138 @@
-import React, { ReactElement, ReactNode } from 'react'
+'use client';
+
+import React, { ReactElement, ReactNode, useCallback, useEffect, useRef, useState } from 'react'
 import HorizontalScrollView from '../listview/HorizontalScrollView'
+import { TabItem, TabItemProps } from './TabItem';
+import clsx from 'clsx';
+import TabItemRenderer from './TabItemRenderer';
+import Image from 'next/image';
+import { AutoSizer, CellMeasurer, CellMeasurerCache, List } from 'react-virtualized'
+
+const cache = new CellMeasurerCache({
+    fixedWidth: true,
+    defaultHeight: 100,
+});
+
 
 type Props = {
     itemRenderer?: (child: ReactNode, index: number) => ReactElement;
     children: ReactNode;
 } & React.OlHTMLAttributes<HTMLUListElement>;
 
-
 function TabContainer({ itemRenderer, children, ...restProps }: Props) {
+
+    const [selectedTab, setSelectedTab] = useState(0);
+    const listRef: React.Ref<List> | undefined = useRef(null)
+
+    const updateTab = useCallback((index: number) => {
+        setSelectedTab(index);
+    }, []);
+
+    useEffect(() => {
+        setTimeout(() => {
+            cache.clearAll();
+            listRef.current?.recomputeRowHeights();
+        }, 0);
+
+        const updateVh = () => {
+            const vh = window.innerHeight * 0.01;
+            document.documentElement.style.setProperty('--vh', `${vh}px`);
+        };
+
+        updateVh();
+        window.addEventListener('resize', updateVh);
+        window.addEventListener('orientationchange', updateVh);
+
+        return () => {
+            window.removeEventListener('resize', updateVh);
+            window.removeEventListener('orientationchange', updateVh);
+        };
+
+    }, [selectedTab, children]);
+
+
+    const items = React.Children.toArray(children).filter(
+        (child): child is ReactElement<TabItemProps> =>
+            React.isValidElement(child) && child.type === TabItem
+    );
+    const selectedTabChildren = React.Children.toArray(items[selectedTab].props.children);
+    console.log('children:', selectedTabChildren);
+
+
     return (
-        <HorizontalScrollView
+        <div className='h-full'>
-            style={{
+            <HorizontalScrollView
-                backgroundColor: '#FFFFFF70',
+                style={{
-                justifyContent: 'center',
+                    backgroundColor: '#FFFFFF70',
-                border: '2px solid white',
+                    justifyContent: 'center',
-                borderRadius: '32px',
+                    border: '2px solid white',
-            }}
+                    borderRadius: '32px',
-            itemRenderer={itemRenderer}
+                }}
-            {...restProps}>
+                itemRenderer={itemRenderer}
-            {children}
+                {...restProps}>
-        </HorizontalScrollView>
+                <div
+                    className='inline-flex gap-10'>
+                    {items.map((item, index) => {
+                        const { title, imageSrc }: TabItemProps = item.props;
+                        return (
+                            <TabItemRenderer
+                                key={index}
+                                className={''}
+                                onClick={() => updateTab(index)}
+                            >
+                                <Image
+                                    priority
+                                    src={imageSrc}
+                                    width={24}
+                                    height={24}
+                                    alt="category image"
+                                />
+                                <span className={clsx(
+                                    'text-xs transition-all duration-150',
+                                    index === selectedTab ? 'text-black' : 'text-disabled-text'
+                                )}>
+                                    {title}
+                                </span>
+                            </TabItemRenderer>
+                        )
+                    })}
+                </div>
+            </HorizontalScrollView>
+
+            <div style={{ height: 'calc(var(--vh, 1vh) * 100 - 270px)' }} className='pe-2 pt-4 '>
+                <AutoSizer>
+                    {({ height, width }) => (
+                        <List
+                            className='noscrollbar'
+                            style={{ overflowX: 'hidden' }} // optional
+                            ref={listRef}
+                            width={width}
+                            height={height}
+                            rowCount={selectedTabChildren.length}
+                            rowHeight={cache.rowHeight}
+                            rowRenderer={({ index, key, style, parent }) => (
+                                <CellMeasurer
+                                    key={key}
+                                    cache={cache}
+                                    parent={parent}
+                                    columnIndex={0}
+                                    rowIndex={index}
+                                >
+                                    {({ measure, registerChild }) => (
+                                        <div ref={registerChild} style={style} dir='rtl'>
+                                            <div onLoad={measure}>
+                                                {selectedTabChildren[index]}
+                                            </div>
+                                        </div>
+                                    )}
+                                </CellMeasurer>
+                            )}
+
+                        />
+                    )}
+                </AutoSizer>
+            </div>
+        </div>
     )
 }
 

src/components/tab/TabItem.tsx

@@ -0,0 +1,11 @@
+import React, { ReactNode } from 'react';
+
+export interface TabItemProps {
+  title: string;
+  imageSrc: string;
+  children: ReactNode;
+}
+
+export function TabItem({ children }: TabItemProps) {
+  return <>{children}</>; // it just renders children; logic handled by TabContainer
+}