Merge pull request #773 from sheinsight/perf-card-group7

perf: CardGroup refactor

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",

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>
   );

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}