twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2024-12-24 04:23:57 +03:00
Code Issues Packages Projects Releases Wiki Activity

2973-feat: Skeleton Loading Added (#2988)

Browse Source 
* 2973-feat: Skeleton Loading Added

* loading from useQuery

* PR suggestions fixed

* Fix accoding to review

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Kanav Arora 2023-12-20 14:37:16 +05:30 committed by GitHub
parent c09b98cdc9
commit d2666dc667
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 69 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

113
packages/twenty-front/src/modules/object-record/components/RecordShowPage.tsx
View File

@ -55,7 +55,7 @@ export const RecordShowPage = () => {
entityFieldsFamilyState(objectRecordId ?? ''),
);
const { record } = useFindOneRecord({
const { record, loading } = useFindOneRecord({
objectRecordId,
objectNameSingular,
onCompleted: (data) => {
@ -129,12 +129,10 @@ export const RecordShowPage = () => {
}
};
if (!record) return <></>;
const pageName =
objectNameSingular === 'person'
? record.name.firstName + ' ' + record.name.lastName
: record.name;
? record?.name.firstName + ' ' + record?.name.lastName
: record?.name;
const recordIdentifiers = identifiersMapper?.(
record,
@ -161,9 +159,12 @@ export const RecordShowPage = () => {
if (!updateOneRecord) {
return;
}
if (!record) {
return;
}
await updateOneRecord({
idToUpdate: record?.id,
idToUpdate: record.id,
input: {
avatarUrl,
},
@ -178,7 +179,7 @@ export const RecordShowPage = () => {
hasBackButton
Icon={IconBuildingSkyscraper}
>
{objectMetadataType !== 'Custom' && (
{record && objectMetadataType !== 'Custom' && (
<>
<PageFavoriteButton
isFavorite={isFavorite}
@ -198,51 +199,59 @@ export const RecordShowPage = () => {
<RecoilScope CustomRecoilScopeContext={ShowPageRecoilScopeContext}>
<ShowPageContainer>
<ShowPageLeftContainer>
<ShowPageSummaryCard
id={record.id}
logoOrAvatar={recordIdentifiers?.avatarUrl}
title={recordIdentifiers?.name ?? 'No name'}
date={record.createdAt ?? ''}
renderTitleEditComponent={() => <></>}
avatarType={recordIdentifiers?.avatarType ?? 'rounded'}
onUploadPicture={
objectNameSingular === 'person' ? onUploadPicture : undefined
}
/>
<PropertyBox extraPadding={true}>
{objectMetadataItem &&
[...objectMetadataItem.fields]
.sort((a, b) =>
a.name === 'name' ? -1 : a.name.localeCompare(b.name),
)
.filter(isFieldMetadataItemAvailable)
.map((metadataField, index) => {
return (
<FieldContext.Provider
key={record.id + metadataField.id}
value={{
entityId: record.id,
recoilScopeId: record.id + metadataField.id,
isLabelIdentifier: false,
fieldDefinition:
formatFieldMetadataItemAsColumnDefinition({
field: metadataField,
position: index,
objectMetadataItem,
}),
useUpdateEntityMutation:
useUpdateOneObjectRecordMutation,
hotkeyScope: InlineCellHotkeyScope.InlineCell,
}}
>
<RecordInlineCell />
</FieldContext.Provider>
);
})}
</PropertyBox>
{objectNameSingular === 'company' ? (
{!loading && record ? (
<>
<CompanyTeam company={record} />
<ShowPageSummaryCard
id={record.id}
logoOrAvatar={recordIdentifiers?.avatarUrl}
title={recordIdentifiers?.name ?? 'No name'}
date={record.createdAt ?? ''}
renderTitleEditComponent={() => <></>}
avatarType={recordIdentifiers?.avatarType ?? 'rounded'}
onUploadPicture={
objectNameSingular === 'person'
? onUploadPicture
: undefined
}
/>
<PropertyBox extraPadding={true}>
{objectMetadataItem &&
[...objectMetadataItem.fields]
.sort((a, b) =>
a.name === 'name' ? -1 : a.name.localeCompare(b.name),
)
.filter(isFieldMetadataItemAvailable)
.map((metadataField, index) => {
return (
<FieldContext.Provider
key={record.id + metadataField.id}
value={{
entityId: record.id,
recoilScopeId: record.id + metadataField.id,
isLabelIdentifier: false,
fieldDefinition:
formatFieldMetadataItemAsColumnDefinition({
field: metadataField,
position: index,
objectMetadataItem,
}),
useUpdateEntityMutation:
useUpdateOneObjectRecordMutation,
hotkeyScope: InlineCellHotkeyScope.InlineCell,
}}
>
<RecordInlineCell />
</FieldContext.Provider>
);
})}
</PropertyBox>
{objectNameSingular === 'company' ? (
<>
<CompanyTeam company={record} />
</>
) : (
<></>
)}
</>
) : (
<></>
@ -250,7 +259,7 @@ export const RecordShowPage = () => {
</ShowPageLeftContainer>
<ShowPageRightContainer
entity={{
id: record.id,
id: record?.id || '',
// TODO: refacto
type:
objectMetadataItem?.nameSingular === 'company'

2
packages/twenty-front/src/modules/ui/layout/page/ShowPageContainer.tsx
View File

@ -25,7 +25,7 @@ const StyledScrollWrapper = styled(ScrollWrapper)`
`;
export type ShowPageContainerProps = {
children: ReactElement[];
children: ReactElement[] | ReactElement;
};
export const ShowPageContainer = ({ children }: ShowPageContainerProps) => {

2
packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageLeftContainer.tsx
View File

@ -38,7 +38,7 @@ const StyledIntermediateContainer = styled.div`
`;
export type ShowPageLeftContainerProps = {
children: ReactElement[];
children: ReactElement;
};
export const ShowPageLeftContainer = ({

12
packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx
View File

@ -40,7 +40,7 @@ const StyledTabListContainer = styled.div`
`;
type ShowPageRightContainerProps = {
entity: ActivityTargetableEntity;
entity?: ActivityTargetableEntity;
timeline?: boolean;
tasks?: boolean;
notes?: boolean;
@ -55,7 +55,12 @@ export const ShowPageRightContainer = ({
emails,
}: ShowPageRightContainerProps) => {
const isMessagingEnabled = useIsFeatureEnabled('IS_MESSAGING_ENABLED');
const [activeTabId] = useRecoilScopedState(
activeTabIdScopedState,
ShowPageRecoilScopeContext,
);
if (!entity) return <></>;
const TASK_TABS = [
{
id: 'timeline',
@ -94,11 +99,6 @@ export const ShowPageRightContainer = ({
},
];
const [activeTabId] = useRecoilScopedState(
activeTabIdScopedState,
ShowPageRecoilScopeContext,
);
return (
<StyledShowPageRightContainer>
<StyledTabListContainer>