feat: Added Loader to Manual Entry Grid while pasting

implerhq · Oct 4, 2024 · a75c058 · a75c058
1 parent 634d22d
commit a75c058
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 5 deletions.
diff --git 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<string, any>[];
   columnDescriptions?: string[];
@@ -181,6 +182,7 @@ export const Table = forwardRef<HotTableClass, TableProps>(
       headings,
       columnDefs,
       data,
+      beforePaste,
       columnDescriptions,
       allChecked,
       onRowCheck,
@@ -278,6 +280,7 @@ export const Table = forwardRef<HotTableClass, TableProps>(
         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
@@ -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<boolean>(false);
+  const { updateRecord } = useBatchedUpdateRecord({
+    onUpdate: () => {
+      reReviewData();
+      setIsPasteLoading(false);
+    },
+  });
   const tableWrapperRef = useRef<HTMLDivElement>() as React.MutableRefObject<HTMLDivElement>;
   const { completeImport, isCompleteImportLoading } = useCompleteImport({ onNext: onNextClick });
   const [tableWrapperDimensions, setTableWrapperDimentions] = useState({
@@ -57,6 +65,8 @@ export function DataGrid({ onNextClick, onPrevClick, texts }: IPhase12Props) {
 
   return (
     <>
+      <LoadingOverlay visible={isTemplateColumnsLoading || isPasteLoading} />
+
       <Stack ref={tableWrapperRef} style={{ flexGrow: 1 }} spacing="xs" align="flex-start">
         <Flex direction="row" justify="space-between" w="100%">
           <SegmentedControl
@@ -95,6 +105,7 @@ export function DataGrid({ onNextClick, onPrevClick, texts }: IPhase12Props) {
           headings={headings}
           selectEnabled={false}
           columnDefs={columnDefs}
+          beforePaste={() => 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
@@ -53,10 +53,12 @@ export function useDataGrid({ limit }: IDataGridProps) {
         ]
   );
 
-  const { data: templateColumns } = useQuery<unknown, IErrorObject, IColumn[], [string, string]>(
-    [`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,
   };