add: react-visualizer for performant lists

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 clsx from 'clsx';
+import { TabItem } from '@/components/tab/TabItem';
 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 (
-            <div>
-                {currentOrders.map((order) => {
+        return 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) => (
-                    <TabItemRenderer
-                        key={index}
-                        className={''}
-                        onClick={() => updateTab(index)}
-                    >
-                        <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>
-                ))}
+                <TabItem title={categories[0].title} imageSrc={categories[0].image}>
+                    {firstTab()}
+                </TabItem>
+                <TabItem title={categories[0].title} imageSrc={categories[0].image}>
+                    <div>empty</div>
+                </TabItem>
             </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
-            style={{
-                backgroundColor: '#FFFFFF70',
-                justifyContent: 'center',
-                border: '2px solid white',
-                borderRadius: '32px',
-            }}
-            itemRenderer={itemRenderer}
-            {...restProps}>
-            {children}
-        </HorizontalScrollView>
+        <div className='h-full'>
+            <HorizontalScrollView
+                style={{
+                    backgroundColor: '#FFFFFF70',
+                    justifyContent: 'center',
+                    border: '2px solid white',
+                    borderRadius: '32px',
+                }}
+                itemRenderer={itemRenderer}
+                {...restProps}>
+                <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
+}