twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2024-11-27 11:03:40 +03:00
Code Issues Packages Projects Releases Wiki Activity

Loading more UI updated (#3198)

Browse Source 
* 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>
This commit is contained in:
Suman Sahoo 2024-01-05 15:37:49 +05:30 committed by GitHub
parent db46dd4497
commit e50b62df8f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 17 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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}>
Loading more...
<td colSpan={7}>
<StyledText>Loading more...</StyledText>
</td>
<td colSpan={7} />
</StyledRow>
) : null}
)}
</tbody>
);
};