Loading more UI updated (#3198)

* style update

* inlcude box as a table element

* Ui

Loading more fixed

* changes

tbody added with ref
with margin and padding with theme variables

* Remove unused react fragment

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBodyFetchMoreLoader.tsx

@@ -1,10 +1,12 @@
 import { useInView } from 'react-intersection-observer';
+import styled from '@emotion/styled';
 import { useRecoilCallback, useRecoilValue } from 'recoil';
 
 import { useObjectRecordTable } from '@/object-record/hooks/useObjectRecordTable';
 import { StyledRow } from '@/object-record/record-table/components/RecordTableRow';
 import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
 import { isFetchingMoreRecordsFamilyState } from '@/object-record/states/isFetchingMoreRecordsFamilyState';
+import { grayScale } from '@/ui/theme/constants/colors';
 
 export const RecordTableBodyFetchMoreLoader = () => {
   const { queryStateIdentifier } = useObjectRecordTable();
@@ -25,15 +27,26 @@ export const RecordTableBodyFetchMoreLoader = () => {
     onChange: onLastRowVisible,
   });
 
+  const StyledText = styled.div`
+    align-items: center;
+    box-shadow: none;
+    color: ${grayScale.gray40};
+    display: flex;
+    height: 32px;
+    margin-left: ${({ theme }) => theme.spacing(8)};
+    padding-left: ${({ theme }) => theme.spacing(2)};
+  `;
+
   return (
     <tbody ref={tbodyRef}>
-      {isFetchingMoreObjects ? (
+      {!isFetchingMoreObjects && (
         <StyledRow selected={false}>
-          <td style={{ height: 50 }} colSpan={1000}>
+          <td colSpan={7}>
-            Loading more...
+            <StyledText>Loading more...</StyledText>
           </td>
+          <td colSpan={7} />
         </StyledRow>
-      ) : null}
+      )}
     </tbody>
   );
 };