admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Improve RecordShowPage Header performances (#6440)

Browse Source 
In this PR, I am:
- removing a useEffect (we use the onCompleted prop of useFindManyQuery
hook)
- moving this logic into a RecordShowPageHeader to avoid re-renders of
the whole tree
This commit is contained in:
Charles Bochet
2024-07-29 18:11:41 +02:00
committed by GitHub
parent 0fd3c8b264
commit d2fe31061e
3 changed files with 87 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
packages/twenty-front/src/modules/object-record/record-show/hooks/useRecordShowPagePagination.ts
View File

@ -11,7 +11,7 @@ import { buildShowPageURL } from '@/object-record/record-show/utils/buildShowPag
import { buildIndexTablePageURL } from '@/object-record/record-table/utils/buildIndexTableURL';
import { useQueryVariablesFromActiveFieldsOfViewOrDefaultView } from '@/views/hooks/useQueryVariablesFromActiveFieldsOfViewOrDefaultView';
import { isNonEmptyString } from '@sniptt/guards';
import { useEffect, useState } from 'react';
import { useState } from 'react';
import { capitalize } from '~/utils/string/capitalize';
export const useRecordShowPagePagination = (
@ -60,55 +60,47 @@ export const useRecordShowPagePagination = (
const cursorFromRequest = currentRecordsPageInfo?.endCursor;
const {
loading: loadingRecordBefore,
records: recordsBefore,
totalCount: totalCountBefore,
} = useFindManyRecords({
skip: loadingCursor,
fetchPolicy: 'network-only',
filter,
orderBy,
cursorFilter: isNonEmptyString(cursorFromRequest)
? {
cursorDirection: 'before',
cursor: cursorFromRequest,
limit: 1,
}
: undefined,
objectNameSingular,
recordGqlFields,
});
const [totalCount, setTotalCount] = useState<number>(0);
const {
loading: loadingRecordAfter,
records: recordsAfter,
totalCount: totalCountAfter,
} = useFindManyRecords({
skip: loadingCursor,
filter,
fetchPolicy: 'network-only',
orderBy,
cursorFilter: cursorFromRequest
? {
cursorDirection: 'after',
cursor: cursorFromRequest,
limit: 1,
}
: undefined,
objectNameSingular,
recordGqlFields,
});
const { loading: loadingRecordBefore, records: recordsBefore } =
useFindManyRecords({
skip: loadingCursor,
fetchPolicy: 'network-only',
filter,
orderBy,
cursorFilter: isNonEmptyString(cursorFromRequest)
? {
cursorDirection: 'before',
cursor: cursorFromRequest,
limit: 1,
}
: undefined,
objectNameSingular,
recordGqlFields,
onCompleted: (_, pagination) => {
setTotalCount(pagination?.totalCount ?? 0);
},
});
const [totalCount, setTotalCount] = useState(
Math.max(totalCountBefore ?? 0, totalCountAfter ?? 0),
);
useEffect(() => {
if (totalCountBefore !== undefined || totalCountAfter !== undefined) {
setTotalCount(Math.max(totalCountBefore ?? 0, totalCountAfter ?? 0));
}
}, [totalCountBefore, totalCountAfter]);
const { loading: loadingRecordAfter, records: recordsAfter } =
useFindManyRecords({
skip: loadingCursor,
filter,
fetchPolicy: 'network-only',
orderBy,
cursorFilter: cursorFromRequest
? {
cursorDirection: 'after',
cursor: cursorFromRequest,
limit: 1,
}
: undefined,
objectNameSingular,
recordGqlFields,
onCompleted: (_, pagination) => {
setTotalCount(pagination?.totalCount ?? 0);
},
});
const loading = loadingRecordAfter || loadingRecordBefore || loadingCursor;