perf(PageContent): improve performance

packages/core/client/src/schema-component/antd/page/Page.style.ts

@@ -114,13 +114,6 @@ export const useStyles = genStyleHook('nb-page', (token) => {
         },
       },
 
-      '.pageWithFixedBlockCss': {
-        height: '100%',
-        '> .nb-grid:not(:last-child)': {
-          '> .nb-schema-initializer-button': { display: 'none' },
-        },
-      },
-
       '.nb-page-wrapper': {
         padding: `${token.paddingPageVertical}px`,
         paddingBottom: 0,

packages/core/client/src/schema-component/antd/page/Page.tsx

@@ -22,7 +22,6 @@ import { FormDialog } from '..';
 import { antTableCell } from '../../../acl/style';
 import { useRequest } from '../../../api-client';
 import { useNavigateNoUpdate } from '../../../application/CustomRouterContextProvider';
-import { useAppSpin } from '../../../application/hooks/useAppSpin';
 import { useRouterBasename } from '../../../application/hooks/useRouterBasename';
 import { useDocumentTitle } from '../../../document-title';
 import { useGlobalTheme } from '../../../global-theme';
@@ -51,7 +50,7 @@ export const Page = (props) => {
   const options = useContext(SchemaOptionsContext);
   const navigate = useNavigateNoUpdate();
   const [searchParams] = useSearchParams();
-  const [loading, setLoading] = useState(false);
+  const loading = false;
   const activeKey = useMemo(
     // 处理 searchParams 是为了兼容旧版的 tab 参数
     () => tabUid || searchParams.get('tab') || Object.keys(fieldSchema.properties || {}).shift(),
@@ -78,11 +77,7 @@ export const Page = (props) => {
             marginRight: token.paddingPageHorizontal - token.paddingLG,
           }}
           onChange={(activeKey) => {
-            setLoading(true);
             navigateToTab({ activeKey, navigate, basename: basenameOfCurrentRouter });
-            setTimeout(() => {
-              setLoading(false);
-            }, 50);
           }}
           tabBarExtraContent={
             dn.designable && (
@@ -236,38 +231,41 @@ const PageContent = memo(
     fieldSchema: Schema<any, any, any, any, any, any, any, any, any>;
     activeKey: string;
   }) => {
-    const { render } = useAppSpin();
+    // const { render } = useAppSpin();
 
-    if (loading) {
-      return render();
+    // if (loading) {
+    //   return render();
+    // }g
+
+    if (!disablePageHeader && enablePageTabs) {
+      const result = fieldSchema
+        .mapProperties((schema) => {
+          if (schema.name !== activeKey) return null;
+
+          return (
+            <SchemaComponent
+              key={schema.name}
+              distributed
+              schema={
+                new Schema({
+                  properties: {
+                    [schema.name]: schema,
+                  },
+                })
+              }
+            />
+          );
+        })
+        .filter(Boolean);
+
+      return result[0];
+    } else {
+      return (
+        <div className={className1}>
+          <SchemaComponent schema={fieldSchema} distributed />
+        </div>
+      );
     }
-
-    return (
-      <>
-        {!disablePageHeader && enablePageTabs ? (
-          fieldSchema.mapProperties((schema) => {
-            if (schema.name !== activeKey) return null;
-
-            return (
-              <SchemaComponent
-                distributed
-                schema={
-                  new Schema({
-                    properties: {
-                      [schema.name]: schema,
-                    },
-                  })
-                }
-              />
-            );
-          })
-        ) : (
-          <div className={classNames(`pageWithFixedBlockCss nb-page-content`, className1)}>
-            <SchemaComponent schema={fieldSchema} distributed />
-          </div>
-        )}
-      </>
-    );
   },
 );
 PageContent.displayName = 'PageContent';

packages/core/client/src/schema-component/core/SchemaComponent.tsx

@@ -71,12 +71,16 @@ const RecursionSchemaComponent = memo((props: ISchemaFieldProps & SchemaComponen
   );
 });
 
+RecursionSchemaComponent.displayName = 'RecursionSchemaComponent';
+
 const MemoizedSchemaComponent = memo((props: ISchemaFieldProps & SchemaComponentOnChange & DistributedProps) => {
   const { schema, ...others } = props;
   const s = useMemoizedSchema(schema);
   return <RecursionSchemaComponent {...others} schema={s} />;
 });
 
+MemoizedSchemaComponent.displayName = 'MemoizedSchemaComponent';
+
 export const SchemaComponent = memo(
   (
     props: (ISchemaFieldProps | IRecursionFieldProps) & { memoized?: boolean } & SchemaComponentOnChange &
@@ -89,3 +93,5 @@ export const SchemaComponent = memo(
     return <RecursionSchemaComponent {...others} />;
   },
 );
+
+SchemaComponent.displayName = 'SchemaComponent';