Record Page Navigation Arrows Cause Unnecessary skeleton loading (twe…

…ntyhq#6367) @Bonapara Issue twentyhq#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 <[email protected]> Co-authored-by: martmull <[email protected]>
ehconitin · Jul 29, 2024 · 6bc7622 · 6bc7622
1 parent 515d6fb
commit 6bc7622
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 48 deletions.
diff --git a/...s/twenty-front/src/modules/object-record/record-show/hooks/useRecordShowPagePagination.ts b/...s/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
@@ -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
@@ -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