From ddc5165178261a6659b1c06f7803e0769c2a907d Mon Sep 17 00:00:00 2001
From: Jeet Desai <52026385+jeet1desai@users.noreply.github.com>
Date: Thu, 8 Feb 2024 17:22:28 +0530
Subject: [PATCH] Added skeleton loader on page load (#3740)

* #3722 added skeleton loader on page load

* #3740 Resolved comment in loader
---
 .../src/modules/ui/layout/page/PageHeader.tsx | 32 +++++++++++++++----
 .../pages/object-record/RecordShowPage.tsx    |  3 +-
 2 files changed, 28 insertions(+), 7 deletions(-)

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 001a5a9d56..1804cfb481 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 (
+    <SkeletonTheme
+      baseColor={theme.background.quaternary}
+      highlightColor={theme.background.transparent.light}
+      borderRadius={50}
+    >
+      <Skeleton height={24} width={108} />
+    </SkeletonTheme>
+  );
+};
+
 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"
           />
         )}
-        <StyledTopBarIconStyledTitleContainer>
-          {Icon && <Icon size={theme.icon.size.md} />}
-          <StyledTitleContainer data-testid="top-bar-title">
-            <OverflowingTextWithTooltip text={title} />
-          </StyledTitleContainer>
-        </StyledTopBarIconStyledTitleContainer>
+        {loading ? (
+          <StyledSkeletonLoader />
+        ) : (
+          <StyledTopBarIconStyledTitleContainer>
+            {Icon && <Icon size={theme.icon.size.md} />}
+            <StyledTitleContainer data-testid="top-bar-title">
+              <OverflowingTextWithTooltip text={title} />
+            </StyledTitleContainer>
+          </StyledTopBarIconStyledTitleContainer>
+        )}
       </StyledLeftContainer>
       <StyledPageActionContainer>{children}</StyledPageActionContainer>
     </StyledTopBarContainer>
diff --git a/packages/twenty-front/src/pages/object-record/RecordShowPage.tsx b/packages/twenty-front/src/pages/object-record/RecordShowPage.tsx
index 98641f3ed8..466180017b 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 && (
           <>