From ea37a4e072bf25ac285785739566a6dacb5c98e5 Mon Sep 17 00:00:00 2001
From: zhaishengjia <zhaishengjia@shein.com>
Date: Wed, 30 Oct 2024 20:40:28 +0800
Subject: [PATCH] perf: CardGroup refactor

---
 package.json                              |  2 +-
 packages/base/src/card-group/item.tsx     | 15 ++++++++++++---
 packages/base/src/card-group/lazyload.tsx |  3 ++-
 3 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 49837662c..b4d2952c9 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "sheinx",
   "private": true,
-  "version": "3.4.5-beta.7",
+  "version": "3.4.5-beta.8",
   "description": "A react library developed with sheinx",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
diff --git a/packages/base/src/card-group/item.tsx b/packages/base/src/card-group/item.tsx
index 5c4510c2c..120cda751 100644
--- a/packages/base/src/card-group/item.tsx
+++ b/packages/base/src/card-group/item.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useLayoutEffect, useMemo, useState, } from 'react';
+import React, { useContext } from 'react';
 import { useInView, usePersistFn } from '@sheinx/hooks';
 import classNames from 'classnames';
 import { CardGroupContext } from './card-group-context';
@@ -11,6 +11,12 @@ const Item = <V,>(props: CardGroupItemProps<V>) => {
   const { container } = useContext(CardGroupContext);
   const classes = props.jssStyle?.cardGroup?.();
 
+  const { ref: itemRef, isInView  } = useInView<HTMLDivElement>({
+    rootMargin: `${container?.offsetHeight || 500}px`,
+    root: container,
+    threshold:[0, 1]
+  })
+
   const handleChange = usePersistFn((_: any, checked: boolean) => {
     if (props.onChange) props.onChange(checked, props.value!);
   });
@@ -19,7 +25,7 @@ const Item = <V,>(props: CardGroupItemProps<V>) => {
     if (!props.placeholder) return content;
     if (!container) return content;
     return (
-      <Lazyload container={container} placeholder={props.placeholder}>
+      <Lazyload container={container} placeholder={props.placeholder} isInView={isInView}>
         {content}
       </Lazyload>
     );
@@ -43,8 +49,11 @@ const Item = <V,>(props: CardGroupItemProps<V>) => {
     </>
   );
 
+  const hiddenStyle = isInView ? undefined : { visibility: 'hidden' };
+  const itemStyle = { ...props.style, ...hiddenStyle } as React.CSSProperties;
+
   return (
-    <div className={cls} style={props.style}>
+    <div ref={itemRef} className={cls} style={itemStyle}>
       {renderChildren(content)}
     </div>
   );
diff --git a/packages/base/src/card-group/lazyload.tsx b/packages/base/src/card-group/lazyload.tsx
index be2c41be9..1ad1a378c 100644
--- a/packages/base/src/card-group/lazyload.tsx
+++ b/packages/base/src/card-group/lazyload.tsx
@@ -8,6 +8,7 @@ export interface LazyloadProps {
   placeholder?: React.ReactNode;
   container?: HTMLElement;
   offset?: number;
+  isInView?: boolean;
 }
 
 const Lazyload = (props: LazyloadProps) => {
@@ -29,7 +30,7 @@ const Lazyload = (props: LazyloadProps) => {
     };
   }, []);
 
-  if (ready) return <>{props.children}</>;
+  if (ready && props.isInView) return <>{props.children}</>;
   return (
     <span ref={placeholderRef} style={{ border: '1px solid transparent' }}>
       {props.placeholder}