-
Notifications
You must be signed in to change notification settings - Fork 2.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Data Skeleton Loading on Indexes (#5828)
### Description Data Skeleton Loading on Indexes ### Refs #4459 ### Demo https://github.com/twentyhq/twenty/assets/140154534/d9c9b0fa-2d8c-4b0d-8d48-cae09530622a Fixes #4459 --------- Co-authored-by: gitstart-twenty <[email protected]> Co-authored-by: v1b3m <[email protected]> Co-authored-by: Matheus <[email protected]> Co-authored-by: Lucas Bordeau <[email protected]>
- Loading branch information
1 parent
ff21396
commit 7010590
Showing
11 changed files
with
240 additions
and
8 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
61 changes: 61 additions & 0 deletions
61
...ord-board/record-board-column/components/RecordBoardColumnCardContainerSkeletonLoader.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,61 @@ | ||
import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'; | ||
import { useTheme } from '@emotion/react'; | ||
import styled from '@emotion/styled'; | ||
|
||
import { | ||
StyledBoardCardBody, | ||
StyledBoardCardHeader, | ||
} from '@/object-record/record-board/record-board-card/components/RecordBoardCard'; | ||
|
||
const StyledSkeletonIconAndText = styled.div` | ||
display: flex; | ||
gap: ${({ theme }) => theme.spacing(1)}; | ||
`; | ||
|
||
const StyledSkeletonTitle = styled.div` | ||
padding-left: ${({ theme }) => theme.spacing(2)}; | ||
`; | ||
|
||
const StyledSeparator = styled.div` | ||
height: ${({ theme }) => theme.spacing(2)}; | ||
`; | ||
|
||
export const RecordBoardColumnCardContainerSkeletonLoader = ({ | ||
numberOfFields, | ||
titleSkeletonWidth, | ||
isCompactModeActive, | ||
}: { | ||
numberOfFields: number; | ||
titleSkeletonWidth: number; | ||
isCompactModeActive: boolean; | ||
}) => { | ||
const theme = useTheme(); | ||
const skeletonItems = Array.from({ length: numberOfFields }).map( | ||
(_, index) => ({ | ||
id: `skeleton-item-${index}`, | ||
}), | ||
); | ||
return ( | ||
<SkeletonTheme | ||
baseColor={theme.background.tertiary} | ||
highlightColor={theme.background.transparent.lighter} | ||
borderRadius={4} | ||
> | ||
<StyledBoardCardHeader showCompactView={isCompactModeActive}> | ||
<StyledSkeletonTitle> | ||
<Skeleton width={titleSkeletonWidth} height={16} /> | ||
</StyledSkeletonTitle> | ||
</StyledBoardCardHeader> | ||
<StyledSeparator /> | ||
{!isCompactModeActive && | ||
skeletonItems.map(({ id }) => ( | ||
<StyledBoardCardBody key={id}> | ||
<StyledSkeletonIconAndText> | ||
<Skeleton width={16} height={16} /> | ||
<Skeleton width={151} height={16} /> | ||
</StyledSkeletonIconAndText> | ||
</StyledBoardCardBody> | ||
))} | ||
</SkeletonTheme> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
13 changes: 13 additions & 0 deletions
13
...ord/record-board/record-board-column/utils/getNumberOfCardsPerColumnForSkeletonLoading.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
export const getNumberOfCardsPerColumnForSkeletonLoading = ( | ||
columnIndex: number, | ||
): number => { | ||
const skeletonCounts: Record<number, number> = { | ||
0: 2, | ||
1: 1, | ||
2: 3, | ||
3: 0, | ||
4: 1, | ||
}; | ||
|
||
return skeletonCounts[columnIndex] || 0; | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
37 changes: 37 additions & 0 deletions
37
...twenty-front/src/modules/object-record/record-table/components/RecordTableBodyLoading.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,37 @@ | ||
import { useRecoilValue } from 'recoil'; | ||
|
||
import { CheckboxCell } from '@/object-record/record-table/components/CheckboxCell'; | ||
import { GripCell } from '@/object-record/record-table/components/GripCell'; | ||
import { | ||
StyledTd, | ||
StyledTr, | ||
} from '@/object-record/record-table/components/RecordTableRow'; | ||
import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates'; | ||
import { RecordTableCellLoading } from '@/object-record/record-table/record-table-cell/components/RecordTableCellLoading'; | ||
|
||
export const RecordTableBodyLoading = () => { | ||
const { visibleTableColumnsSelector } = useRecordTableStates(); | ||
const visibleTableColumns = useRecoilValue(visibleTableColumnsSelector()); | ||
|
||
return ( | ||
<tbody> | ||
{Array.from({ length: 8 }).map((_, rowIndex) => ( | ||
<StyledTr | ||
isDragging={false} | ||
data-testid={`row-id-${rowIndex}`} | ||
data-selectable-id={`row-id-${rowIndex}`} | ||
> | ||
<StyledTd data-select-disable> | ||
<GripCell isDragging={false} /> | ||
</StyledTd> | ||
<StyledTd> | ||
<CheckboxCell /> | ||
</StyledTd> | ||
{visibleTableColumns.map((column) => ( | ||
<RecordTableCellLoading key={column.fieldMetadataId} /> | ||
))} | ||
</StyledTr> | ||
))} | ||
</tbody> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
10 changes: 10 additions & 0 deletions
10
...odules/object-record/record-table/record-table-cell/components/RecordTableCellLoading.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
import { StyledTd } from '@/object-record/record-table/components/RecordTableRow'; | ||
import { RecordTableCellSkeletonLoader } from '@/object-record/record-table/record-table-cell/components/RecordTableCellSkeletonLoader'; | ||
|
||
export const RecordTableCellLoading = () => { | ||
return ( | ||
<StyledTd> | ||
<RecordTableCellSkeletonLoader /> | ||
</StyledTd> | ||
); | ||
}; |
29 changes: 29 additions & 0 deletions
29
...object-record/record-table/record-table-cell/components/RecordTableCellSkeletonLoader.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,29 @@ | ||
import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'; | ||
import { useTheme } from '@emotion/react'; | ||
import styled from '@emotion/styled'; | ||
|
||
const StyledSkeletonContainer = styled.div` | ||
padding-left: ${({ theme }) => theme.spacing(2)}; | ||
padding-right: ${({ theme }) => theme.spacing(1)}; | ||
`; | ||
|
||
const StyledRecordTableCellLoader = ({ width }: { width?: number }) => { | ||
const theme = useTheme(); | ||
return ( | ||
<SkeletonTheme | ||
baseColor={theme.background.tertiary} | ||
highlightColor={theme.background.transparent.lighter} | ||
borderRadius={4} | ||
> | ||
<Skeleton width={width} height={16} /> | ||
</SkeletonTheme> | ||
); | ||
}; | ||
|
||
export const RecordTableCellSkeletonLoader = () => { | ||
return ( | ||
<StyledSkeletonContainer> | ||
<StyledRecordTableCellLoader /> | ||
</StyledSkeletonContainer> | ||
); | ||
}; |
9 changes: 9 additions & 0 deletions
9
...es/twenty-front/src/modules/object-record/states/isRecordBoardColumnLoadingFamilyState.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
import { createFamilyState } from '@/ui/utilities/state/utils/createFamilyState'; | ||
|
||
export const isRecordIndexBoardColumnLoadingFamilyState = createFamilyState< | ||
boolean, | ||
string | undefined | ||
>({ | ||
key: 'isRecordIndexBoardColumnLoadingFamilyState', | ||
defaultValue: false, | ||
}); |