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

Show Data Skeleton Loading (#5328)

Browse Source 
### Description

Show Data Skeleton loading

### Refs

#4460

### Demo

Figma:
https://www.figma.com/file/xt8O9mFeLl46C5InWwoMrN/Twenty?type=design&node-id=25429-70096&mode=design&t=VRxtgYCKnJkl2zpt-0

https://jam.dev/c/178878cb-e600-4370-94d5-c8c12c8fe0d5

Fixes #4460

---------

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Matheus <matheus_benini@hotmail.com>
This commit is contained in:
gitstart-twenty
2024-05-14 10:58:30 +01:00
committed by GitHub
parent de438b0171
commit 1bc9b780e5
9 changed files with 259 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
packages/twenty-front/src/modules/activities/timeline/components/Timeline.tsx
View File

@ -1,3 +1,5 @@
import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { useRecoilValue } from 'recoil'; import { useRecoilValue } from 'recoil';
@ -27,15 +29,84 @@ const StyledMainContainer = styled.div`
justify-content: center; justify-content: center;
`; `;
const StyledSkeletonContainer = styled.div`
align-items: center;
width: 100%;
padding: ${({ theme }) => theme.spacing(8)};
display: flex;
flex-direction: column;
gap: ${({ theme }) => theme.spacing(4)};
flex-wrap: wrap;
align-content: flex-start;
`;
const StyledSkeletonSubSection = styled.div`
display: flex;
gap: ${({ theme }) => theme.spacing(4)};
`;
const StyledSkeletonColumn = styled.div`
display: flex;
flex-direction: column;
gap: ${({ theme }) => theme.spacing(3)};
justify-content: center;
`;
const StyledSkeletonLoader = () => {
const theme = useTheme();
return (
<SkeletonTheme
baseColor={theme.background.tertiary}
highlightColor={theme.background.transparent.lighter}
borderRadius={80}
>
<Skeleton width={24} height={84} />
</SkeletonTheme>
);
};
const StyledTimelineSkeletonLoader = () => {
const theme = useTheme();
const skeletonItems = Array.from({ length: 3 }).map((_, index) => ({
id: `skeleton-item-${index}`,
}));
return (
<SkeletonTheme
baseColor={theme.background.tertiary}
highlightColor={theme.background.transparent.lighter}
borderRadius={4}
>
<StyledSkeletonContainer>
<Skeleton width={440} height={16} />
{skeletonItems.map(({ id }) => (
<StyledSkeletonSubSection key={id}>
<StyledSkeletonLoader />
<StyledSkeletonColumn>
<Skeleton width={400} height={24} />
<Skeleton width={400} height={24} />
</StyledSkeletonColumn>
</StyledSkeletonSubSection>
))}
</StyledSkeletonContainer>
</SkeletonTheme>
);
};
export const Timeline = ({ export const Timeline = ({
targetableObject, targetableObject,
loading,
}: { }: {
targetableObject: ActivityTargetableObject; targetableObject: ActivityTargetableObject;
loading?: boolean;
}) => { }) => {
const timelineActivitiesForGroup = useRecoilValue( const timelineActivitiesForGroup = useRecoilValue(
timelineActivitiesForGroupState, timelineActivitiesForGroupState,
); );
if (loading === true) {
return <StyledTimelineSkeletonLoader />;
}
if (timelineActivitiesForGroup.length === 0) { if (timelineActivitiesForGroup.length === 0) {
return ( return (
<AnimatedPlaceholderEmptyContainer> <AnimatedPlaceholderEmptyContainer>

7
packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCell.tsx
View File

@ -17,9 +17,13 @@ import { RecordInlineCellContainer } from './RecordInlineCellContainer';
type RecordInlineCellProps = { type RecordInlineCellProps = {
readonly?: boolean; readonly?: boolean;
loading?: boolean;
}; };
export const RecordInlineCell = ({ readonly }: RecordInlineCellProps) => { export const RecordInlineCell = ({
readonly,
loading,
}: RecordInlineCellProps) => {
const { fieldDefinition, entityId } = useContext(FieldContext); const { fieldDefinition, entityId } = useContext(FieldContext);
const buttonIcon = useGetButtonIcon(); const buttonIcon = useGetButtonIcon();
@ -99,6 +103,7 @@ export const RecordInlineCell = ({ readonly }: RecordInlineCellProps) => {
isDisplayModeContentEmpty={isFieldEmpty} isDisplayModeContentEmpty={isFieldEmpty}
isDisplayModeFixHeight isDisplayModeFixHeight
editModeContentOnly={isFieldInputOnly} editModeContentOnly={isFieldInputOnly}
loading={loading}
/> />
); );
}; };

91
packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx
View File

@ -1,4 +1,5 @@
import React, { useContext, useEffect, useRef, useState } from 'react'; import React, { useContext, useEffect, useRef, useState } from 'react';
import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
import { Tooltip } from 'react-tooltip'; import { Tooltip } from 'react-tooltip';
import { css, useTheme } from '@emotion/react'; import { css, useTheme } from '@emotion/react';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
@ -82,6 +83,25 @@ const StyledTooltip = styled(Tooltip)`
padding: ${({ theme }) => theme.spacing(2)}; padding: ${({ theme }) => theme.spacing(2)};
`; `;
const StyledSkeletonDiv = styled.div`
height: 24px;
`;
const StyledInlineCellSkeletonLoader = () => {
const theme = useTheme();
return (
<SkeletonTheme
baseColor={theme.background.tertiary}
highlightColor={theme.background.transparent.lighter}
borderRadius={4}
>
<StyledSkeletonDiv>
<Skeleton width={154} height={16} />
</StyledSkeletonDiv>
</SkeletonTheme>
);
};
type RecordInlineCellContainerProps = { type RecordInlineCellContainerProps = {
readonly?: boolean; readonly?: boolean;
IconLabel?: IconComponent; IconLabel?: IconComponent;
@ -96,6 +116,7 @@ type RecordInlineCellContainerProps = {
isDisplayModeContentEmpty?: boolean; isDisplayModeContentEmpty?: boolean;
isDisplayModeFixHeight?: boolean; isDisplayModeFixHeight?: boolean;
disableHoverEffect?: boolean; disableHoverEffect?: boolean;
loading?: boolean;
}; };
export const RecordInlineCellContainer = ({ export const RecordInlineCellContainer = ({
@ -112,6 +133,7 @@ export const RecordInlineCellContainer = ({
editModeContentOnly, editModeContentOnly,
isDisplayModeFixHeight, isDisplayModeFixHeight,
disableHoverEffect, disableHoverEffect,
loading = false,
}: RecordInlineCellContainerProps) => { }: RecordInlineCellContainerProps) => {
const { entityId, fieldDefinition } = useContext(FieldContext); const { entityId, fieldDefinition } = useContext(FieldContext);
const reference = useRef<HTMLDivElement>(null); const reference = useRef<HTMLDivElement>(null);
@ -163,6 +185,43 @@ export const RecordInlineCellContainer = ({
} }
}, [isHoveredForDisplayMode, displayModeContent, reference]); }, [isHoveredForDisplayMode, displayModeContent, reference]);
const showContent = () => {
if (loading) {
return <StyledInlineCellSkeletonLoader />;
}
return !readonly && isInlineCellInEditMode ? (
<RecordInlineCellEditMode>{editModeContent}</RecordInlineCellEditMode>
) : editModeContentOnly ? (
<StyledClickableContainer readonly={readonly}>
<RecordInlineCellDisplayMode
disableHoverEffect={disableHoverEffect}
isDisplayModeContentEmpty={isDisplayModeContentEmpty}
isDisplayModeFixHeight={isDisplayModeFixHeight}
isHovered={isHovered}
emptyPlaceholder={showLabel ? 'Empty' : label}
>
{editModeContent}
</RecordInlineCellDisplayMode>
</StyledClickableContainer>
) : (
<StyledClickableContainer
readonly={readonly}
onClick={handleDisplayModeClick}
>
<RecordInlineCellDisplayMode
disableHoverEffect={disableHoverEffect}
isDisplayModeContentEmpty={isDisplayModeContentEmpty}
isDisplayModeFixHeight={isDisplayModeFixHeight}
isHovered={isHovered}
emptyPlaceholder={showLabel ? 'Empty' : label}
>
{newDisplayModeContent}
</RecordInlineCellDisplayMode>
{showEditButton && <RecordInlineCellButton Icon={buttonIcon} />}
</StyledClickableContainer>
);
};
return ( return (
<StyledInlineCellBaseContainer <StyledInlineCellBaseContainer
onMouseEnter={handleContainerMouseEnter} onMouseEnter={handleContainerMouseEnter}
@ -194,37 +253,7 @@ export const RecordInlineCellContainer = ({
</StyledLabelAndIconContainer> </StyledLabelAndIconContainer>
)} )}
<StyledValueContainer ref={reference}> <StyledValueContainer ref={reference}>
{!readonly && isInlineCellInEditMode ? ( {showContent()}
<RecordInlineCellEditMode>{editModeContent}</RecordInlineCellEditMode>
) : editModeContentOnly ? (
<StyledClickableContainer readonly={readonly}>
<RecordInlineCellDisplayMode
disableHoverEffect={disableHoverEffect}
isDisplayModeContentEmpty={isDisplayModeContentEmpty}
isDisplayModeFixHeight={isDisplayModeFixHeight}
isHovered={isHovered}
emptyPlaceholder={showLabel ? 'Empty' : label}
>
{editModeContent}
</RecordInlineCellDisplayMode>
</StyledClickableContainer>
) : (
<StyledClickableContainer
readonly={readonly}
onClick={handleDisplayModeClick}
>
<RecordInlineCellDisplayMode
disableHoverEffect={disableHoverEffect}
isDisplayModeContentEmpty={isDisplayModeContentEmpty}
isDisplayModeFixHeight={isDisplayModeFixHeight}
isHovered={isHovered}
emptyPlaceholder={showLabel ? 'Empty' : label}
>
{newDisplayModeContent}
</RecordInlineCellDisplayMode>
{showEditButton && <RecordInlineCellButton Icon={buttonIcon} />}
</StyledClickableContainer>
)}
</StyledValueContainer> </StyledValueContainer>
</StyledInlineCellBaseContainer> </StyledInlineCellBaseContainer>
); );

15
packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainer.tsx
View File

@ -36,11 +36,13 @@ import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
type RecordShowContainerProps = { type RecordShowContainerProps = {
objectNameSingular: string; objectNameSingular: string;
objectRecordId: string; objectRecordId: string;
loading: boolean;
}; };
export const RecordShowContainer = ({ export const RecordShowContainer = ({
objectNameSingular, objectNameSingular,
objectRecordId, objectRecordId,
loading,
}: RecordShowContainerProps) => { }: RecordShowContainerProps) => {
const { objectMetadataItem } = useObjectMetadataItem({ const { objectMetadataItem } = useObjectMetadataItem({
objectNameSingular, objectNameSingular,
@ -130,13 +132,14 @@ export const RecordShowContainer = ({
<RecoilScope CustomRecoilScopeContext={ShowPageRecoilScopeContext}> <RecoilScope CustomRecoilScopeContext={ShowPageRecoilScopeContext}>
<ShowPageContainer> <ShowPageContainer>
<ShowPageLeftContainer> <ShowPageLeftContainer>
{!recordLoading && isDefined(recordFromStore) && ( {isDefined(recordFromStore) && (
<> <>
<ShowPageSummaryCard <ShowPageSummaryCard
id={objectRecordId} id={objectRecordId}
logoOrAvatar={recordIdentifier?.avatarUrl ?? ''} logoOrAvatar={recordIdentifier?.avatarUrl ?? ''}
avatarPlaceholder={recordIdentifier?.name ?? ''} avatarPlaceholder={recordIdentifier?.name ?? ''}
date={recordFromStore.createdAt ?? ''} date={recordFromStore.createdAt ?? ''}
loading={loading || recordLoading}
title={ title={
<FieldContext.Provider <FieldContext.Provider
value={{ value={{
@ -193,7 +196,10 @@ export const RecordShowContainer = ({
hotkeyScope: InlineCellHotkeyScope.InlineCell, hotkeyScope: InlineCellHotkeyScope.InlineCell,
}} }}
> >
<RecordInlineCell readonly={isReadOnly} /> <RecordInlineCell
loading={loading || recordLoading}
readonly={isReadOnly}
/>
</FieldContext.Provider> </FieldContext.Provider>
))} ))}
</PropertyBox> </PropertyBox>
@ -217,7 +223,9 @@ export const RecordShowContainer = ({
hotkeyScope: InlineCellHotkeyScope.InlineCell, hotkeyScope: InlineCellHotkeyScope.InlineCell,
}} }}
> >
<RecordDetailRelationSection /> <RecordDetailRelationSection
loading={loading || recordLoading}
/>
</FieldContext.Provider> </FieldContext.Provider>
))} ))}
</> </>
@ -233,6 +241,7 @@ export const RecordShowContainer = ({
tasks tasks
notes notes
emails emails
loading={loading || recordLoading}
/> />
) : ( ) : (
<></> <></>

51
packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationSection.tsx
View File

@ -1,4 +1,6 @@
import { useCallback, useContext } from 'react'; import { useCallback, useContext } from 'react';
import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import qs from 'qs'; import qs from 'qs';
import { useRecoilValue } from 'recoil'; import { useRecoilValue } from 'recoil';
@ -27,11 +29,36 @@ import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
import { FilterQueryParams } from '@/views/hooks/internal/useViewFromQueryParams'; import { FilterQueryParams } from '@/views/hooks/internal/useViewFromQueryParams';
import { ViewFilterOperand } from '@/views/types/ViewFilterOperand'; import { ViewFilterOperand } from '@/views/types/ViewFilterOperand';
type RecordDetailRelationSectionProps = {
loading: boolean;
};
const StyledAddDropdown = styled(Dropdown)` const StyledAddDropdown = styled(Dropdown)`
margin-left: auto; margin-left: auto;
`; `;
export const RecordDetailRelationSection = () => { const StyledSkeletonDiv = styled.div`
height: 40px;
`;
const StyledRecordDetailRelationSectionSkeletonLoader = () => {
const theme = useTheme();
return (
<SkeletonTheme
baseColor={theme.background.tertiary}
highlightColor={theme.background.transparent.lighter}
borderRadius={4}
>
<StyledSkeletonDiv>
<Skeleton width={129} height={16} />
</StyledSkeletonDiv>
</SkeletonTheme>
);
};
export const RecordDetailRelationSection = ({
loading,
}: RecordDetailRelationSectionProps) => {
const { entityId, fieldDefinition } = useContext(FieldContext); const { entityId, fieldDefinition } = useContext(FieldContext);
const { const {
fieldName, fieldName,
@ -113,6 +140,20 @@ export const RecordDetailRelationSection = () => {
relationObjectMetadataItem.namePlural relationObjectMetadataItem.namePlural
}?${qs.stringify(filterQueryParams)}`; }?${qs.stringify(filterQueryParams)}`;
const showContent = () => {
if (loading) {
return <StyledRecordDetailRelationSectionSkeletonLoader />;
}
return relationRecords.length ? (
<RecordDetailRelationRecordsList relationRecords={relationRecords} />
) : (
<RecordDetailRelationRecordsListEmptyState
relationObjectMetadataItem={relationObjectMetadataItem}
/>
);
};
return ( return (
<RecordDetailSection> <RecordDetailSection>
<RecordDetailSectionHeader <RecordDetailSectionHeader
@ -159,13 +200,7 @@ export const RecordDetailRelationSection = () => {
</DropdownScope> </DropdownScope>
} }
/> />
{relationRecords.length ? ( {showContent()}
<RecordDetailRelationRecordsList relationRecords={relationRecords} />
) : (
<RecordDetailRelationRecordsListEmptyState
relationObjectMetadataItem={relationObjectMetadataItem}
/>
)}
</RecordDetailSection> </RecordDetailSection>
); );
}; };

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

@ -53,6 +53,7 @@ type ShowPageRightContainerProps = {
tasks?: boolean; tasks?: boolean;
notes?: boolean; notes?: boolean;
emails?: boolean; emails?: boolean;
loading?: boolean;
}; };
export const ShowPageRightContainer = ({ export const ShowPageRightContainer = ({
@ -61,6 +62,7 @@ export const ShowPageRightContainer = ({
tasks, tasks,
notes, notes,
emails, emails,
loading,
}: ShowPageRightContainerProps) => { }: ShowPageRightContainerProps) => {
const { activeTabIdState } = useTabList(TAB_LIST_COMPONENT_ID); const { activeTabIdState } = useTabList(TAB_LIST_COMPONENT_ID);
const activeTabId = useRecoilValue(activeTabIdState); const activeTabId = useRecoilValue(activeTabIdState);
@ -127,12 +129,16 @@ export const ShowPageRightContainer = ({
return ( return (
<StyledShowPageRightContainer> <StyledShowPageRightContainer>
<StyledTabListContainer> <StyledTabListContainer>
<TabList tabListId={TAB_LIST_COMPONENT_ID} tabs={TASK_TABS} /> <TabList
loading={loading}
tabListId={TAB_LIST_COMPONENT_ID}
tabs={TASK_TABS}
/>
</StyledTabListContainer> </StyledTabListContainer>
{activeTabId === 'timeline' && ( {activeTabId === 'timeline' && (
<> <>
<TimelineQueryEffect targetableObject={targetableObject} /> <TimelineQueryEffect targetableObject={targetableObject} />
<Timeline targetableObject={targetableObject} /> <Timeline loading={loading} targetableObject={targetableObject} />
</> </>
)} )}
{activeTabId === 'tasks' && ( {activeTabId === 'tasks' && (

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

@ -1,5 +1,7 @@
import { ChangeEvent, ReactNode, useRef } from 'react'; import { ChangeEvent, ReactNode, useRef } from 'react';
import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
import { Tooltip } from 'react-tooltip'; import { Tooltip } from 'react-tooltip';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { Avatar, AvatarType } from 'twenty-ui'; import { Avatar, AvatarType } from 'twenty-ui';
import { v4 as uuidV4 } from 'uuid'; import { v4 as uuidV4 } from 'uuid';
@ -18,9 +20,10 @@ type ShowPageSummaryCardProps = {
logoOrAvatar?: string; logoOrAvatar?: string;
onUploadPicture?: (file: File) => void; onUploadPicture?: (file: File) => void;
title: ReactNode; title: ReactNode;
loading: boolean;
}; };
const StyledShowPageSummaryCard = styled.div` export const StyledShowPageSummaryCard = styled.div`
align-items: center; align-items: center;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -28,6 +31,7 @@ const StyledShowPageSummaryCard = styled.div`
justify-content: center; justify-content: center;
padding: ${({ theme }) => theme.spacing(4)}; padding: ${({ theme }) => theme.spacing(4)};
border-bottom: 1px solid ${({ theme }) => theme.border.color.light}; border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
height: 127px;
`; `;
const StyledInfoContainer = styled.div` const StyledInfoContainer = styled.div`
@ -70,6 +74,30 @@ const StyledFileInput = styled.input`
display: none; display: none;
`; `;
const StyledSubSkeleton = styled.div`
align-items: center;
display: flex;
height: 37px;
justify-content: center;
width: 108px;
`;
const StyledShowPageSummaryCardSkeletonLoader = () => {
const theme = useTheme();
return (
<SkeletonTheme
baseColor={theme.background.tertiary}
highlightColor={theme.background.transparent.lighter}
borderRadius={4}
>
<Skeleton width={40} height={40} />
<StyledSubSkeleton>
<Skeleton width={96} height={16} />
</StyledSubSkeleton>
</SkeletonTheme>
);
};
export const ShowPageSummaryCard = ({ export const ShowPageSummaryCard = ({
avatarPlaceholder, avatarPlaceholder,
avatarType, avatarType,
@ -78,6 +106,7 @@ export const ShowPageSummaryCard = ({
logoOrAvatar, logoOrAvatar,
onUploadPicture, onUploadPicture,
title, title,
loading,
}: ShowPageSummaryCardProps) => { }: ShowPageSummaryCardProps) => {
const beautifiedCreatedAt = const beautifiedCreatedAt =
date !== '' ? beautifyPastDateRelativeToNow(date) : ''; date !== '' ? beautifyPastDateRelativeToNow(date) : '';
@ -93,6 +122,13 @@ export const ShowPageSummaryCard = ({
inputFileRef?.current?.click?.(); inputFileRef?.current?.click?.();
}; };
if (loading)
return (
<StyledShowPageSummaryCard>
<StyledShowPageSummaryCardSkeletonLoader />
</StyledShowPageSummaryCard>
);
return ( return (
<StyledShowPageSummaryCard> <StyledShowPageSummaryCard>
<StyledAvatarWrapper> <StyledAvatarWrapper>

5
packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx
View File

@ -21,6 +21,7 @@ type SingleTabProps = {
type TabListProps = { type TabListProps = {
tabListId: string; tabListId: string;
tabs: SingleTabProps[]; tabs: SingleTabProps[];
loading?: boolean;
}; };
const StyledContainer = styled.div` const StyledContainer = styled.div`
@ -33,7 +34,7 @@ const StyledContainer = styled.div`
user-select: none; user-select: none;
`; `;
export const TabList = ({ tabs, tabListId }: TabListProps) => { export const TabList = ({ tabs, tabListId, loading }: TabListProps) => {
const initialActiveTabId = tabs[0].id; const initialActiveTabId = tabs[0].id;
const { activeTabIdState, setActiveTabId } = useTabList(tabListId); const { activeTabIdState, setActiveTabId } = useTabList(tabListId);
@ -60,7 +61,7 @@ export const TabList = ({ tabs, tabListId }: TabListProps) => {
onClick={() => { onClick={() => {
setActiveTabId(tab.id); setActiveTabId(tab.id);
}} }}
disabled={tab.disabled} disabled={tab.disabled ?? loading}
hasBetaPill={tab.hasBetaPill} hasBetaPill={tab.hasBetaPill}
/> />
))} ))}

39
packages/twenty-front/src/pages/object-record/RecordShowPage.tsx
View File

@ -110,31 +110,30 @@ export const RecordShowPage = () => {
Icon={headerIcon} Icon={headerIcon}
loading={loading} loading={loading}
> >
{record && ( <>
<> <PageFavoriteButton
<PageFavoriteButton isFavorite={isFavorite}
isFavorite={isFavorite} onClick={handleFavoriteButtonClick}
onClick={handleFavoriteButtonClick} />
/> <ShowPageAddButton
<ShowPageAddButton key="add"
key="add" activityTargetObject={{
activityTargetObject={{ id: record?.id ?? '0',
id: record.id, targetObjectNameSingular: objectMetadataItem?.nameSingular,
targetObjectNameSingular: objectMetadataItem?.nameSingular, }}
}} />
/> <ShowPageMoreButton
<ShowPageMoreButton key="more"
key="more" recordId={record?.id ?? '0'}
recordId={record.id} objectNameSingular={objectNameSingular}
objectNameSingular={objectNameSingular} />
/> </>
</>
)}
</PageHeader> </PageHeader>
<PageBody> <PageBody>
<RecordShowContainer <RecordShowContainer
objectNameSingular={objectNameSingular} objectNameSingular={objectNameSingular}
objectRecordId={objectRecordId} objectRecordId={objectRecordId}
loading={loading}
/> />
</PageBody> </PageBody>
</PageContainer> </PageContainer>