From 0933cb33ae9db60c430aa17a66699fbc8f016311 Mon Sep 17 00:00:00 2001
From: PhilReact <philliplangmartinez@gmail.com>
Date: Mon, 30 Jun 2025 10:43:43 +0300
Subject: [PATCH] optimize render of listitem

---
 package.json                                  |  2 +-
 .../ResourceList/HorizontalPaginationList.tsx |  7 ++-
 .../ResourceList/ResourceListDisplay.tsx      | 48 +++++++++++++------
 .../ResourceList/VerticalPaginationList.tsx   |  4 +-
 4 files changed, 43 insertions(+), 18 deletions(-)

diff --git a/package.json b/package.json
index 4e43d25..84dadf0 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "qapp-core",
-  "version": "1.0.36",
+  "version": "1.0.37",
   "description": "Qortal's core React library with global state, UI components, and utilities",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
diff --git a/src/components/ResourceList/HorizontalPaginationList.tsx b/src/components/ResourceList/HorizontalPaginationList.tsx
index fb60a66..0b255a2 100644
--- a/src/components/ResourceList/HorizontalPaginationList.tsx
+++ b/src/components/ResourceList/HorizontalPaginationList.tsx
@@ -18,7 +18,7 @@ interface HorizontalPaginatedListProps {
   defaultLoaderParams?: DefaultLoaderParams;
 }
 
-export const HorizontalPaginatedList = ({
+ const MemorizedComponent = ({
   items,
   listItem,
   loaderItem,
@@ -30,6 +30,7 @@ export const HorizontalPaginatedList = ({
   disablePagination,
   defaultLoaderParams
 }: HorizontalPaginatedListProps) => {
+
 const lastItemRef= useRef<any>(null)
 const lastItemRef2= useRef<any>(null)
 const [columnsPerRow, setColumnsPerRow] = useState<null | number>(null)
@@ -102,3 +103,7 @@ const displayedItems = disablePagination ? items : items?.length < (displayedLim
     </div>
   );
 };
+
+
+
+export const HorizontalPaginatedList = React.memo(MemorizedComponent);
diff --git a/src/components/ResourceList/ResourceListDisplay.tsx b/src/components/ResourceList/ResourceListDisplay.tsx
index 499ebe9..50f9405 100644
--- a/src/components/ResourceList/ResourceListDisplay.tsx
+++ b/src/components/ResourceList/ResourceListDisplay.tsx
@@ -366,6 +366,13 @@ const setResourceCacheExpiryDuration = useCacheStore((s) => s.setResourceCacheEx
     return listItem(item, index);
   }, [ listItem]);
 
+  const onLoadLess = useCallback((displayLimit: number)=> {
+removeFromList(listName, displayLimit)
+  }, [removeFromList])
+    const onLoadMore = useCallback((displayLimit: number)=> {
+getResourceMoreList(displayLimit)
+  }, [getResourceMoreList])
+
   return (
     <div ref={elementRef} style={{
       width: '100%',
@@ -417,9 +424,7 @@ const setResourceCacheExpiryDuration = useCacheStore((s) => s.setResourceCacheEx
           )}
           {disableVirtualization && direction === "HORIZONTAL" && (
             <>
-             <HorizontalPaginatedList defaultLoaderParams={defaultLoaderParams} disablePagination={disablePagination} limit={search?.limit || 20} onLoadLess={(displayLimit)=> {
-              removeFromList(listName, displayLimit)
-             }}  items={listToDisplay} listItem={renderListItem} onLoadMore={(displayLimit)=> getResourceMoreList(displayLimit)} gap={styles?.gap} minItemWidth={styles?.horizontalStyles?.minItemWidth} loaderItem={loaderItem} />
+             <HorizontalPaginatedList defaultLoaderParams={defaultLoaderParams} disablePagination={disablePagination} limit={search?.limit || 20} onLoadLess={onLoadLess}  items={listToDisplay} listItem={renderListItem} onLoadMore={onLoadMore} gap={styles?.gap} minItemWidth={styles?.horizontalStyles?.minItemWidth} loaderItem={loaderItem} />
             </>
             
           )}
@@ -458,7 +463,6 @@ function arePropsEqual(
 
 export const ResourceListDisplay = React.memo(MemorizedComponent, arePropsEqual);
 
-
 interface ListItemWrapperProps {
   item: QortalMetadata;
   index: number;
@@ -474,13 +478,27 @@ export const ListItemWrapper: React.FC<ListItemWrapperProps> = ({
   defaultLoaderParams,
   renderListItemLoader,
 }) => {
-  const getResourceCache = useCacheStore((s)=> s.getResourceCache)
+const resourceKey = `${item.service}-${item.name}-${item.identifier}`;
 
-  const findCachedResource = getResourceCache(
-    `${item.service}-${item.name}-${item.identifier}`,
-    true
-  );
-  if (findCachedResource === null && !renderListItemLoader)
+const entry = useCacheStore((s) => s.resourceCache[resourceKey]);
+const [validResource, setValidResource] = useState(entry?.data ?? null);
+
+useEffect(() => {
+  if (!entry) return setValidResource(null);
+
+  if (entry.expiry > Date.now()) {
+    setValidResource(entry.data);
+  } else {
+    useCacheStore.setState((s) => {
+      const newCache = { ...s.resourceCache };
+      delete newCache[resourceKey];
+      return { resourceCache: newCache };
+    });
+    setValidResource(null);
+  }
+}, [entry, resourceKey]);
+
+  if (validResource === null && !renderListItemLoader)
     return (
       <ItemCardWrapper height={60} isInCart={false}>
         <ResourceLoader
@@ -491,7 +509,7 @@ export const ListItemWrapper: React.FC<ListItemWrapperProps> = ({
         />
       </ItemCardWrapper>
     );
-  if (findCachedResource === false && !renderListItemLoader)
+  if (validResource === false && !renderListItemLoader)
     return (
       <ItemCardWrapper height={60} isInCart={false}>
         <ResourceLoader
@@ -505,16 +523,16 @@ export const ListItemWrapper: React.FC<ListItemWrapperProps> = ({
     );
   if (
     renderListItemLoader &&
-    (findCachedResource === false || findCachedResource === null)
+    (validResource === false || validResource === null)
   ) {
     return renderListItemLoader(
-      findCachedResource === null ? "LOADING" : "ERROR"
+      validResource === null ? "LOADING" : "ERROR"
     );
   }
 
   // Example transformation (Modify item if needed)
-  const transformedItem = findCachedResource
-    ? findCachedResource
+  const transformedItem = validResource
+    ? validResource
     : { qortalMetadata: item, data: null };
 
   return <>{render(transformedItem, index)}</>;
diff --git a/src/components/ResourceList/VerticalPaginationList.tsx b/src/components/ResourceList/VerticalPaginationList.tsx
index 1cf6635..d76c564 100644
--- a/src/components/ResourceList/VerticalPaginationList.tsx
+++ b/src/components/ResourceList/VerticalPaginationList.tsx
@@ -23,7 +23,7 @@ interface VerticalPaginatedListProps {
   defaultLoaderParams?: DefaultLoaderParams;
 }
 
-export const VerticalPaginatedList = ({
+ const MemorizedComponent = ({
   items,
   listItem,
   loaderItem,
@@ -111,3 +111,5 @@ export const VerticalPaginatedList = ({
     </>
   );
 };
+
+export const VerticalPaginatedList = React.memo(MemorizedComponent);