Fix create task (#7498)

Fixing issue introduced by [Add Skeleton loading for side
panel](https://github.com/twentyhq/twenty/pull/7394/files#top):

https://github.com/user-attachments/assets/6c8e299c-d663-4aa7-83ed-ca7041cd15e7
This commit is contained in:
Marie
2024-10-08 16:20:34 +02:00
committed by GitHub
parent e042711f34
commit be171e84d7
4 changed files with 23 additions and 11 deletions

View File

@@ -67,8 +67,8 @@ export const useOpenCreateActivityDrawer = ({
targetableObjects: ActivityTargetableObject[]; targetableObjects: ActivityTargetableObject[];
customAssignee?: WorkspaceMember; customAssignee?: WorkspaceMember;
}) => { }) => {
openRightDrawer(RightDrawerPages.ViewRecord);
setIsNewViewableRecordLoading(true); setIsNewViewableRecordLoading(true);
openRightDrawer(RightDrawerPages.ViewRecord);
setViewableRecordId(null); setViewableRecordId(null);
setViewableRecordNameSingular(activityObjectNameSingular); setViewableRecordNameSingular(activityObjectNameSingular);

View File

@@ -1,5 +1,6 @@
import { useRecoilValue } from 'recoil'; import { useRecoilValue } from 'recoil';
import { isNewViewableRecordLoadingState } from '@/object-record/record-right-drawer/states/isNewViewableRecordLoading';
import { viewableRecordIdState } from '@/object-record/record-right-drawer/states/viewableRecordIdState'; import { viewableRecordIdState } from '@/object-record/record-right-drawer/states/viewableRecordIdState';
import { viewableRecordNameSingularState } from '@/object-record/record-right-drawer/states/viewableRecordNameSingularState'; import { viewableRecordNameSingularState } from '@/object-record/record-right-drawer/states/viewableRecordNameSingularState';
import { RecordShowContainer } from '@/object-record/record-show/components/RecordShowContainer'; import { RecordShowContainer } from '@/object-record/record-show/components/RecordShowContainer';
@@ -18,7 +19,19 @@ export const RightDrawerRecord = () => {
const viewableRecordNameSingular = useRecoilValue( const viewableRecordNameSingular = useRecoilValue(
viewableRecordNameSingularState, viewableRecordNameSingularState,
); );
const isNewViewableRecordLoading = useRecoilValue(
isNewViewableRecordLoadingState,
);
const viewableRecordId = useRecoilValue(viewableRecordIdState); const viewableRecordId = useRecoilValue(viewableRecordIdState);
if (!viewableRecordNameSingular && !isNewViewableRecordLoading) {
throw new Error(`Object name is not defined`);
}
if (!viewableRecordId && !isNewViewableRecordLoading) {
throw new Error(`Record id is not defined`);
}
const { objectNameSingular, objectRecordId } = useRecordShowPage( const { objectNameSingular, objectRecordId } = useRecordShowPage(
viewableRecordNameSingular ?? '', viewableRecordNameSingular ?? '',
viewableRecordId ?? '', viewableRecordId ?? '',
@@ -27,12 +40,15 @@ export const RightDrawerRecord = () => {
return ( return (
<StyledRightDrawerRecord> <StyledRightDrawerRecord>
<RecordFieldValueSelectorContextProvider> <RecordFieldValueSelectorContextProvider>
<RecordValueSetterEffect recordId={objectRecordId} /> {!isNewViewableRecordLoading && (
<RecordValueSetterEffect recordId={objectRecordId} />
)}
<RecordShowContainer <RecordShowContainer
objectNameSingular={objectNameSingular} objectNameSingular={objectNameSingular}
objectRecordId={objectRecordId} objectRecordId={objectRecordId}
loading={false} loading={false}
isInRightDrawer={true} isInRightDrawer={true}
isNewRightDrawerItemLoading={isNewViewableRecordLoading}
/> />
</RecordFieldValueSelectorContextProvider> </RecordFieldValueSelectorContextProvider>
</StyledRightDrawerRecord> </StyledRightDrawerRecord>

View File

@@ -21,7 +21,6 @@ import { RecordInlineCell } from '@/object-record/record-inline-cell/components/
import { PropertyBox } from '@/object-record/record-inline-cell/property-box/components/PropertyBox'; import { PropertyBox } from '@/object-record/record-inline-cell/property-box/components/PropertyBox';
import { PropertyBoxSkeletonLoader } from '@/object-record/record-inline-cell/property-box/components/PropertyBoxSkeletonLoader'; import { PropertyBoxSkeletonLoader } from '@/object-record/record-inline-cell/property-box/components/PropertyBoxSkeletonLoader';
import { InlineCellHotkeyScope } from '@/object-record/record-inline-cell/types/InlineCellHotkeyScope'; import { InlineCellHotkeyScope } from '@/object-record/record-inline-cell/types/InlineCellHotkeyScope';
import { isNewViewableRecordLoadingState } from '@/object-record/record-right-drawer/states/isNewViewableRecordLoading';
import { RecordDetailDuplicatesSection } from '@/object-record/record-show/record-detail-section/components/RecordDetailDuplicatesSection'; import { RecordDetailDuplicatesSection } from '@/object-record/record-show/record-detail-section/components/RecordDetailDuplicatesSection';
import { RecordDetailRelationSection } from '@/object-record/record-show/record-detail-section/components/RecordDetailRelationSection'; import { RecordDetailRelationSection } from '@/object-record/record-show/record-detail-section/components/RecordDetailRelationSection';
import { recordLoadingFamilyState } from '@/object-record/record-store/states/recordLoadingFamilyState'; import { recordLoadingFamilyState } from '@/object-record/record-store/states/recordLoadingFamilyState';
@@ -49,6 +48,7 @@ type RecordShowContainerProps = {
objectRecordId: string; objectRecordId: string;
loading: boolean; loading: boolean;
isInRightDrawer?: boolean; isInRightDrawer?: boolean;
isNewRightDrawerItemLoading?: boolean;
}; };
export const RecordShowContainer = ({ export const RecordShowContainer = ({
@@ -56,6 +56,7 @@ export const RecordShowContainer = ({
objectRecordId, objectRecordId,
loading, loading,
isInRightDrawer = false, isInRightDrawer = false,
isNewRightDrawerItemLoading = false,
}: RecordShowContainerProps) => { }: RecordShowContainerProps) => {
const { objectMetadataItem } = useObjectMetadataItem({ const { objectMetadataItem } = useObjectMetadataItem({
objectNameSingular, objectNameSingular,
@@ -82,9 +83,6 @@ export const RecordShowContainer = ({
recordId: objectRecordId, recordId: objectRecordId,
}), }),
); );
const isNewViewableRecordLoading = useRecoilValue(
isNewViewableRecordLoadingState,
);
const [uploadImage] = useUploadImageMutation(); const [uploadImage] = useUploadImageMutation();
const { updateOneRecord } = useUpdateOneRecord({ objectNameSingular }); const { updateOneRecord } = useUpdateOneRecord({ objectNameSingular });
@@ -166,8 +164,6 @@ export const RecordShowContainer = ({
const isReadOnly = objectMetadataItem.isRemote; const isReadOnly = objectMetadataItem.isRemote;
const isMobile = useIsMobile() || isInRightDrawer; const isMobile = useIsMobile() || isInRightDrawer;
const isPrefetchLoading = useIsPrefetchLoading(); const isPrefetchLoading = useIsPrefetchLoading();
const isNewRightDrawerItemLoading =
isInRightDrawer && isNewViewableRecordLoading;
const summaryCard = const summaryCard =
!isNewRightDrawerItemLoading && isDefined(recordFromStore) ? ( !isNewRightDrawerItemLoading && isDefined(recordFromStore) ? (

View File

@@ -23,10 +23,10 @@ export const useRecordShowPage = (
objectRecordId: paramObjectRecordId, objectRecordId: paramObjectRecordId,
} = useParams(); } = useParams();
const objectNameSingular = propsObjectNameSingular || paramObjectNameSingular; const objectNameSingular = propsObjectNameSingular ?? paramObjectNameSingular;
const objectRecordId = propsObjectRecordId || paramObjectRecordId; const objectRecordId = propsObjectRecordId ?? paramObjectRecordId;
if (!objectNameSingular || !objectRecordId) { if (!isDefined(objectNameSingular) || !isDefined(objectRecordId)) {
throw new Error('Object name or Record id is not defined'); throw new Error('Object name or Record id is not defined');
} }