diff --git a/packages/twenty-front/src/modules/ui/layout/page/PageHeader.tsx b/packages/twenty-front/src/modules/ui/layout/page/PageHeader.tsx
index 001a5a9d5..1804cfb48 100644
--- a/packages/twenty-front/src/modules/ui/layout/page/PageHeader.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/page/PageHeader.tsx
@@ -1,4 +1,5 @@
import { ComponentProps, ReactNode } from 'react';
+import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
import { useNavigate } from 'react-router-dom';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
@@ -71,11 +72,25 @@ const StyledTopBarButtonContainer = styled.div`
margin-right: ${({ theme }) => theme.spacing(1)};
`;
+const StyledSkeletonLoader = () => {
+ const theme = useTheme();
+ return (
+
+
+
+ );
+};
+
type PageHeaderProps = ComponentProps<'div'> & {
title: string;
hasBackButton?: boolean;
Icon: IconComponent;
children?: ReactNode;
+ loading?: boolean;
};
export const PageHeader = ({
@@ -83,6 +98,7 @@ export const PageHeader = ({
hasBackButton,
Icon,
children,
+ loading,
}: PageHeaderProps) => {
const isMobile = useIsMobile();
const navigate = useNavigate();
@@ -105,12 +121,16 @@ export const PageHeader = ({
variant="tertiary"
/>
)}
-
- {Icon && }
-
-
-
-
+ {loading ? (
+
+ ) : (
+
+ {Icon && }
+
+
+
+
+ )}
{children}
diff --git a/packages/twenty-front/src/pages/object-record/RecordShowPage.tsx b/packages/twenty-front/src/pages/object-record/RecordShowPage.tsx
index 98641f3ed..466180017 100644
--- a/packages/twenty-front/src/pages/object-record/RecordShowPage.tsx
+++ b/packages/twenty-front/src/pages/object-record/RecordShowPage.tsx
@@ -42,7 +42,7 @@ export const RecordShowPage = () => {
recordStoreFamilyState(objectRecordId),
);
- const { record } = useFindOneRecord({
+ const { record, loading } = useFindOneRecord({
objectRecordId,
objectNameSingular,
});
@@ -80,6 +80,7 @@ export const RecordShowPage = () => {
title={pageName ?? ''}
hasBackButton
Icon={IconBuildingSkyscraper}
+ loading={loading}
>
{record && (
<>