From d58668f36e527b0ad19b64b5e612c6c9e25e3313 Mon Sep 17 00:00:00 2001
From: Zeke Zhang <958414905@qq.com>
Date: Sun, 3 Nov 2024 17:20:12 +0800
Subject: [PATCH] perf(withSkeletonComponent): use useDeferredValue

---
 packages/core/client/src/hoc/withSkeletonComponent.tsx     | 7 +++++--
 .../client/src/schema-component/antd/details/Details.tsx   | 6 +++---
 .../antd/form-v2/FormWithDataTemplates.tsx                 | 5 +++--
 .../client/src/schema-component/antd/form-v2/Templates.tsx | 6 ++++--
 4 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/packages/core/client/src/hoc/withSkeletonComponent.tsx b/packages/core/client/src/hoc/withSkeletonComponent.tsx
index 47403f9749..d6edb57640 100644
--- a/packages/core/client/src/hoc/withSkeletonComponent.tsx
+++ b/packages/core/client/src/hoc/withSkeletonComponent.tsx
@@ -8,9 +8,11 @@
  */
 
 import { Skeleton } from 'antd';
-import React, { useRef } from 'react';
 import { useDataBlockRequest } from '../data-source/data-block/DataBlockRequestProvider';
 
+// @ts-ignore
+import React, { useDeferredValue, useRef } from 'react';
+
 interface Options {
   displayName?: string;
   useLoading?: () => boolean;
@@ -33,8 +35,9 @@ export const withSkeletonComponent = (Component: React.ComponentType<any>, optio
   const Result = (props: any) => {
     const loading = useLoading();
     const mountedRef = useRef(false);
+    const deferredLoading = useDeferredValue(loading);
 
-    if (!mountedRef.current && loading) {
+    if (!mountedRef.current && deferredLoading) {
       return <SkeletonComponent />;
     }
 
diff --git a/packages/core/client/src/schema-component/antd/details/Details.tsx b/packages/core/client/src/schema-component/antd/details/Details.tsx
index c0774ad020..9887d8873f 100644
--- a/packages/core/client/src/schema-component/antd/details/Details.tsx
+++ b/packages/core/client/src/schema-component/antd/details/Details.tsx
@@ -11,7 +11,7 @@ import { RecursionField, useFieldSchema } from '@formily/react';
 import { Empty } from 'antd';
 import _ from 'lodash';
 import React from 'react';
-import { useDataBlockRequest } from '../../../data-source';
+import { useDataBlockRequestData } from '../../../data-source';
 import { withDynamicSchemaProps } from '../../../hoc/withDynamicSchemaProps';
 import { withSkeletonComponent } from '../../../hoc/withSkeletonComponent';
 import { FormV2 } from '../form-v2';
@@ -21,9 +21,9 @@ export type DetailsProps = FormProps;
 
 export const Details = withDynamicSchemaProps(
   withSkeletonComponent((props: DetailsProps) => {
-    const request = useDataBlockRequest();
+    const data = useDataBlockRequestData();
     const schema = useFieldSchema();
-    if (!request?.loading && _.isEmpty(request?.data?.data)) {
+    if (_.isEmpty(data?.data)) {
       return (
         <>
           <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
diff --git a/packages/core/client/src/schema-component/antd/form-v2/FormWithDataTemplates.tsx b/packages/core/client/src/schema-component/antd/form-v2/FormWithDataTemplates.tsx
index c50175c49a..997bd95aa9 100644
--- a/packages/core/client/src/schema-component/antd/form-v2/FormWithDataTemplates.tsx
+++ b/packages/core/client/src/schema-component/antd/form-v2/FormWithDataTemplates.tsx
@@ -7,7 +7,7 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Templates } from '../..';
 import { useFormBlockContext } from '../../../block-provider/FormBlockProvider';
 import { withDynamicSchemaProps } from '../../../hoc/withDynamicSchemaProps';
@@ -18,9 +18,10 @@ export const FormWithDataTemplates: any = withDynamicSchemaProps(
   (props) => {
     const formBlockCtx = useFormBlockContext();
     const { token } = useToken();
+    const style = useMemo(() => ({ marginBottom: token.margin }), [token.margin]);
     return (
       <>
-        <Templates style={{ marginBottom: token.margin }} form={props.form || formBlockCtx?.form} />
+        <Templates style={style} form={props.form || formBlockCtx?.form} />
         <Form {...props} />
       </>
     );
diff --git a/packages/core/client/src/schema-component/antd/form-v2/Templates.tsx b/packages/core/client/src/schema-component/antd/form-v2/Templates.tsx
index b38f7d0504..c9846f6449 100644
--- a/packages/core/client/src/schema-component/antd/form-v2/Templates.tsx
+++ b/packages/core/client/src/schema-component/antd/form-v2/Templates.tsx
@@ -92,7 +92,7 @@ export const useFormDataTemplates = () => {
   };
 };
 
-export const Templates = ({ style = {}, form }: { style?: React.CSSProperties; form?: any }) => {
+export const Templates = React.memo(({ style = {}, form }: { style?: React.CSSProperties; form?: any }) => {
   const { token } = useToken();
   const { templates, display, enabled, defaultTemplate } = useFormDataTemplates();
   const { getCollectionJoinField } = useCollectionManager_deprecated();
@@ -201,7 +201,9 @@ export const Templates = ({ style = {}, form }: { style?: React.CSSProperties; f
       </Space>
     </div>
   );
-};
+});
+
+Templates.displayName = 'NocoBaseFormDataTemplates';
 
 function findDataTemplates(fieldSchema): ITemplate {
   const formSchema = findFormBlock(fieldSchema);