From ffd3ed29464bd2d2852d767d2546b555d3cabc7d Mon Sep 17 00:00:00 2001 From: gitstart-twenty Date: Tue, 11 Jun 2024 18:34:53 +0000 Subject: [PATCH 1/8] Data Skeleton Loading on Indexes Co-authored-by: v1b3m Co-authored-by: Matheus --- .../components/RecordBoardCard.tsx | 4 +- ...BoardColumnCardContainerSkeletonLoader.tsx | 57 +++++++++++++++++++ .../RecordBoardColumnCardsContainer.tsx | 53 ++++++++++++++++- .../hooks/useLoadRecordIndexBoard.ts | 8 +++ .../components/RecordTableBody.tsx | 49 +++++++++++++++- .../RecordTableCellFieldContextWrapper.tsx | 11 +++- .../components/RecordTableCell.tsx | 3 + .../components/RecordTableCellContainer.tsx | 42 +++++++++++++- .../states/isRecordIndexLoadingFamilyState.ts | 9 +++ 9 files changed, 228 insertions(+), 8 deletions(-) create mode 100644 packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnCardContainerSkeletonLoader.tsx create mode 100644 packages/twenty-front/src/modules/object-record/states/isRecordIndexLoadingFamilyState.ts diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx b/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx index 5f1c139d2f2e..da8f6b721fc9 100644 --- a/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx +++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx @@ -67,7 +67,7 @@ const StyledBoardCardWrapper = styled.div` width: 100%; `; -const StyledBoardCardHeader = styled.div<{ +export const StyledBoardCardHeader = styled.div<{ showCompactView: boolean; }>` align-items: center; @@ -90,7 +90,7 @@ const StyledBoardCardHeader = styled.div<{ } `; -const StyledBoardCardBody = styled.div` +export const StyledBoardCardBody = styled.div` display: flex; flex-direction: column; gap: ${({ theme }) => theme.spacing(0.5)}; diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnCardContainerSkeletonLoader.tsx b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnCardContainerSkeletonLoader.tsx new file mode 100644 index 000000000000..7588e4516e2c --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnCardContainerSkeletonLoader.tsx @@ -0,0 +1,57 @@ +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 = ({ + titleSkeletonWidth, + isCompactModeActive, +}: { + titleSkeletonWidth: number; + isCompactModeActive: boolean; +}) => { + const theme = useTheme(); + const skeletonItems = Array.from({ length: 6 }).map((_, index) => ({ + id: `skeleton-item-${index}`, + })); + return ( + + + + + + + + {!isCompactModeActive && + skeletonItems.map(({ id }) => ( + + + + + + + ))} + + ); +}; diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnCardsContainer.tsx b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnCardsContainer.tsx index 96d14a011bd4..054f1c4cf86b 100644 --- a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnCardsContainer.tsx +++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnCardsContainer.tsx @@ -1,14 +1,18 @@ import React, { useContext } from 'react'; import styled from '@emotion/styled'; import { Draggable, DroppableProvided } from '@hello-pangea/dnd'; +import { useRecoilValue } from 'recoil'; import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular'; import { RecordBoardContext } from '@/object-record/record-board/contexts/RecordBoardContext'; +import { useRecordBoardStates } from '@/object-record/record-board/hooks/internal/useRecordBoardStates'; +import { RecordBoardColumnCardContainerSkeletonLoader } from '@/object-record/record-board/record-board-column/components/RecordBoardColumnCardContainerSkeletonLoader'; import { RecordBoardColumnCardsMemo } from '@/object-record/record-board/record-board-column/components/RecordBoardColumnCardsMemo'; import { RecordBoardColumnFetchMoreLoader } from '@/object-record/record-board/record-board-column/components/RecordBoardColumnFetchMoreLoader'; import { RecordBoardColumnNewButton } from '@/object-record/record-board/record-board-column/components/RecordBoardColumnNewButton'; import { RecordBoardColumnNewOpportunityButton } from '@/object-record/record-board/record-board-column/components/RecordBoardColumnNewOpportunityButton'; import { RecordBoardColumnContext } from '@/object-record/record-board/record-board-column/contexts/RecordBoardColumnContext'; +import { isRecordIndexLoadingFamilyState } from '@/object-record/states/isRecordIndexLoadingFamilyState'; const StyledColumnCardsContainer = styled.div` display: flex; @@ -20,6 +24,17 @@ const StyledNewButtonContainer = styled.div` padding-bottom: ${({ theme }) => theme.spacing(4)}; `; +const StyledSkeletonCardContainer = styled.div` + background-color: ${({ theme }) => theme.background.secondary}; + border: 1px solid ${({ theme }) => theme.background.quaternary}; + border-radius: ${({ theme }) => theme.border.radius.md}; + box-shadow: + 0px 4px 8px 0px rgba(0, 0, 0, 0.08), + 0px 0px 4px 0px rgba(0, 0, 0, 0.08); + color: ${({ theme }) => theme.font.color.primary}; + margin-bottom: ${({ theme }) => theme.spacing(2)}; +`; + type RecordBoardColumnCardsContainerProps = { recordIds: string[]; droppableProvided: DroppableProvided; @@ -32,13 +47,49 @@ export const RecordBoardColumnCardsContainer = ({ const { columnDefinition } = useContext(RecordBoardColumnContext); const { objectMetadataItem } = useContext(RecordBoardContext); + const isRecordIndexLoading = useRecoilValue( + isRecordIndexLoadingFamilyState(objectMetadataItem.nameSingular), + ); + + const { isCompactModeActiveState } = useRecordBoardStates(); + + const isCompactModeActive = useRecoilValue(isCompactModeActiveState); + + const getNumberOfSkeletons = (position: number): number => { + const skeletonCounts: Record = { + 0: 2, + 1: 1, + 2: 3, + 3: 0, + 4: 1, + }; + + return skeletonCounts[position] || 0; + }; + return ( - + {isRecordIndexLoading ? ( + Array.from( + { length: getNumberOfSkeletons(columnDefinition.position) }, + (_, index) => ( + + + + ), + ) + ) : ( + + )} { + setIsRecordIndexLoading(loading && records.length === 0); + }, [records, loading, setIsRecordIndexLoading]); useEffect(() => { setRecordIdsInBoard(records); diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBody.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBody.tsx index 3947067f4806..47b487deae5a 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBody.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBody.tsx @@ -1,8 +1,11 @@ import { useRecoilValue } from 'recoil'; +import { CheckboxCell } from '@/object-record/record-table/components/CheckboxCell'; import { RecordTableBodyFetchMoreLoader } from '@/object-record/record-table/components/RecordTableBodyFetchMoreLoader'; +import { RecordTableCellFieldContextWrapper } from '@/object-record/record-table/components/RecordTableCellFieldContextWrapper'; import { RecordTablePendingRow } from '@/object-record/record-table/components/RecordTablePendingRow'; import { RecordTableRow } from '@/object-record/record-table/components/RecordTableRow'; +import { RecordTableCellContext } from '@/object-record/record-table/contexts/RecordTableCellContext'; import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates'; type RecordTableBodyProps = { @@ -12,9 +15,53 @@ type RecordTableBodyProps = { export const RecordTableBody = ({ objectNameSingular, }: RecordTableBodyProps) => { - const { tableRowIdsState } = useRecordTableStates(); + const { + tableRowIdsState, + isRecordTableInitialLoadingState, + visibleTableColumnsSelector, + } = useRecordTableStates(); const tableRowIds = useRecoilValue(tableRowIdsState); + const visibleTableColumns = useRecoilValue(visibleTableColumnsSelector()); + + const isRecordTableInitialLoading = useRecoilValue( + isRecordTableInitialLoadingState, + ); + const skeletonColumnsWithSmallWidth = ['Domain Name', 'ICP', 'ARR', 'X']; + + if (isRecordTableInitialLoading && tableRowIds.length === 0) { + return ( + + {Array.from({ length: 8 }).map((_, rowIndex) => ( + + + + + {visibleTableColumns.map((column, columnIndex) => ( + + + + ))} + + ))} + + ); + } return ( <> diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableCellFieldContextWrapper.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableCellFieldContextWrapper.tsx index ec30ebe03eba..ca030093c86c 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableCellFieldContextWrapper.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableCellFieldContextWrapper.tsx @@ -14,7 +14,11 @@ import { RelationPickerHotkeyScope } from '@/object-record/relation-picker/types import { SelectFieldHotkeyScope } from '@/object-record/select/types/SelectFieldHotkeyScope'; import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull'; -export const RecordTableCellFieldContextWrapper = () => { +export const RecordTableCellFieldContextWrapper = ({ + skeletonWidth, +}: { + skeletonWidth?: number; +}) => { const { objectMetadataItem } = useContext(RecordTableContext); const { columnDefinition } = useContext(RecordTableCellContext); const { recordId, pathToShowPage } = useContext(RecordTableRowContext); @@ -49,7 +53,10 @@ export const RecordTableCellFieldContextWrapper = () => { }), }} > - + ); }; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCell.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCell.tsx index a38d61a39dc5..22a48a0ba52d 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCell.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCell.tsx @@ -12,8 +12,10 @@ import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope'; export const RecordTableCell = ({ customHotkeyScope, + skeletonWidth, }: { customHotkeyScope: HotkeyScope; + skeletonWidth?: number; }) => { const { onUpsertRecord, onMoveFocus, onCloseTableCell } = useContext(RecordTableContext); @@ -105,6 +107,7 @@ export const RecordTableCell = ({ /> } nonEditModeContent={} + skeletonWidth={skeletonWidth} /> ); diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellContainer.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellContainer.tsx index 89a515a4de74..f7f93c30eed0 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellContainer.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellContainer.tsx @@ -1,10 +1,15 @@ import React, { ReactElement, useContext, useEffect, useState } from 'react'; +import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'; +import { useTheme } from '@emotion/react'; +import styled from '@emotion/styled'; import { clsx } from 'clsx'; +import { useRecoilValue } from 'recoil'; import { FieldContext } from '@/object-record/record-field/contexts/FieldContext'; import { useFieldFocus } from '@/object-record/record-field/hooks/useFieldFocus'; import { RecordTableContext } from '@/object-record/record-table/contexts/RecordTableContext'; import { RecordTableRowContext } from '@/object-record/record-table/contexts/RecordTableRowContext'; +import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates'; import { RecordTableCellSoftFocusMode } from '@/object-record/record-table/record-table-cell/components/RecordTableCellSoftFocusMode'; import { useCurrentTableCellPosition } from '@/object-record/record-table/record-table-cell/hooks/useCurrentCellPosition'; import { useOpenRecordTableCellFromCell } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellFromCell'; @@ -18,6 +23,28 @@ import { RecordTableCellEditMode } from './RecordTableCellEditMode'; import styles from './RecordTableCellContainer.module.css'; +const StyledSkeletonContainer = styled.div` + padding-left: ${({ theme }) => theme.spacing(2)}; + padding-right: ${({ theme }) => theme.spacing(1)}; +`; + +const StyledRecordTableCellContainerLoader = ({ + skeletonWidth = 132, +}: { + skeletonWidth?: number; +}) => { + const theme = useTheme(); + return ( + + + + ); +}; + export type RecordTableCellContainerProps = { editModeContent: ReactElement; nonEditModeContent: ReactElement; @@ -26,6 +53,7 @@ export type RecordTableCellContainerProps = { maxContentWidth?: number; onSubmit?: () => void; onCancel?: () => void; + skeletonWidth?: number; }; const DEFAULT_CELL_SCOPE: HotkeyScope = { @@ -36,9 +64,11 @@ export const RecordTableCellContainer = ({ editModeContent, nonEditModeContent, editHotkeyScope, + skeletonWidth, }: RecordTableCellContainerProps) => { const { setIsFocused } = useFieldFocus(); const { openTableCell } = useOpenRecordTableCellFromCell(); + const { isRecordTableInitialLoadingState } = useRecordTableStates(); const { isSelected, recordId, isPendingRow } = useContext( RecordTableRowContext, @@ -53,7 +83,9 @@ export const RecordTableCellContainer = ({ const [isInEditMode, setIsInEditMode] = useState(shouldBeInitiallyInEditMode); const cellPosition = useCurrentTableCellPosition(); - + const isRecordTableInitialLoading = useRecoilValue( + isRecordTableInitialLoadingState, + ); const handleContextMenu = (event: React.MouseEvent) => { onContextMenu(event, recordId); }; @@ -151,7 +183,13 @@ export const RecordTableCellContainer = ({ [styles.cellBaseContainerSoftFocus]: hasSoftFocus, })} > - {isInEditMode ? ( + {isRecordTableInitialLoading ? ( + + + + ) : isInEditMode ? ( {editModeContent} ) : hasSoftFocus ? ( <> diff --git a/packages/twenty-front/src/modules/object-record/states/isRecordIndexLoadingFamilyState.ts b/packages/twenty-front/src/modules/object-record/states/isRecordIndexLoadingFamilyState.ts new file mode 100644 index 000000000000..127dd04647d7 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/states/isRecordIndexLoadingFamilyState.ts @@ -0,0 +1,9 @@ +import { createFamilyState } from '@/ui/utilities/state/utils/createFamilyState'; + +export const isRecordIndexLoadingFamilyState = createFamilyState< + boolean, + string | undefined +>({ + key: 'isRecordIndexLoadingFamilyState', + defaultValue: false, +}); From aa4966b58de827a81a9c2b51e76d2041ee192b69 Mon Sep 17 00:00:00 2001 From: gitstart-twenty Date: Tue, 11 Jun 2024 18:43:25 +0000 Subject: [PATCH 2/8] Fix data skeleton loading Co-authored-by: v1b3m Co-authored-by: Matheus --- .../components/RecordBoardColumnCardsContainer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnCardsContainer.tsx b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnCardsContainer.tsx index 054f1c4cf86b..81368f5991b3 100644 --- a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnCardsContainer.tsx +++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnCardsContainer.tsx @@ -81,7 +81,7 @@ export const RecordBoardColumnCardsContainer = ({ key={`${columnDefinition.id}-${index}`} > From f931621cd7fbf8e7303b347c89dd0c16341fab5c Mon Sep 17 00:00:00 2001 From: gitstart-twenty Date: Tue, 18 Jun 2024 09:05:25 +0000 Subject: [PATCH 3/8] Refactor according to review Co-authored-by: v1b3m Co-authored-by: Matheus --- .../components/RecordBoardColumnCardsContainer.tsx | 10 ++++++---- .../RecordIndexBoardColumnLoaderEffect.tsx | 13 +++++++++++-- .../record-index/hooks/useLoadRecordIndexBoard.ts | 10 +--------- ....ts => isRecordBoardColumnLoadingFamilyState.ts} | 4 ++-- 4 files changed, 20 insertions(+), 17 deletions(-) rename packages/twenty-front/src/modules/object-record/states/{isRecordIndexLoadingFamilyState.ts => isRecordBoardColumnLoadingFamilyState.ts} (52%) diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnCardsContainer.tsx b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnCardsContainer.tsx index 81368f5991b3..06871bf41a5d 100644 --- a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnCardsContainer.tsx +++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnCardsContainer.tsx @@ -12,7 +12,7 @@ import { RecordBoardColumnFetchMoreLoader } from '@/object-record/record-board/r import { RecordBoardColumnNewButton } from '@/object-record/record-board/record-board-column/components/RecordBoardColumnNewButton'; import { RecordBoardColumnNewOpportunityButton } from '@/object-record/record-board/record-board-column/components/RecordBoardColumnNewOpportunityButton'; import { RecordBoardColumnContext } from '@/object-record/record-board/record-board-column/contexts/RecordBoardColumnContext'; -import { isRecordIndexLoadingFamilyState } from '@/object-record/states/isRecordIndexLoadingFamilyState'; +import { isRecordIndexBoardColumnLoadingFamilyState } from '@/object-record/states/isRecordBoardColumnLoadingFamilyState'; const StyledColumnCardsContainer = styled.div` display: flex; @@ -47,8 +47,10 @@ export const RecordBoardColumnCardsContainer = ({ const { columnDefinition } = useContext(RecordBoardColumnContext); const { objectMetadataItem } = useContext(RecordBoardContext); - const isRecordIndexLoading = useRecoilValue( - isRecordIndexLoadingFamilyState(objectMetadataItem.nameSingular), + const columnId = columnDefinition.id; + + const isRecordIndexBoardColumnLoading = useRecoilValue( + isRecordIndexBoardColumnLoadingFamilyState(columnId), ); const { isCompactModeActiveState } = useRecordBoardStates(); @@ -73,7 +75,7 @@ export const RecordBoardColumnCardsContainer = ({ // eslint-disable-next-line react/jsx-props-no-spreading {...droppableProvided?.droppableProps} > - {isRecordIndexLoading ? ( + {isRecordIndexBoardColumnLoading ? ( Array.from( { length: getNumberOfSkeletons(columnDefinition.position) }, (_, index) => ( diff --git a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexBoardColumnLoaderEffect.tsx b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexBoardColumnLoaderEffect.tsx index 804df9806dd5..654254b86c07 100644 --- a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexBoardColumnLoaderEffect.tsx +++ b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexBoardColumnLoaderEffect.tsx @@ -1,9 +1,10 @@ import { useEffect } from 'react'; -import { useRecoilState } from 'recoil'; +import { useRecoilState, useSetRecoilState } from 'recoil'; import { isRecordBoardFetchingRecordsByColumnFamilyState } from '@/object-record/record-board/states/isRecordBoardFetchingRecordsByColumnFamilyState'; import { recordBoardShouldFetchMoreInColumnComponentFamilyState } from '@/object-record/record-board/states/recordBoardShouldFetchMoreInColumnComponentFamilyState'; import { useLoadRecordIndexBoardColumn } from '@/object-record/record-index/hooks/useLoadRecordIndexBoardColumn'; +import { isRecordIndexBoardColumnLoadingFamilyState } from '@/object-record/states/isRecordBoardColumnLoadingFamilyState'; import { getScopeIdFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdFromComponentId'; export const RecordIndexBoardColumnLoaderEffect = ({ @@ -34,7 +35,7 @@ export const RecordIndexBoardColumnLoaderEffect = ({ }), ); - const { fetchMoreRecords, loading, hasNextPage } = + const { fetchMoreRecords, loading, records, hasNextPage } = useLoadRecordIndexBoardColumn({ objectNameSingular, recordBoardId, @@ -43,6 +44,14 @@ export const RecordIndexBoardColumnLoaderEffect = ({ columnId, }); + const setIsRecordIndexLoading = useSetRecoilState( + isRecordIndexBoardColumnLoadingFamilyState(columnId), + ); + + useEffect(() => { + setIsRecordIndexLoading(loading && records.length === 0); + }, [records, loading, setIsRecordIndexLoading]); + useEffect(() => { const run = async () => { if (!loading && shouldFetchMore && hasNextPage) { diff --git a/packages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexBoard.ts b/packages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexBoard.ts index a5ad58486f47..3f2bb21d34db 100644 --- a/packages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexBoard.ts +++ b/packages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexBoard.ts @@ -12,7 +12,6 @@ import { recordIndexFiltersState } from '@/object-record/record-index/states/rec import { recordIndexIsCompactModeActiveState } from '@/object-record/record-index/states/recordIndexIsCompactModeActiveState'; import { recordIndexSortsState } from '@/object-record/record-index/states/recordIndexSortsState'; import { useSetRecordInStore } from '@/object-record/record-store/hooks/useSetRecordInStore'; -import { isRecordIndexLoadingFamilyState } from '@/object-record/states/isRecordIndexLoadingFamilyState'; import { useSetRecordCountInCurrentView } from '@/views/hooks/useSetRecordCountInCurrentView'; type UseLoadRecordIndexBoardProps = { @@ -20,7 +19,7 @@ type UseLoadRecordIndexBoardProps = { viewBarId: string; recordBoardId: string; }; - +// this is not used anywhere! Whew! export const useLoadRecordIndexBoard = ({ objectNameSingular, viewBarId, @@ -77,13 +76,6 @@ export const useLoadRecordIndexBoard = ({ useSetRecordCountInCurrentView(viewBarId); const setIsCompactModeActive = useSetRecoilState(isCompactModeActiveState); - const setIsRecordIndexLoading = useSetRecoilState( - isRecordIndexLoadingFamilyState(objectNameSingular), - ); - - useEffect(() => { - setIsRecordIndexLoading(loading && records.length === 0); - }, [records, loading, setIsRecordIndexLoading]); useEffect(() => { setRecordIdsInBoard(records); diff --git a/packages/twenty-front/src/modules/object-record/states/isRecordIndexLoadingFamilyState.ts b/packages/twenty-front/src/modules/object-record/states/isRecordBoardColumnLoadingFamilyState.ts similarity index 52% rename from packages/twenty-front/src/modules/object-record/states/isRecordIndexLoadingFamilyState.ts rename to packages/twenty-front/src/modules/object-record/states/isRecordBoardColumnLoadingFamilyState.ts index 127dd04647d7..8804ff588ba1 100644 --- a/packages/twenty-front/src/modules/object-record/states/isRecordIndexLoadingFamilyState.ts +++ b/packages/twenty-front/src/modules/object-record/states/isRecordBoardColumnLoadingFamilyState.ts @@ -1,9 +1,9 @@ import { createFamilyState } from '@/ui/utilities/state/utils/createFamilyState'; -export const isRecordIndexLoadingFamilyState = createFamilyState< +export const isRecordIndexBoardColumnLoadingFamilyState = createFamilyState< boolean, string | undefined >({ - key: 'isRecordIndexLoadingFamilyState', + key: 'isRecordIndexBoardColumnLoadingFamilyState', defaultValue: false, }); From b11dbc28575a17ba076353be98d860096f4f33fb Mon Sep 17 00:00:00 2001 From: gitstart-twenty Date: Tue, 18 Jun 2024 09:14:42 +0000 Subject: [PATCH 4/8] Merge main Co-authored-by: v1b3m Co-authored-by: Matheus --- .../object-record/record-index/hooks/useLoadRecordIndexBoard.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexBoard.ts b/packages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexBoard.ts index 3f2bb21d34db..9cd621effee5 100644 --- a/packages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexBoard.ts +++ b/packages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexBoard.ts @@ -19,7 +19,7 @@ type UseLoadRecordIndexBoardProps = { viewBarId: string; recordBoardId: string; }; -// this is not used anywhere! Whew! + export const useLoadRecordIndexBoard = ({ objectNameSingular, viewBarId, From 5b6d6b12e5198b99cabcb611bb286c2c4e29f9fb Mon Sep 17 00:00:00 2001 From: gitstart-twenty Date: Tue, 18 Jun 2024 10:56:35 +0000 Subject: [PATCH 5/8] Refactor according to review Co-authored-by: v1b3m Co-authored-by: Matheus --- .../components/RecordTableBodyLoading.tsx | 22 +++++-------------- .../RecordTableCellFieldContextWrapper.tsx | 11 ++-------- .../components/RecordTableCell.tsx | 3 --- .../components/RecordTableCellContainer.tsx | 22 +++---------------- .../components/RecordTableCellLoading.tsx | 13 +++++++++++ ....tsx => RecordTableCellSkeletonLoader.tsx} | 6 ++--- 6 files changed, 27 insertions(+), 50 deletions(-) create mode 100644 packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellLoading.tsx rename packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/{RecordTableCellContainerSkeletonLoader.tsx => RecordTableCellSkeletonLoader.tsx} (80%) diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBodyLoading.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBodyLoading.tsx index 804f2fd49b33..ed9ea59bb181 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBodyLoading.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBodyLoading.tsx @@ -1,9 +1,8 @@ import { useRecoilValue } from 'recoil'; import { CheckboxCell } from '@/object-record/record-table/components/CheckboxCell'; -import { RecordTableCellFieldContextWrapper } from '@/object-record/record-table/components/RecordTableCellFieldContextWrapper'; -import { RecordTableCellContext } from '@/object-record/record-table/contexts/RecordTableCellContext'; 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(); @@ -21,21 +20,12 @@ export const RecordTableBodyLoading = () => { {visibleTableColumns.map((column, columnIndex) => ( - - - + skeletonWidth={ + skeletonColumnsWithSmallWidth.includes(column.label) ? 108 : 132 + } + /> ))} ))} diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableCellFieldContextWrapper.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableCellFieldContextWrapper.tsx index ca030093c86c..ec30ebe03eba 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableCellFieldContextWrapper.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableCellFieldContextWrapper.tsx @@ -14,11 +14,7 @@ import { RelationPickerHotkeyScope } from '@/object-record/relation-picker/types import { SelectFieldHotkeyScope } from '@/object-record/select/types/SelectFieldHotkeyScope'; import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull'; -export const RecordTableCellFieldContextWrapper = ({ - skeletonWidth, -}: { - skeletonWidth?: number; -}) => { +export const RecordTableCellFieldContextWrapper = () => { const { objectMetadataItem } = useContext(RecordTableContext); const { columnDefinition } = useContext(RecordTableCellContext); const { recordId, pathToShowPage } = useContext(RecordTableRowContext); @@ -53,10 +49,7 @@ export const RecordTableCellFieldContextWrapper = ({ }), }} > - + ); }; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCell.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCell.tsx index 22a48a0ba52d..a38d61a39dc5 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCell.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCell.tsx @@ -12,10 +12,8 @@ import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope'; export const RecordTableCell = ({ customHotkeyScope, - skeletonWidth, }: { customHotkeyScope: HotkeyScope; - skeletonWidth?: number; }) => { const { onUpsertRecord, onMoveFocus, onCloseTableCell } = useContext(RecordTableContext); @@ -107,7 +105,6 @@ export const RecordTableCell = ({ /> } nonEditModeContent={} - skeletonWidth={skeletonWidth} /> ); diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellContainer.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellContainer.tsx index f8d0c3f7046b..48b3f5ce25f3 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellContainer.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellContainer.tsx @@ -1,13 +1,10 @@ import React, { ReactElement, useContext, useEffect, useState } from 'react'; import { clsx } from 'clsx'; -import { useRecoilValue } from 'recoil'; import { FieldContext } from '@/object-record/record-field/contexts/FieldContext'; import { useFieldFocus } from '@/object-record/record-field/hooks/useFieldFocus'; import { RecordTableContext } from '@/object-record/record-table/contexts/RecordTableContext'; import { RecordTableRowContext } from '@/object-record/record-table/contexts/RecordTableRowContext'; -import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates'; -import { RecordTableCellContainerSkeletonLoader } from '@/object-record/record-table/record-table-cell/components/RecordTableCellContainerSkeletonLoader'; import { RecordTableCellSoftFocusMode } from '@/object-record/record-table/record-table-cell/components/RecordTableCellSoftFocusMode'; import { useCurrentTableCellPosition } from '@/object-record/record-table/record-table-cell/hooks/useCurrentCellPosition'; import { useOpenRecordTableCellFromCell } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellFromCell'; @@ -29,7 +26,6 @@ export type RecordTableCellContainerProps = { maxContentWidth?: number; onSubmit?: () => void; onCancel?: () => void; - skeletonWidth?: number; }; const DEFAULT_CELL_SCOPE: HotkeyScope = { @@ -40,11 +36,9 @@ export const RecordTableCellContainer = ({ editModeContent, nonEditModeContent, editHotkeyScope, - skeletonWidth, }: RecordTableCellContainerProps) => { const { setIsFocused } = useFieldFocus(); const { openTableCell } = useOpenRecordTableCellFromCell(); - const { isRecordTableInitialLoadingState } = useRecordTableStates(); const { isSelected, recordId, isPendingRow } = useContext( RecordTableRowContext, @@ -59,9 +53,7 @@ export const RecordTableCellContainer = ({ const [isInEditMode, setIsInEditMode] = useState(shouldBeInitiallyInEditMode); const cellPosition = useCurrentTableCellPosition(); - const isRecordTableInitialLoading = useRecoilValue( - isRecordTableInitialLoadingState, - ); + const handleContextMenu = (event: React.MouseEvent) => { onContextMenu(event, recordId); }; @@ -150,16 +142,8 @@ export const RecordTableCellContainer = ({ [styles.cellBaseContainerSoftFocus]: hasSoftFocus, })} > - {isRecordTableInitialLoading ? ( - - ) : ( - isInEditMode && ( - - {editModeContent} - - ) + {isInEditMode && ( + {editModeContent} )} {hasSoftFocus ? ( { + return ( + + + + ); +}; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellContainerSkeletonLoader.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellSkeletonLoader.tsx similarity index 80% rename from packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellContainerSkeletonLoader.tsx rename to packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellSkeletonLoader.tsx index bff027cdaa08..ceae9072716d 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellContainerSkeletonLoader.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellSkeletonLoader.tsx @@ -7,7 +7,7 @@ const StyledSkeletonContainer = styled.div` padding-right: ${({ theme }) => theme.spacing(1)}; `; -const StyledRecordTableCellContainerLoader = ({ +const StyledRecordTableCellLoader = ({ skeletonWidth = 132, }: { skeletonWidth?: number; @@ -24,14 +24,14 @@ const StyledRecordTableCellContainerLoader = ({ ); }; -export const RecordTableCellContainerSkeletonLoader = ({ +export const RecordTableCellSkeletonLoader = ({ skeletonWidth, }: { skeletonWidth?: number; }) => { return ( - + ); }; From aabf6b555d3237c052f756eb9c6701a40599ac66 Mon Sep 17 00:00:00 2001 From: gitstart-twenty Date: Tue, 18 Jun 2024 11:04:35 +0000 Subject: [PATCH 6/8] Merge main Co-authored-by: v1b3m Co-authored-by: Matheus --- .../record-table/components/RecordTableBodyLoading.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBodyLoading.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBodyLoading.tsx index ed9ea59bb181..92e68ab1d83a 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBodyLoading.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBodyLoading.tsx @@ -19,7 +19,7 @@ export const RecordTableBodyLoading = () => { - {visibleTableColumns.map((column, columnIndex) => ( + {visibleTableColumns.map((column) => ( Date: Tue, 18 Jun 2024 14:27:25 +0000 Subject: [PATCH 7/8] Refactor according to review Co-authored-by: v1b3m Co-authored-by: Matheus --- .../components/RecordTableBodyLoading.tsx | 19 ++++++++++++++----- .../components/RecordTableRow.tsx | 4 ++-- .../components/RecordTableCellLoading.tsx | 7 ++++--- .../RecordTableCellSkeletonLoader.tsx | 6 +++--- 4 files changed, 23 insertions(+), 13 deletions(-) diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBodyLoading.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBodyLoading.tsx index 92e68ab1d83a..b609e713eefe 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBodyLoading.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBodyLoading.tsx @@ -1,6 +1,11 @@ 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'; @@ -12,22 +17,26 @@ export const RecordTableBodyLoading = () => { return ( {Array.from({ length: 8 }).map((_, rowIndex) => ( - - + + + + - + {visibleTableColumns.map((column) => ( ))} - + ))} ); diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableRow.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableRow.tsx index 5ec7e8ff4269..7fc7160e0b74 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableRow.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableRow.tsx @@ -23,12 +23,12 @@ type RecordTableRowProps = { isPendingRow?: boolean; }; -const StyledTd = styled.td` +export const StyledTd = styled.td` position: relative; user-select: none; `; -const StyledTr = styled.tr<{ isDragging: boolean }>` +export const StyledTr = styled.tr<{ isDragging: boolean }>` border: 1px solid transparent; transition: border-left-color 0.2s ease-in-out; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellLoading.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellLoading.tsx index 709d83ae6b06..c233e8bc20e6 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellLoading.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellLoading.tsx @@ -1,13 +1,14 @@ +import { StyledTd } from '@/object-record/record-table/components/RecordTableRow'; import { RecordTableCellSkeletonLoader } from '@/object-record/record-table/record-table-cell/components/RecordTableCellSkeletonLoader'; export const RecordTableCellLoading = ({ skeletonWidth, }: { - skeletonWidth?: number; + skeletonWidth: number; }) => { return ( - + - + ); }; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellSkeletonLoader.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellSkeletonLoader.tsx index ceae9072716d..c2ae63b225b6 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellSkeletonLoader.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellSkeletonLoader.tsx @@ -8,9 +8,9 @@ const StyledSkeletonContainer = styled.div` `; const StyledRecordTableCellLoader = ({ - skeletonWidth = 132, + skeletonWidth, }: { - skeletonWidth?: number; + skeletonWidth: number; }) => { const theme = useTheme(); return ( @@ -27,7 +27,7 @@ const StyledRecordTableCellLoader = ({ export const RecordTableCellSkeletonLoader = ({ skeletonWidth, }: { - skeletonWidth?: number; + skeletonWidth: number; }) => { return ( From 3614b81d3524f81ced1616bd756df137997287fc Mon Sep 17 00:00:00 2001 From: Lucas Bordeau Date: Wed, 19 Jun 2024 15:23:52 +0200 Subject: [PATCH 8/8] Fixes --- ...BoardColumnCardContainerSkeletonLoader.tsx | 10 ++++--- .../RecordBoardColumnCardsContainer.tsx | 27 ++++++++++--------- ...umberOfCardsPerColumnForSkeletonLoading.ts | 13 +++++++++ .../components/RecordTableBodyLoading.tsx | 8 +----- .../components/RecordTableCellLoading.tsx | 8 ++---- .../RecordTableCellSkeletonLoader.tsx | 16 +++-------- 6 files changed, 41 insertions(+), 41 deletions(-) create mode 100644 packages/twenty-front/src/modules/object-record/record-board/record-board-column/utils/getNumberOfCardsPerColumnForSkeletonLoading.ts diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnCardContainerSkeletonLoader.tsx b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnCardContainerSkeletonLoader.tsx index 7588e4516e2c..4aeafd96f1fd 100644 --- a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnCardContainerSkeletonLoader.tsx +++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnCardContainerSkeletonLoader.tsx @@ -21,16 +21,20 @@ const StyledSeparator = styled.div` `; export const RecordBoardColumnCardContainerSkeletonLoader = ({ + numberOfFields, titleSkeletonWidth, isCompactModeActive, }: { + numberOfFields: number; titleSkeletonWidth: number; isCompactModeActive: boolean; }) => { const theme = useTheme(); - const skeletonItems = Array.from({ length: 6 }).map((_, index) => ({ - id: `skeleton-item-${index}`, - })); + const skeletonItems = Array.from({ length: numberOfFields }).map( + (_, index) => ({ + id: `skeleton-item-${index}`, + }), + ); return ( { - const skeletonCounts: Record = { - 0: 2, - 1: 1, - 2: 3, - 3: 0, - 4: 1, - }; + const numberOfFields = visibleFieldDefinitions.length; - return skeletonCounts[position] || 0; - }; + const isCompactModeActive = useRecoilValue(isCompactModeActiveState); return ( {isRecordIndexBoardColumnLoading ? ( Array.from( - { length: getNumberOfSkeletons(columnDefinition.position) }, + { + length: getNumberOfCardsPerColumnForSkeletonLoading( + columnDefinition.position, + ), + }, (_, index) => ( diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/utils/getNumberOfCardsPerColumnForSkeletonLoading.ts b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/utils/getNumberOfCardsPerColumnForSkeletonLoading.ts new file mode 100644 index 000000000000..1f6fc58aaa95 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/utils/getNumberOfCardsPerColumnForSkeletonLoading.ts @@ -0,0 +1,13 @@ +export const getNumberOfCardsPerColumnForSkeletonLoading = ( + columnIndex: number, +): number => { + const skeletonCounts: Record = { + 0: 2, + 1: 1, + 2: 3, + 3: 0, + 4: 1, + }; + + return skeletonCounts[columnIndex] || 0; +}; diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBodyLoading.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBodyLoading.tsx index b609e713eefe..d8df4058b784 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBodyLoading.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBodyLoading.tsx @@ -12,7 +12,6 @@ import { RecordTableCellLoading } from '@/object-record/record-table/record-tabl export const RecordTableBodyLoading = () => { const { visibleTableColumnsSelector } = useRecordTableStates(); const visibleTableColumns = useRecoilValue(visibleTableColumnsSelector()); - const skeletonColumnsWithSmallWidth = ['Domain Name', 'ICP', 'ARR', 'X']; return ( @@ -29,12 +28,7 @@ export const RecordTableBodyLoading = () => { {visibleTableColumns.map((column) => ( - + ))} ))} diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellLoading.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellLoading.tsx index c233e8bc20e6..12050e5b6740 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellLoading.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellLoading.tsx @@ -1,14 +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 = ({ - skeletonWidth, -}: { - skeletonWidth: number; -}) => { +export const RecordTableCellLoading = () => { return ( - + ); }; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellSkeletonLoader.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellSkeletonLoader.tsx index c2ae63b225b6..b010bdaecd6d 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellSkeletonLoader.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellSkeletonLoader.tsx @@ -7,11 +7,7 @@ const StyledSkeletonContainer = styled.div` padding-right: ${({ theme }) => theme.spacing(1)}; `; -const StyledRecordTableCellLoader = ({ - skeletonWidth, -}: { - skeletonWidth: number; -}) => { +const StyledRecordTableCellLoader = ({ width }: { width?: number }) => { const theme = useTheme(); return ( - + ); }; -export const RecordTableCellSkeletonLoader = ({ - skeletonWidth, -}: { - skeletonWidth: number; -}) => { +export const RecordTableCellSkeletonLoader = () => { return ( - + ); };