mirrors/nocobase
1
0
Fork 0
mirror of https://github.com/nocobase/nocobase synced 2024-11-15 23:26:38 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

perf(withSkeletonComponent): use useDeferredValue

Browse Source
This commit is contained in:
Zeke Zhang 2024-11-03 17:20:12 +08:00
parent def498c203
commit d58668f36e
4 changed files with 15 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/core/client/src/hoc/withSkeletonComponent.tsx
View File

@ -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 />;
}

6
packages/core/client/src/schema-component/antd/details/Details.tsx
View File

@ -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} />

5
packages/core/client/src/schema-component/antd/form-v2/FormWithDataTemplates.tsx
View File

@ -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} />
</>
);

6
packages/core/client/src/schema-component/antd/form-v2/Templates.tsx
View File

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