Added skeleton loader on page load (#3740)

* #3722 added skeleton loader on page load

* #3740 Resolved comment in loader

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>
+        {loading ? (
-          {Icon && <Icon size={theme.icon.size.md} />}
+          <StyledSkeletonLoader />
-          <StyledTitleContainer data-testid="top-bar-title">
+        ) : (
-            <OverflowingTextWithTooltip text={title} />
+          <StyledTopBarIconStyledTitleContainer>
-          </StyledTitleContainer>
+            {Icon && <Icon size={theme.icon.size.md} />}
-        </StyledTopBarIconStyledTitleContainer>
+            <StyledTitleContainer data-testid="top-bar-title">
+              <OverflowingTextWithTooltip text={title} />
+            </StyledTitleContainer>
+          </StyledTopBarIconStyledTitleContainer>
+        )}
       </StyledLeftContainer>
       <StyledPageActionContainer>{children}</StyledPageActionContainer>
     </StyledTopBarContainer>

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 && (
           <>