fuse-importer 0.26.8 → 0.27.0

package/lib/esm/Importer/ImporterWithContext.js

@@ -32,6 +32,7 @@ import { Footer } from "./common/Footer";
 import { GlobalStyle } from "./common/GlobalStyle";
 import { ImporterFonts } from "./common/ImporterFonts";
 import { useImporterContext } from "./contexts/ImporterContextProvider";
+import { AppLoadingContextProvider } from "../common/AppLoadingContextProvider";
 export var Layout = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: ", ";\n  display: flex;\n  flex-direction: column;\n  height: 100vh;\n  left: 0;\n  overflow-y: auto;\n  position: fixed;\n  top: 0;\n  width: 100vw;\n  z-index: ", ";\n  ", ";\n"], ["\n  background: ", ";\n  display: flex;\n  flex-direction: column;\n  height: 100vh;\n  left: 0;\n  overflow-y: auto;\n  position: fixed;\n  top: 0;\n  width: 100vw;\n  z-index: ", ";\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.colors.backgroundInterface;
@@ -57,6 +58,6 @@ export var ImporterWithContext = function () {
         return (_jsxs(_Fragment, { children: [_jsxs(Div, { children: [previewMode && _jsx(PreviewModeBanner, {}), !previewMode && _jsx(TrialModeBanner, {}), _jsx(Stepper, { stepLabels: stepLabels, logoURL: logoURL })] }), _jsxs(Content, { children: [currentStepIndex === 0 && _jsx(Uploader, {}), currentStepIndex === 1 && _jsx(Matcher, {}), currentStepIndex === 2 && templateHeaders && _jsx(Review, {})] }), inTrialMode && (_jsx(Content, __assign({ inTrialMode: inTrialMode }, { children: _jsx(Footer, {}) })))] }));
     }
     var shouldShowPreviewFirstTime = previewFirstTime && previewMode;
-    return (_jsxs(ThemeProvider, __assign({ theme: theme }, { children: [_jsx(Toast, {}), _jsx(GlobalStyle, {}), _jsx(ImporterFonts, {}), templateHeaders ? (_jsx(ReviewContextProvider, __assign({ initialRecords: initialRecords }, { children: _jsx(Layout, __assign({ zIndex: zIndex, ref: layoutRef }, { children: shouldShowPreviewFirstTime ? (_jsx(PreviewFirstTime, {})) : (renderContent()) })) }))) : (_jsx(AppLoading, {}))] })));
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsxs(AppLoadingContextProvider, { children: [_jsx(Toast, {}), _jsx(GlobalStyle, {}), _jsx(ImporterFonts, {}), templateHeaders ? (_jsx(ReviewContextProvider, __assign({ initialRecords: initialRecords }, { children: _jsx(Layout, __assign({ zIndex: zIndex, ref: layoutRef }, { children: shouldShowPreviewFirstTime ? (_jsx(PreviewFirstTime, {})) : (renderContent()) })) }))) : (_jsx(AppLoading, {}))] }) })));
 };
 var templateObject_1, templateObject_2, templateObject_3;

package/lib/esm/Importer/Review/ReviewContextProvider.d.ts

@@ -13,6 +13,7 @@ type State = {
         batchValidationDelayMs: number;
         batchValidationSize: number;
     };
+    initialDataSetUpdatedAt: number;
     onValidateRecord: OnValidateRecord;
     onDataSetChanged: OnDataSetChanged;
     onValidationStateChanged: OnValidationStateChanged;

package/lib/esm/Importer/Review/ReviewContextProvider.js

@@ -67,13 +67,14 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from "react";
-import { utils, writeFile } from "xlsx";
+import Papa from "papaparse";
 import { AppLoading } from "../common/AppLoading";
 import { isRecordEmpty } from "../common/Spreadsheet/common";
 import { sendRecordsToIntegrations } from "../common/utils";
 import { useImporterContext } from "../contexts/ImporterContextProvider";
 import { transformToRecords } from "../data/index";
 import { getPreviewDataSet, getReviewDataSet, getTemplateFields, recordListToDataSet, } from "../data";
+import { useAppLoadingContext } from "../../common/AppLoadingContextProvider";
 var ReviewContext = createContext({});
 var trackImportedRowsCount = function (fuseApi, templateSlug, rowCount) { return __awaiter(void 0, void 0, void 0, function () {
     var error_1, errorMessage;
@@ -107,6 +108,15 @@ var filterAndMapWithBackendErrors = function (dataSet, errors) {
         return __assign(__assign({}, record), { _meta: __assign(__assign({}, meta), { isInvalid: true, backendErrors: errors[rId] }) });
     }, []);
 };
+function downloadCsv(data, fileName) {
+    var blob = new Blob([data], { type: "text/csv;charset=utf-8;" });
+    var link = document.createElement("a");
+    link.href = URL.createObjectURL(blob);
+    link.download = fileName;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+}
 function csvExport(data) {
     var valuesWithQuotesWhenNecessary = data.map(function (obj) {
         var newObj = {};
@@ -117,15 +127,13 @@ function csvExport(data) {
         }
         return newObj;
     });
-    var worksheet = utils.json_to_sheet(valuesWithQuotesWhenNecessary);
-    var workbook = utils.book_new();
-    utils.book_append_sheet(workbook, worksheet, "Data");
-    utils.sheet_to_csv(worksheet);
-    writeFile(workbook, "export.csv");
+    var csv = Papa.unparse(valuesWithQuotesWhenNecessary);
+    downloadCsv(csv, "export.csv");
 }
 export var ReviewContextProvider = function (_a) {
     var initialRecords = _a.initialRecords, children = _a.children;
     var _b = useImporterContext(), templateHeaderMatchings = _b.templateHeaderMatchings, enumFieldValueMatchings = _b.enumFieldValueMatchings, templateHeaders = _b.templateHeaders, uploadedDataHeaders = _b.uploadedDataHeaders, headerRowIndex = _b.headerRowIndex, uploadedData = _b.uploadedData, currentStepIndex = _b.currentStepIndex, integrations = _b.integrations, templateSlug = _b.templateSlug, fuseApi = _b.fuseApi, setSelectedRows = _b.setSelectedRows, _c = _b.importerOptions, disableSubmitIfInvalid = _c.disableSubmitIfInvalid, batchValidationDelayMs = _c.batchValidationDelayMs, batchValidationSize = _c.batchValidationSize, previewMode = _c.previewMode, loadingComponent = _c.loadingComponent, onSubmit = _b.onSubmit, onValidateRecord = _b.onValidateRecord, formatRecord = _b.formatRecord, selectedRows = _b.selectedRows;
+    var setIsLoadingApp = useAppLoadingContext().setIsLoadingApp;
     var _d = useState(false), isSubmitting = _d[0], setIsSubmitting = _d[1];
     var _e = useState(false), isSubmitDisabled = _e[0], setIsSubmitDisabled = _e[1];
     var _f = useState(false), importWasSuccessful = _f[0], setImportWasSuccessful = _f[1];
@@ -134,6 +142,7 @@ export var ReviewContextProvider = function (_a) {
     var _j = useState(null), previewInitialDataSet = _j[0], setPreviewInitialDataSet = _j[1];
     var _k = useState([]), reviewFields = _k[0], setReviewFields = _k[1];
     var _l = useState(null), reviewInitialDataSet = _l[0], setReviewInitialDataSet = _l[1];
+    var _m = useState(null), initialDataSetUpdatedAt = _m[0], setInitialDataSetUpdatedAt = _m[1];
     useEffect(function () {
         if (currentStepIndex === 1)
             setReviewInitialDataSet(null);
@@ -232,31 +241,53 @@ export var ReviewContextProvider = function (_a) {
             reviewDataSetRef.current = null;
             return;
         }
+        var sleep = function (n) { return new Promise(function (resolve) { return setTimeout(resolve, n); }); };
         if (currentStepIndex === 0) {
-            //Uploader spreadsheet data
-            var _a = getPreviewDataSet({ uploadedData: uploadedData }), fields = _a.fields, initialDataSet = _a.initialDataSet;
-            setPreviewFields(fields);
-            setPreviewInitialDataSet(initialDataSet);
+            if (!previewInitialDataSet) {
+                //Uploader spreadsheet data
+                var _a = getPreviewDataSet({ uploadedData: uploadedData }), fields = _a.fields, initialDataSet = _a.initialDataSet;
+                setPreviewFields(fields);
+                setPreviewInitialDataSet(initialDataSet);
+            }
         }
         else if (currentStepIndex === 2) {
-            var fields = getTemplateFields({ templateHeaders: templateHeaders });
-            //Review spreadsheet data
-            var _records = initialRecords ||
-                transformToRecords({
-                    templateHeaderMatchings: templateHeaderMatchings,
-                    enumFieldValueMatchings: enumFieldValueMatchings,
-                    templateHeaders: templateHeaders,
-                    uploadedDataHeaders: uploadedDataHeaders,
-                    uploadedData: uploadedData.slice(headerRowIndex + 1),
-                    formatRecord: formatRecord,
+            setIsLoadingApp(true);
+            (function () { return __awaiter(void 0, void 0, void 0, function () {
+                var fields, _records, initialDataSet;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            if (!(uploadedData.length > 10000)) return [3 /*break*/, 2];
+                            // wait for the first render to complete before blocking main thread with review step logic
+                            return [4 /*yield*/, sleep(200)];
+                        case 1:
+                            // wait for the first render to complete before blocking main thread with review step logic
+                            _a.sent();
+                            _a.label = 2;
+                        case 2:
+                            fields = getTemplateFields({ templateHeaders: templateHeaders });
+                            _records = initialRecords ||
+                                transformToRecords({
+                                    templateHeaderMatchings: templateHeaderMatchings,
+                                    enumFieldValueMatchings: enumFieldValueMatchings,
+                                    templateHeaders: templateHeaders,
+                                    uploadedDataHeaders: uploadedDataHeaders,
+                                    uploadedData: uploadedData.slice(headerRowIndex + 1),
+                                    formatRecord: formatRecord,
+                                });
+                            initialDataSet = getReviewDataSet({
+                                records: _records,
+                                fields: fields,
+                            }).initialDataSet;
+                            setSelectedRows([]);
+                            setReviewFields(fields);
+                            setReviewInitialDataSet(initialDataSet);
+                            setInitialDataSetUpdatedAt(Date.now());
+                            setIsLoadingApp(false);
+                            return [2 /*return*/];
+                    }
                 });
-            var initialDataSet = getReviewDataSet({
-                records: _records,
-                fields: fields,
-            }).initialDataSet;
-            setSelectedRows([]);
-            setReviewFields(fields);
-            setReviewInitialDataSet(initialDataSet);
+            }); })();
         }
     }, [uploadedData, currentStepIndex, templateHeaders, uploadedData]);
     var value = {
@@ -269,6 +300,7 @@ export var ReviewContextProvider = function (_a) {
         appResponse: appResponse,
         isSubmitting: isSubmitting,
         options: options,
+        initialDataSetUpdatedAt: initialDataSetUpdatedAt,
         onSubmit: onSubmitData,
         onExport: onExport,
         onValidateRecord: onValidateRecord,

package/lib/esm/Importer/Review/ReviewWithContext.js

@@ -23,10 +23,10 @@ import { AppResponseModal } from "./AppResponseModal";
 import { useReviewContext } from "./ReviewContextProvider";
 var TitleContainer = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
 var ReviewWithContext = function () {
-    var _a = useReviewContext(), fields = _a.reviewFields, initialDataSet = _a.reviewInitialDataSet, options = _a.options, onValidateRecord = _a.onValidateRecord, onDataSetChanged = _a.onDataSetChanged, onValidationStateChanged = _a.onValidationStateChanged;
+    var _a = useReviewContext(), fields = _a.reviewFields, initialDataSet = _a.reviewInitialDataSet, options = _a.options, initialDataSetUpdatedAt = _a.initialDataSetUpdatedAt, onValidateRecord = _a.onValidateRecord, onDataSetChanged = _a.onDataSetChanged, onValidationStateChanged = _a.onValidationStateChanged;
     var _b = useImporterContext(), selectedRows = _b.selectedRows, setSelectedRows = _b.setSelectedRows, isUsingManualImport = _b.isUsingManualImport;
     var t = useTranslation("review").t;
-    var spreadsheetUI = initialDataSet && (_jsx(Spreadsheet, { options: __assign(__assign({}, options), { showCheckboxColumn: true }), selectedRows: selectedRows, setSelectedRows: setSelectedRows, initialDataSet: initialDataSet, fields: fields, onDataSetChanged: onDataSetChanged, onValidateRecord: onValidateRecord, onValidationStateChanged: onValidationStateChanged }));
+    var spreadsheetUI = initialDataSet && (_jsx(Spreadsheet, { initialDataSetUpdatedAt: initialDataSetUpdatedAt, options: __assign(__assign({}, options), { showCheckboxColumn: true }), selectedRows: selectedRows, setSelectedRows: setSelectedRows, initialDataSet: initialDataSet, fields: fields, onDataSetChanged: onDataSetChanged, onValidateRecord: onValidateRecord, onValidationStateChanged: onValidationStateChanged }));
     return (_jsxs(Div, __assign({ centered: true, flexColumn: true, h100: true }, { children: [_jsx(AppResponseModal, {}), _jsxs(Div, __assign({ w100: true, h100: true, flexColumn: true }, { children: [_jsx(TitleContainer, __assign({ flexColumn: true, ml: 32 }, { children: _jsx(Div, __assign({ h2: true, mt: 40, mb: 40 }, { children: t(isUsingManualImport.current ? "manual_importer_title" : "title") })) })), _jsx(Div, __assign({ h100: true, w100: true, justifyCenter: true }, { children: spreadsheetUI }))] }))] })));
 };
 export default ReviewWithContext;

package/lib/esm/Importer/Uploader/DragAndDropImporter/ImporterDropzone.js

@@ -16,7 +16,6 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useDropzone } from "react-dropzone";
 import styled, { css } from "styled-components";
-import * as XLSX from "xlsx";
 import { useUploaderContext } from "../UploaderContextProvider";
 import { useImporterContext } from "../../contexts/ImporterContextProvider";
 import { Div } from "../../../styled/utils";
@@ -25,6 +24,7 @@ import { addToast } from "../../../common/Toast";
 import { Button } from "../../../common/buttons";
 import { DragAndDropSvg, UploadIndicatorSvg } from "./backgrounds";
 import { useTranslation } from "react-i18next";
+import Papa from "papaparse";
 var DragAndDropCard = styled(Div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: 8px;\n  margin-right: ", ";\n  width: 100%;\n  height: 100%;\n  display: flex;\n  background: ", ";\n  border: 1px dashed ", ";\n\n  @media (max-width: 1050px) {\n    padding: 24px;\n    width: auto;\n  }\n\n  ", "\n"], ["\n  border-radius: 8px;\n  margin-right: ", ";\n  width: 100%;\n  height: 100%;\n  display: flex;\n  background: ", ";\n  border: 1px dashed ", ";\n\n  @media (max-width: 1050px) {\n    padding: 24px;\n    width: auto;\n  }\n\n  ", "\n"])), function (props) { return (props.isDragActive ? "-10px" : "revert"); }, theme.colors.white, theme.colors.red50, function (props) {
     return props.isDragActive && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      background: ", ";\n      border: 1px solid ", ";\n      justify-content: center;\n    "], ["\n      background: ", ";\n      border: 1px solid ", ";\n      justify-content: center;\n    "])), function (p) { return p.theme.colors.blue100; }, function (p) { return p.theme.colors.blue500; });
 });
@@ -63,14 +63,11 @@ var ImporterDropzone = function () {
                 var _a;
                 var results = event.target.result;
                 var getDataFromFile = function (fileResults) {
-                    var workBook = XLSX.read(fileResults, {
-                        type: "array",
-                        codepage: 65001,
-                        raw: true,
-                    });
-                    var workBookName = workBook.SheetNames[0];
-                    var sheet = workBook.Sheets[workBookName];
-                    return XLSX.utils.sheet_to_json(sheet, { header: 1, raw: false });
+                    var csvString = new TextDecoder().decode(fileResults instanceof ArrayBuffer
+                        ? fileResults
+                        : new TextEncoder().encode(fileResults));
+                    var data = Papa.parse(csvString).data;
+                    return data;
                 };
                 var fileData = getDataFromFile(results);
                 var headersCount = (_a = fileData[0]) === null || _a === void 0 ? void 0 : _a.length;
@@ -85,7 +82,7 @@ var ImporterDropzone = function () {
     var onDropRejected = function (rejectedFiles) {
         var errorMessages = rejectedFiles.map(function (file) {
             if (file.errors[0].code === "file-too-large") {
-                return "Maximum file size is 10MB";
+                return "Maximum file size is 200MB";
             }
             else {
                 return file.errors[0].message;
@@ -101,9 +98,9 @@ var ImporterDropzone = function () {
         onDropRejected: onDropRejected,
         noClick: true,
         noKeyboard: true,
-        accept: ".csv, .tsv, .xls, .xlsx",
+        accept: ".csv",
         maxFiles: 1,
-        maxSize: 10000000,
+        maxSize: 200000000, // 200MB
     }), getRootProps = _b.getRootProps, getInputProps = _b.getInputProps, open = _b.open, isDragActive = _b.isDragActive;
     return (_jsxs(DragAndDropCard, __assign({ isDragActive: isDragActive, centered: true, pRelative: true }, getRootProps(), { children: [_jsx("input", __assign({}, getInputProps())), isDragActive && dropzoneUploadingUI, _jsx(DragAndDropComponent, { openUploadFileDialog: open })] })));
 };

package/lib/esm/Importer/common/Spreadsheet/SpreadsheetContextProvider/filterMethods.js

@@ -1,14 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 //Filter records by search value
 export var filterRecordsBySearchValue = function (obj, value) {
     var isObject = function (value) {
@@ -38,6 +27,7 @@ export var filterRecordsBySearchValue = function (obj, value) {
     return filteredObj;
 };
 export var filterRecordsByType = function (obj, filterType) {
+    var _a, _b;
     var rowIsEmpty = function (row) {
         return Object.keys(row).every(function (key) {
             if (key === "_meta")
@@ -45,16 +35,15 @@ export var filterRecordsByType = function (obj, filterType) {
             return !row[key];
         });
     };
-    var filteredKeys = Object.keys(obj).filter(function (key) {
-        var _a, _b;
-        return filterType === "all" ||
+    var filteredObj = {};
+    for (var key in obj) {
+        if (filterType === "all" ||
             (((_b = (_a = obj[key]) === null || _a === void 0 ? void 0 : _a._meta) === null || _b === void 0 ? void 0 : _b.isInvalid) !== (filterType === "valid") &&
-                !rowIsEmpty(obj[key]));
-    });
-    return filteredKeys.reduce(function (acc, key) {
-        var _a;
-        return (__assign(__assign({}, acc), (_a = {}, _a[key] = obj[key], _a)));
-    }, {});
+                !rowIsEmpty(obj[key]))) {
+            filteredObj[key] = obj[key];
+        }
+    }
+    return filteredObj;
 };
 //Filter records by selected column error
 export var filterRecordsByError = function (obj, keyToFilter, errors) {

package/lib/esm/Importer/common/Spreadsheet/SpreadsheetContextProvider/index.js

@@ -66,7 +66,11 @@ export var SpreadsheetContextProvider = function (_a) {
     }), updateRecordAndRevalidate = _k.updateRecordAndRevalidate, deleteRecords = _k.deleteRecords, warnings = _k.warnings, errors = _k.errors, validationState = __rest(_k, ["updateRecordAndRevalidate", "deleteRecords", "warnings", "errors"]);
     var addNewRowsToSpreadsheet = function () {
         addRowTimeoutRef.current = setTimeout(function () {
-            var highestRowIndex = Math.max.apply(Math, Object.values(dataSet).map(function (obj) { return obj._meta.rowIndex; }));
+            var _a, _b;
+            var highestRowIndex = -1;
+            for (var key in dataSet)
+                if (((_b = (_a = dataSet[key]) === null || _a === void 0 ? void 0 : _a._meta) === null || _b === void 0 ? void 0 : _b.rowIndex) > highestRowIndex)
+                    highestRowIndex = dataSet[key]._meta.rowIndex;
             var newRow = addMeta({}, highestRowIndex + 1);
             setDataSet(function (oldValues) {
                 var _a;
@@ -132,6 +136,10 @@ export var SpreadsheetContextProvider = function (_a) {
             addNewRowsToSpreadsheet();
         }
     }, [dataSet]);
+    // Review this later, this probably isn't the best approach
+    useEffect(function () {
+        setDataSet(initialDataSet);
+    }, [initialDataSet]);
     useEffect(function () {
         onValidationStateChanged &&
             onValidationStateChanged(__assign(__assign({}, validationState), { errors: errors, warnings: warnings }));

package/lib/esm/Importer/common/Spreadsheet/common/types.d.ts

@@ -11,6 +11,7 @@ export type SortBy = {
     direction: SortOrder;
 };
 export type SpreadsheetProps = {
+    initialDataSetUpdatedAt?: number;
     initialDataSet: RecordDataSet;
     isReadOnly?: boolean;
     fields?: Field[];

package/lib/esm/Importer/common/Spreadsheet/hooks.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import { SpreadsheetOptions } from "../../..";
-import { BatchValidationErrors, Field, OnValidateRecord, Record, RecordDataSet } from "../../../types";
 import { DeleteRecords } from "../../../common/Table/TableActions/hooks";
+import { BatchValidationErrors, Field, OnValidateRecord, Record, RecordDataSet } from "../../../types";
 type UseValidationStateArgs = {
     onValidateRecord?: OnValidateRecord;
     setDataSet: React.Dispatch<React.SetStateAction<RecordDataSet>>;

package/lib/esm/Importer/common/Spreadsheet/hooks.js

@@ -46,10 +46,10 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     }
 };
 import { omit, set } from "lodash";
-import { useCallback, useEffect, useMemo, useState, } from "react";
-import { sleep } from "../../..";
-import { selectValidatorsFor, validateRecord } from "./validation";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { useTableActions, } from "../../../common/Table/TableActions/hooks";
+import { selectValidatorsFor, validateRecord } from "./validation";
+import { useAppLoadingContext } from "../../../common/AppLoadingContextProvider";
 var checkIfHasErrors = function (errors) {
     return errors && Object.keys(errors).length > 0;
 };
@@ -61,6 +61,7 @@ export var useValidationState = function (_a) {
     var _c = useState({}), warnings = _c[0], setWarnings = _c[1];
     var _d = useState(0), validationPercentage = _d[0], setValidationPercentage = _d[1];
     var validatorsCache = useMemo(function () { return selectValidatorsFor(fields); }, [fields]);
+    var setIsLoadingApp = useAppLoadingContext().setIsLoadingApp;
     var deleteRecords = useTableActions({
         setDataSet: setDataSet,
         setErrors: setErrors,
@@ -112,7 +113,7 @@ export var useValidationState = function (_a) {
     }); }, [dataSet, validatorsCache]);
     // Initial data validation and update dataSet
     useEffect(function () {
-        if (isReadOnly)
+        if (!initialDataSet || isReadOnly)
             return;
         var isCancelled = false;
         setIsLoading(true);
@@ -125,7 +126,7 @@ export var useValidationState = function (_a) {
                         warnings = {};
                         initialData = Object.values(initialDataSet);
                         length = initialData.length;
-                        _a = options.batchValidationDelayMs, batchValidationDelayMs = _a === void 0 ? 400 : _a, _b = options.batchValidationSize, batchValidationSize = _b === void 0 ? 1000 : _b;
+                        _a = options.batchValidationDelayMs, batchValidationDelayMs = _a === void 0 ? 400 : _a, _b = options.batchValidationSize, batchValidationSize = _b === void 0 ? length : _b;
                         batchSize = Math.min(Math.floor(batchValidationSize), length) || length;
                         batchCount = Math.ceil(length / batchSize);
                         batchIdx = 0;
@@ -182,10 +183,29 @@ export var useValidationState = function (_a) {
                 }
             });
         }); };
-        initialValidation().then(function () {
-            if (!isCancelled)
-                setIsLoading(false);
-        }, console.error);
+        var sleep = function (n) { return new Promise(function (resolve) { return setTimeout(resolve, n); }); };
+        (function () { return __awaiter(void 0, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        setIsLoadingApp(true);
+                        if (!(Object.values(initialDataSet).length > 10000)) return [3 /*break*/, 2];
+                        // wait for the first render to complete before blocking main thread with review step logic
+                        return [4 /*yield*/, sleep(200)];
+                    case 1:
+                        // wait for the first render to complete before blocking main thread with review step logic
+                        _a.sent();
+                        _a.label = 2;
+                    case 2: return [4 /*yield*/, initialValidation()];
+                    case 3:
+                        _a.sent();
+                        if (!isCancelled)
+                            setIsLoading(false);
+                        setIsLoadingApp(false);
+                        return [2 /*return*/];
+                }
+            });
+        }); })();
         return function () {
             isCancelled = true;
         };

package/lib/esm/Importer/common/Spreadsheet/index.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { SpreadsheetProps } from "./common/types";
-declare const _default: React.MemoExoticComponent<({ initialDataSet, ...props }: SpreadsheetProps) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ initialDataSet, initialDataSetUpdatedAt, ...props }: SpreadsheetProps) => JSX.Element>;
 export default _default;
 export * from "./SpreadsheetContextProvider";
 export * from "./hooks";

package/lib/esm/Importer/common/Spreadsheet/index.js

@@ -20,10 +20,10 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { get } from "lodash";
 import { DateTime } from "luxon";
-import React, { useEffect, useState } from "react";
+import React from "react";
 import { areEqual } from "react-window";
 import { useImporterContext } from "../../contexts/ImporterContextProvider";
 import { SpreadsheetContextProvider } from "./SpreadsheetContextProvider";
@@ -107,14 +107,8 @@ var useFieldSorting = function () {
     return { getDefaultSortCompareFn: getDefaultSortCompareFn };
 };
 var SpreadsheetWrapper = function (_a) {
-    var initialDataSet = _a.initialDataSet, props = __rest(_a, ["initialDataSet"]);
-    var _b = useState(0), key = _b[0], setKey = _b[1];
-    useEffect(function () {
-        /* increment the key to force a re-mount of the Spreadsheet component
-         when the initialDataSet changes */
-        setKey(key + 1);
-    }, [initialDataSet]);
-    return _jsx(Spreadsheet, __assign({ initialDataSet: initialDataSet }, props), key);
+    var initialDataSet = _a.initialDataSet, initialDataSetUpdatedAt = _a.initialDataSetUpdatedAt, props = __rest(_a, ["initialDataSet", "initialDataSetUpdatedAt"]);
+    return (_jsx(_Fragment, { children: initialDataSet && (_jsx(Spreadsheet, __assign({ initialDataSet: initialDataSet }, props), initialDataSetUpdatedAt || 0)) }));
 };
 var Spreadsheet = function (props) {
     var getDefaultSortCompareFn = useFieldSorting().getDefaultSortCompareFn;

package/lib/esm/Importer/common/Spreadsheet/validation/index.js

@@ -54,7 +54,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-import { ignoreNullOrUndefinedKeyValues, isNullOrUndefined, isRecordEmpty, } from "../common";
+import { ignoreNullOrUndefinedKeyValues, isEmpty, isNullOrUndefined, isRecordEmpty, } from "../common";
 import { fieldValidations } from "./validators";
 var datePatternTypes = ["date", "datetime", "time"];
 function safeCallOnValidateRecord(_a) {
@@ -98,11 +98,17 @@ function safeCallValidator(_a) {
         return "".concat(e);
     }
 }
+function mergeErrorsAndWarnings(currentErrors, errors) {
+    return __assign(__assign({}, currentErrors), { errors: __assign(__assign({}, (currentErrors.errors || {})), errors), warnings: __assign({}, (currentErrors.warnings || {})) });
+}
 function runValidatorsFor(_a) {
     var record = _a.record, data = _a.data, validators = _a.validators;
     return validators.reduce(function (currentErrors, _a) {
         var field = _a.field, validators = _a.validators;
         var errors = {};
+        if (!field.isRequired && isEmpty(record[field.name])) {
+            return mergeErrorsAndWarnings(currentErrors, errors);
+        }
         for (var index = 0; index < validators.length; index++) {
             var _b = validators[index], validator = _b.validator, validatorFunction = _b.validatorFunction;
             var error = safeCallValidator({
@@ -117,7 +123,7 @@ function runValidatorsFor(_a) {
                 break;
             }
         }
-        return __assign(__assign({}, currentErrors), { errors: __assign(__assign({}, (currentErrors.errors || {})), errors), warnings: __assign({}, (currentErrors.warnings || {})) });
+        return mergeErrorsAndWarnings(currentErrors, errors);
     }, {});
 }
 export function selectValidatorsFor(fields) {

package/lib/esm/Importer/data/index.js

@@ -89,7 +89,9 @@ export var transformToRecords = function (_a) {
 };
 export var getPreviewDataSet = function (_a) {
     var uploadedData = _a.uploadedData;
-    var rowLen = Math.max.apply(Math, uploadedData.map(function (row) { return row.length; }));
+    var rowLen = 0;
+    for (var i = 0; i < uploadedData.length; i++)
+        rowLen = Math.max(rowLen, uploadedData[i].length);
     var fields = new Array(rowLen).fill(null).map(function (_, i) {
         var key = String.fromCharCode(65 + i);
         return {

package/lib/esm/common/AppLoadingContextProvider/AppLoadingUI.d.ts

@@ -0,0 +1 @@
+export declare const AppLoadingUI: () => JSX.Element;

package/lib/esm/common/AppLoadingContextProvider/AppLoadingUI.js

@@ -0,0 +1,26 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from "styled-components";
+import { Div } from "../../styled/utils";
+import { Spinner } from "../Spinner";
+var LoadingBackdrop = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: fixed;\n  top: 0px;\n  left: 0px;\n  margin: 0px;\n  width: 100vw;\n  height: 100vh;\n  z-index: 99999999;\n  background: ", ";\n  opacity: 0.2;\n"], ["\n  position: fixed;\n  top: 0px;\n  left: 0px;\n  margin: 0px;\n  width: 100vw;\n  height: 100vh;\n  z-index: 99999999;\n  background: ", ";\n  opacity: 0.2;\n"])), function (props) { return props.theme.colors.gray200; });
+var ModalContainer = styled(Div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  top: 0px;\n  left: 0px;\n  margin: 0px;\n  position: fixed;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 10000000000;\n  width: 100vw;\n  height: 100vh;\n  pointer-events: none;\n  div {\n    pointer-events: auto;\n  }\n"], ["\n  top: 0px;\n  left: 0px;\n  margin: 0px;\n  position: fixed;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 10000000000;\n  width: 100vw;\n  height: 100vh;\n  pointer-events: none;\n  div {\n    pointer-events: auto;\n  }\n"])));
+var LoaderContainer = styled(ModalContainer)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  pointer-events: none;\n"], ["\n  pointer-events: none;\n"])));
+export var AppLoadingUI = function () {
+    return (_jsxs(_Fragment, { children: [_jsx(LoadingBackdrop, {}), _jsx(LoaderContainer, { children: _jsx(Div, __assign({ w: 300 }, { children: _jsx(Div, __assign({ pRelative: true }, { children: _jsx(Spinner, {}) })) })) })] }));
+};
+var templateObject_1, templateObject_2, templateObject_3;

package/lib/esm/common/AppLoadingContextProvider/index.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+export type State = {
+    isLoadingApp: boolean;
+    setIsLoadingApp: React.Dispatch<React.SetStateAction<boolean>>;
+};
+export declare const AppLoadingContext: React.Context<State>;
+export declare const AppLoadingContextProvider: ({ children }: {
+    children: any;
+}) => JSX.Element;
+export declare const useAppLoadingContext: () => State;

package/lib/esm/common/AppLoadingContextProvider/index.js

@@ -0,0 +1,25 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useState } from "react";
+import { AppLoadingUI } from "./AppLoadingUI";
+export var AppLoadingContext = createContext({});
+export var AppLoadingContextProvider = function (_a) {
+    var children = _a.children;
+    var _b = useState(false), isLoadingApp = _b[0], setIsLoadingApp = _b[1];
+    var value = {
+        isLoadingApp: isLoadingApp,
+        setIsLoadingApp: setIsLoadingApp,
+    };
+    return (_jsxs(AppLoadingContext.Provider, __assign({ value: value }, { children: [isLoadingApp && _jsx(AppLoadingUI, {}), children] })));
+};
+export var useAppLoadingContext = function () { return useContext(AppLoadingContext); };

package/lib/esm/index.d.ts

@@ -16,7 +16,7 @@ declare class FuseImporter {
     private windowScrollPosition;
     close(): void;
     show(): Promise<void>;
-    addColumn<T extends FieldTypesAsUnion>({ options, ...requiredProps }: ColumnRequiredProps<T>): void;
+    addColumn<T extends FieldTypesAsUnion>(columnData: ColumnRequiredProps<T>): void;
     private renderImporterComponent;
     private createDivComponent;
     private createIframe;