diff --git a/apps/widget/src/components/Common/Table/Table.tsx b/apps/widget/src/components/Common/Table/Table.tsx index e51e8f9f..c68e8378 100644 --- a/apps/widget/src/components/Common/Table/Table.tsx +++ b/apps/widget/src/components/Common/Table/Table.tsx @@ -164,6 +164,7 @@ interface TableProps { width?: string | number; selectEnabled?: boolean; afterRender?: () => void; + beforePaste?: () => void; columnDefs: HotItemSchema[]; data?: Record[]; columnDescriptions?: string[]; @@ -181,6 +182,7 @@ export const Table = forwardRef( headings, columnDefs, data, + beforePaste, columnDescriptions, allChecked, onRowCheck, @@ -278,6 +280,7 @@ export const Table = forwardRef( columns={columnDefs} colHeaders={headings} rowHeaders={rowHeaders} + beforePaste={beforePaste} afterRender={afterRender} minSpareRows={minSpareRows} fixedColumnsLeft={frozenColumns} diff --git a/apps/widget/src/components/widget/Phases/ManualEntryImport/DataGrid.tsx b/apps/widget/src/components/widget/Phases/ManualEntryImport/DataGrid.tsx index 3a790907..f741904f 100644 --- a/apps/widget/src/components/widget/Phases/ManualEntryImport/DataGrid.tsx +++ b/apps/widget/src/components/widget/Phases/ManualEntryImport/DataGrid.tsx @@ -8,6 +8,7 @@ import { MANUAL_ENTRY_LIMIT } from '@config'; import { WIDGET_TEXTS } from '@impler/client'; import { Table } from 'components/Common/Table'; import { Footer } from 'components/Common/Footer'; +import { LoadingOverlay } from '@ui/LoadingOverlay'; import { SegmentedControl } from '@ui/SegmentedControl'; import { useDataGrid } from '@hooks/DataGrid/useDataGrid'; import { useCompleteImport } from '@hooks/useCompleteImport'; @@ -39,8 +40,15 @@ export function DataGrid({ onNextClick, onPrevClick, texts }: IPhase12Props) { isReviewDataLoading, showFindReplaceModal, setShowFindReplaceModal, + isTemplateColumnsLoading, } = useDataGrid({ limit: MANUAL_ENTRY_LIMIT }); - const { updateRecord } = useBatchedUpdateRecord({ onUpdate: reReviewData }); + const [isPasteLoading, setIsPasteLoading] = useState(false); + const { updateRecord } = useBatchedUpdateRecord({ + onUpdate: () => { + reReviewData(); + setIsPasteLoading(false); + }, + }); const tableWrapperRef = useRef() as React.MutableRefObject; const { completeImport, isCompleteImportLoading } = useCompleteImport({ onNext: onNextClick }); const [tableWrapperDimensions, setTableWrapperDimentions] = useState({ @@ -57,6 +65,8 @@ export function DataGrid({ onNextClick, onPrevClick, texts }: IPhase12Props) { return ( <> + + setIsPasteLoading(true)} onValueChange={(row, prop, oldVal, newVal) => { const name = String(prop).replace('record.', ''); diff --git a/apps/widget/src/hooks/DataGrid/useDataGrid.ts b/apps/widget/src/hooks/DataGrid/useDataGrid.ts index b959860f..cd617c4b 100644 --- a/apps/widget/src/hooks/DataGrid/useDataGrid.ts +++ b/apps/widget/src/hooks/DataGrid/useDataGrid.ts @@ -53,10 +53,12 @@ export function useDataGrid({ limit }: IDataGridProps) { ] ); - const { data: templateColumns } = useQuery( - [`columns:${uploadInfo._id}`, uploadInfo._id], - () => api.getColumns(uploadInfo._id) - ); + const { data: templateColumns, isLoading: isTemplateColumnsLoading } = useQuery< + unknown, + IErrorObject, + IColumn[], + [string, string] + >([`columns:${uploadInfo._id}`, uploadInfo._id], () => api.getColumns(uploadInfo._id)); const { mutate: refetchReviewData, isLoading: isReviewDataLoading } = useMutation< IReviewData, @@ -180,6 +182,7 @@ export function useDataGrid({ limit }: IDataGridProps) { isReviewDataLoading, showFindReplaceModal, setShowFindReplaceModal, + isTemplateColumnsLoading, totalRecords: uploadInfo.totalRecords ?? undefined, invalidRecords: uploadInfo.invalidRecords ?? undefined, };