diff --git a/packages/twenty-front/src/modules/object-record/record-show/hooks/useRecordShowPagePagination.ts b/packages/twenty-front/src/modules/object-record/record-show/hooks/useRecordShowPagePagination.ts
index 3dbe0e297..8273caecb 100644
--- a/packages/twenty-front/src/modules/object-record/record-show/hooks/useRecordShowPagePagination.ts
+++ b/packages/twenty-front/src/modules/object-record/record-show/hooks/useRecordShowPagePagination.ts
@@ -11,6 +11,7 @@ import { buildShowPageURL } from '@/object-record/record-show/utils/buildShowPag
import { buildIndexTablePageURL } from '@/object-record/record-table/utils/buildIndexTableURL';
import { useQueryVariablesFromActiveFieldsOfViewOrDefaultView } from '@/views/hooks/useQueryVariablesFromActiveFieldsOfViewOrDefaultView';
import { isNonEmptyString } from '@sniptt/guards';
+import { useEffect, useState } from 'react';
import { capitalize } from '~/utils/string/capitalize';
export const useRecordShowPagePagination = (
@@ -99,7 +100,15 @@ export const useRecordShowPagePagination = (
recordGqlFields,
});
- const totalCount = Math.max(totalCountBefore ?? 0, totalCountAfter ?? 0);
+ const [totalCount, setTotalCount] = useState(
+ Math.max(totalCountBefore ?? 0, totalCountAfter ?? 0),
+ );
+
+ useEffect(() => {
+ if (totalCountBefore !== undefined || totalCountAfter !== undefined) {
+ setTotalCount(Math.max(totalCountBefore ?? 0, totalCountAfter ?? 0));
+ }
+ }, [totalCountBefore, totalCountAfter]);
const loading = loadingRecordAfter || loadingRecordBefore || loadingCursor;
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 49e7ba382..ae60265f6 100644
--- a/packages/twenty-front/src/modules/ui/layout/page/PageHeader.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/page/PageHeader.tsx
@@ -1,7 +1,6 @@
-import { ComponentProps, ReactNode } from 'react';
-import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
+import { ComponentProps, ReactNode } from 'react';
import { useRecoilValue } from 'recoil';
import {
IconChevronDown,
@@ -77,19 +76,6 @@ const StyledTopBarButtonContainer = styled.div`
margin-right: ${({ theme }) => theme.spacing(1)};
`;
-const StyledSkeletonLoader = () => {
- const theme = useTheme();
- return (
-
-
-
- );
-};
-
type PageHeaderProps = ComponentProps<'div'> & {
title: string;
hasClosePageButton?: boolean;
@@ -101,7 +87,6 @@ type PageHeaderProps = ComponentProps<'div'> & {
navigateToNextRecord?: () => void;
Icon: IconComponent;
children?: ReactNode;
- loading?: boolean;
};
export const PageHeader = ({
@@ -115,7 +100,6 @@ export const PageHeader = ({
navigateToNextRecord,
Icon,
children,
- loading,
}: PageHeaderProps) => {
const isMobile = useIsMobile();
const theme = useTheme();
@@ -137,34 +121,31 @@ export const PageHeader = ({
onClick={() => onClosePage?.()}
/>
)}
- {loading ? (
-
- ) : (
-
- {hasPaginationButtons && (
- <>
- navigateToPreviousRecord?.()}
- />
- navigateToNextRecord?.()}
- />
- >
- )}
- {Icon && }
-
-
-
-
- )}
+
+
+ {hasPaginationButtons && (
+ <>
+ navigateToPreviousRecord?.()}
+ />
+ navigateToNextRecord?.()}
+ />
+ >
+ )}
+ {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 1037467db..fe407beaf 100644
--- a/packages/twenty-front/src/pages/object-record/RecordShowPage.tsx
+++ b/packages/twenty-front/src/pages/object-record/RecordShowPage.tsx
@@ -43,7 +43,6 @@ export const RecordShowPage = () => {
navigateToPreviousRecord,
navigateToNextRecord,
navigateToIndexView,
- isLoadingPagination,
} = useRecordShowPagePagination(
parameters.objectNameSingular ?? '',
parameters.objectRecordId ?? '',
@@ -64,7 +63,6 @@ export const RecordShowPage = () => {
hasNextRecord={hasNextRecord}
navigateToNextRecord={navigateToNextRecord}
Icon={headerIcon}
- loading={loading || isLoadingPagination}
>
<>