From 6bc7622e1e81317ce169079a6e6fb18996d6700d Mon Sep 17 00:00:00 2001
From: nitin <142569587+ehconitin@users.noreply.github.com>
Date: Mon, 29 Jul 2024 20:30:22 +0530
Subject: [PATCH] Record Page Navigation Arrows Cause Unnecessary skeleton
 loading (#6367)

@Bonapara
Issue #6325

- Desired Behavior
The navigation should always be visible. Clicking on a Next/Previous
arrow should immediately increment the number without switching to the
skeleton loading step.
**Done**

Please let me know what do you think about this approach.

Thanks :)



https://github.com/user-attachments/assets/bda3608f-87e3-45bd-a7c8-4a6b48391cf2

Co-authored-by: Weiko <corentin@twenty.com>
Co-authored-by: martmull <martmull@hotmail.fr>
---
 .../hooks/useRecordShowPagePagination.ts      | 11 ++-
 .../src/modules/ui/layout/page/PageHeader.tsx | 71 +++++++------------
 .../pages/object-record/RecordShowPage.tsx    |  2 -
 3 files changed, 36 insertions(+), 48 deletions(-)

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 3dbe0e2976df..8273caecb70c 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 49e7ba382dcb..ae60265f63b5 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 (
-    <SkeletonTheme
-      baseColor={theme.background.quaternary}
-      highlightColor={theme.background.transparent.light}
-      borderRadius={50}
-    >
-      <Skeleton height={24} width={108} />
-    </SkeletonTheme>
-  );
-};
-
 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 ? (
-          <StyledSkeletonLoader />
-        ) : (
-          <StyledTopBarIconStyledTitleContainer>
-            {hasPaginationButtons && (
-              <>
-                <IconButton
-                  Icon={IconChevronUp}
-                  size="small"
-                  variant="secondary"
-                  disabled={!hasPreviousRecord}
-                  onClick={() => navigateToPreviousRecord?.()}
-                />
-                <IconButton
-                  Icon={IconChevronDown}
-                  size="small"
-                  variant="secondary"
-                  disabled={!hasNextRecord}
-                  onClick={() => navigateToNextRecord?.()}
-                />
-              </>
-            )}
-            {Icon && <Icon size={theme.icon.size.md} />}
-            <StyledTitleContainer data-testid="top-bar-title">
-              <OverflowingTextWithTooltip text={title} />
-            </StyledTitleContainer>
-          </StyledTopBarIconStyledTitleContainer>
-        )}
+
+        <StyledTopBarIconStyledTitleContainer>
+          {hasPaginationButtons && (
+            <>
+              <IconButton
+                Icon={IconChevronUp}
+                size="small"
+                variant="secondary"
+                disabled={!hasPreviousRecord}
+                onClick={() => navigateToPreviousRecord?.()}
+              />
+              <IconButton
+                Icon={IconChevronDown}
+                size="small"
+                variant="secondary"
+                disabled={!hasNextRecord}
+                onClick={() => navigateToNextRecord?.()}
+              />
+            </>
+          )}
+          {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 1037467db9ff..fe407beafec4 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}
         >
           <>
             <PageFavoriteButton