fuse-importer 0.0.3-testing → 0.0.4-testing

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

@@ -74,6 +74,7 @@ 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;
@@ -126,6 +127,7 @@ function csvExport(data) {
 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 +136,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 +235,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 +294,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

@@ -82,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 40MB";
+                return "Maximum file size is 200MB";
             }
             else {
                 return file.errors[0].message;
@@ -100,6 +100,7 @@ var ImporterDropzone = function () {
         noKeyboard: true,
         accept: ".csv, .tsv, .xls, .xlsx",
         maxFiles: 1,
+        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/index.js

@@ -136,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;
+    var record = _a.record, data = _a.data, validators = _a.validators, isTouched = _a.isTouched;
     return validators.reduce(function (currentErrors, _a) {
         var field = _a.field, validators = _a.validators;
         var errors = {};
+        if (isTouched && !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) {
@@ -175,6 +181,7 @@ export function validateRecord(_a) {
                         record: record,
                         data: data,
                         validators: validators,
+                        isTouched: isTouched,
                     }), validatorErrors = _d.errors, validatorWarnings = _d.warnings;
                     errors = ignoreNullOrUndefinedKeyValues(validatorErrors);
                     warnings = ignoreNullOrUndefinedKeyValues(validatorWarnings);

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); };