perf: add skeleton component for other blocks

packages/core/client/src/block-provider/FormBlockProvider.tsx

@@ -16,16 +16,16 @@ import {
   useCollectionManager,
   useCollectionParentRecordData,
   useCollectionRecord,
+  useCollectionRecordData,
 } from '../data-source';
 import { withDynamicSchemaProps } from '../hoc/withDynamicSchemaProps';
+import { withSkeletonComponent } from '../hoc/withSkeletonComponent';
 import { useTreeParentRecord } from '../modules/blocks/data-blocks/table/TreeRecordProvider';
 import { RecordProvider } from '../record-provider';
-import { useActionContext } from '../schema-component';
+import { useActionContext, useDesignable } from '../schema-component';
 import { BlockProvider, useBlockRequestContext } from './BlockProvider';
 import { TemplateBlockProvider } from './TemplateBlockProvider';
 import { FormActiveFieldsProvider } from './hooks/useFormActiveFields';
-import { useDesignable } from '../schema-component';
-import { useCollectionRecordData } from '../data-source';
 
 export const FormBlockContext = createContext<{
   form?: any;
@@ -43,7 +43,8 @@ export const FormBlockContext = createContext<{
 }>({});
 FormBlockContext.displayName = 'FormBlockContext';
 
-const InternalFormBlockProvider = (props) => {
+const InternalFormBlockProvider = withSkeletonComponent(
+  (props) => {
     const cm = useCollectionManager();
     const ctx = useFormBlockContext();
     const { action, readPretty, params, collection, association } = props;
@@ -100,7 +101,11 @@ const InternalFormBlockProvider = (props) => {
         </RecordProvider>
       </FormBlockContext.Provider>
     );
-};
+  },
+  {
+    displayName: 'InternalFormBlockProvider',
+  },
+);
 
 /**
  * @internal

packages/core/client/src/hoc/withSkeletonComponent.tsx

@@ -32,7 +32,7 @@ const useDefaultLoading = () => {
 export const withSkeletonComponent = (Component: React.ComponentType<any>, options?: Options) => {
   const { useLoading = useDefaultLoading, displayName, SkeletonComponent = Skeleton } = options || {};
 
-  const Result = (props: any) => {
+  const Result = React.memo((props: any) => {
     const loading = useLoading();
     const mountedRef = useRef(false);
     const deferredLoading = useDeferredValue(loading);
@@ -44,7 +44,7 @@ export const withSkeletonComponent = (Component: React.ComponentType<any>, optio
     mountedRef.current = true;
 
     return <Component {...props} />;
-  };
+  });
 
   Result.displayName =
     displayName || `${Component.displayName}(withSkeletonComponent)` || `${Component.name}(withSkeletonComponent)`;

packages/core/client/src/index.ts

@@ -61,7 +61,7 @@ export * from './user';
 export * from './variables';
 
 export { withDynamicSchemaProps } from './hoc/withDynamicSchemaProps';
-
+export { withSkeletonComponent } from './hoc/withSkeletonComponent';
 export { SchemaSettingsActionLinkItem } from './modules/actions/link/customizeLinkActionSettings';
 export { useURLAndHTMLSchema } from './modules/actions/link/useURLAndHTMLSchema';
 export * from './modules/blocks/BlockSchemaToolbar';

packages/core/client/src/schema-component/antd/grid-card/GridCard.tsx

@@ -8,12 +8,14 @@
  */
 
 import { css, cx } from '@emotion/css';
-import { ArrayField } from '@formily/core';
 import { FormLayout } from '@formily/antd-v5';
+import { ArrayField } from '@formily/core';
 import { RecursionField, Schema, useField, useFieldSchema } from '@formily/react';
 import { List as AntdList, Col, PaginationProps } from 'antd';
 import React, { useCallback, useState } from 'react';
+import { getCardItemSchema } from '../../../block-provider';
 import { withDynamicSchemaProps } from '../../../hoc/withDynamicSchemaProps';
+import { withSkeletonComponent } from '../../../hoc/withSkeletonComponent';
 import { SortableItem } from '../../common';
 import { SchemaComponentOptions } from '../../core';
 import { useDesigner, useProps } from '../../hooks';
@@ -22,7 +24,6 @@ import { GridCardDesigner } from './GridCard.Designer';
 import { GridCardItem } from './GridCard.Item';
 import { useGridCardActionBarProps, useGridCardBodyHeight } from './hooks';
 import { defaultColumnCount, pageSizeOptions } from './options';
-import { getCardItemSchema } from '../../../block-provider';
 
 const rowGutter = {
   md: 12,
@@ -114,7 +115,8 @@ const usePaginationProps = () => {
   }
 };
 
-const InternalGridCard = (props: GridCardProps) => {
+const InternalGridCard = withSkeletonComponent(
+  (props: GridCardProps) => {
     // 新版 UISchema（1.0 之后）中已经废弃了 useProps，这里之所以继续保留是为了兼容旧版的 UISchema
     const { columnCount: columnCountProp, pagination } = useProps(props);
     const { service, columnCount: _columnCount = defaultColumnCount } = useGridCardBlockContext();
@@ -233,7 +235,11 @@ const InternalGridCard = (props: GridCardProps) => {
         </SortableItem>
       </SchemaComponentOptions>
     );
-};
+  },
+  {
+    displayName: 'InternalGridCard',
+  },
+);
 
 export const GridCard = withDynamicSchemaProps(InternalGridCard) as typeof InternalGridCard & {
   Item: typeof GridCardItem;

packages/core/client/src/schema-component/antd/list/List.tsx

@@ -8,12 +8,14 @@
  */
 
 import { css, cx } from '@emotion/css';
-import { ArrayField } from '@formily/core';
 import { FormLayout } from '@formily/antd-v5';
+import { ArrayField } from '@formily/core';
 import { RecursionField, Schema, useField, useFieldSchema } from '@formily/react';
 import { List as AntdList, PaginationProps, theme } from 'antd';
 import React, { useCallback, useState } from 'react';
+import { getCardItemSchema } from '../../../block-provider';
 import { withDynamicSchemaProps } from '../../../hoc/withDynamicSchemaProps';
+import { withSkeletonComponent } from '../../../hoc/withSkeletonComponent';
 import { SortableItem } from '../../common';
 import { SchemaComponentOptions } from '../../core';
 import { useDesigner } from '../../hooks';
@@ -22,9 +24,9 @@ import { ListDesigner } from './List.Designer';
 import { ListItem } from './List.Item';
 import useStyles from './List.style';
 import { useListActionBarProps, useListBlockHeight } from './hooks';
-import { getCardItemSchema } from '../../../block-provider';
 
-const InternalList = (props) => {
+const InternalList = withSkeletonComponent(
+  (props) => {
     const { service } = useListBlockContext();
     const { run, params } = service;
     const fieldSchema = useFieldSchema();
@@ -174,7 +176,11 @@ const InternalList = (props) => {
         </SortableItem>
       </SchemaComponentOptions>,
     );
-};
+  },
+  {
+    displayName: 'InternalList',
+  },
+);
 
 export const List = withDynamicSchemaProps(InternalList) as typeof InternalList & {
   Item: typeof ListItem;

packages/plugins/@nocobase/plugin-calendar/src/client/calendar/Calendar.tsx

@@ -8,24 +8,25 @@
  */
 
 import { LeftOutlined, RightOutlined } from '@ant-design/icons';
-import { RecursionField, Schema, observer, useFieldSchema } from '@formily/react';
+import { RecursionField, Schema, useFieldSchema } from '@formily/react';
 import {
   PopupContextProvider,
   RecordProvider,
   getLabelFormatValue,
+  useACLRoleContext,
   useCollection,
   useCollectionParentRecordData,
   usePopupUtils,
   useProps,
   useToken,
   withDynamicSchemaProps,
-  useACLRoleContext,
+  withSkeletonComponent,
 } from '@nocobase/client';
 import { parseExpression } from 'cron-parser';
 import type { Dayjs } from 'dayjs';
 import dayjs from 'dayjs';
 import get from 'lodash/get';
-import React, { useMemo, useState, useEffect } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { Calendar as BigCalendar, View, dayjsLocalizer } from 'react-big-calendar';
 import * as dates from 'react-big-calendar/lib/utils/dates';
 import { i18nt, useTranslation } from '../../locale';
@@ -228,7 +229,7 @@ function findCreateSchema(schema): Schema {
 }
 
 export const Calendar: any = withDynamicSchemaProps(
-  observer(
+  withSkeletonComponent(
     (props: any) => {
       const [visible, setVisible] = useState(false);
       const { openPopup } = usePopupUtils({

packages/plugins/@nocobase/plugin-kanban/src/client/Kanban.tsx

@@ -17,6 +17,7 @@ import {
   useCollectionParentRecordData,
   useProps,
   withDynamicSchemaProps,
+  withSkeletonComponent,
 } from '@nocobase/client';
 import { Card, Skeleton, Spin, Tag } from 'antd';
 import React, { useCallback, useContext, useMemo, useRef, useState } from 'react';
@@ -72,6 +73,7 @@ const MemorizedRecursionField = React.memo(RecursionField);
 MemorizedRecursionField.displayName = 'MemorizedRecursionField';
 
 export const Kanban: any = withDynamicSchemaProps(
+  withSkeletonComponent(
     observer((props: any) => {
       const { styles } = useStyles();
 
@@ -187,5 +189,6 @@ export const Kanban: any = withDynamicSchemaProps(
         </Spin>
       );
     }),
+  ),
   { displayName: 'Kanban' },
 );

packages/plugins/@nocobase/plugin-map/src/client/block/MapBlock.tsx

@@ -9,8 +9,8 @@
 
 import {
   PopupContextProvider,
-  useCollection_deprecated,
-  useCollectionManager_deprecated,
+  useCollection,
+  useCollectionManager,
   usePopupUtils,
   useProps,
   withDynamicSchemaProps,
@@ -35,10 +35,10 @@ export const MapBlock = withDynamicSchemaProps((props) => {
   // 新版 UISchema（1.0 之后）中已经废弃了 useProps，这里之所以继续保留是为了兼容旧版的 UISchema
   const { fieldNames } = useProps(props);
 
-  const { getCollectionJoinField } = useCollectionManager_deprecated();
-  const { name } = useCollection_deprecated();
+  const cm = useCollectionManager();
+  const { name } = useCollection() || {};
   const collectionField = useMemo(() => {
-    return getCollectionJoinField([name, fieldNames?.field].flat().join('.'));
+    return cm?.getCollectionField([name, fieldNames?.field].flat().join('.'));
   }, [name, fieldNames?.field]);
 
   const fieldComponentProps = collectionField?.uiSchema?.['x-component-props'];

packages/plugins/@nocobase/plugin-map/src/client/components/MapBlock.tsx

@@ -7,7 +7,7 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { PopupContextProvider } from '@nocobase/client';
+import { PopupContextProvider, withSkeletonComponent } from '@nocobase/client';
 import React, { useMemo } from 'react';
 import { useMapTranslation } from '../locale';
 import { AMapBlock } from './AMap';
@@ -18,7 +18,8 @@ const MapBlocks = {
   google: GoogleMapsBlock,
 };
 
-export const MapBlockComponent: React.FC<any> = (props) => {
+export const MapBlockComponent: React.FC<any> = withSkeletonComponent(
+  (props) => {
     const { t } = useMapTranslation();
     const { mapType } = props;
 
@@ -35,4 +36,8 @@ export const MapBlockComponent: React.FC<any> = (props) => {
         <Component {...props} />
       </PopupContextProvider>
     );
-};
+  },
+  {
+    displayName: 'MapBlockComponent',
+  },
+);