pds-dev-kit-web 1.5.11 → 1.6.0

package/dist/src/desktop/components/MainButton/MainButton.js

@@ -28,6 +28,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
+var components_1 = require("../../../common/components");
+var styles_1 = require("../../../common/styles");
 var hybrid_1 = require("../../../hybrid");
 var TextLabel_1 = require("../TextLabel");
 // NOTE : 기획상 아직 사용하지 않는 props
@@ -36,7 +38,7 @@ var TextLabel_1 = require("../TextLabel");
 // borderColorKey?: string;
 // shadow?: 'hidden' | 'visible';
 function MainButton(_a) {
-    var text = _a.text, _b = _a.shapeType, shapeType = _b === void 0 ? 'round' : _b, fillType = _a.fillType, _c = _a.styleTheme, styleTheme = _c === void 0 ? 'primary' : _c, _d = _a.size, size = _d === void 0 ? 'large' : _d, _e = _a.responsiveMode, responsiveMode = _e === void 0 ? 'none' : _e, fontWeight = _a.fontWeight, _f = _a.iconMode, iconMode = _f === void 0 ? 'none' : _f, _g = _a.iconFillType, iconFillType = _g === void 0 ? 'line' : _g, iconName = _a.iconName, _h = _a.colorTheme, colorTheme = _h === void 0 ? 'none' : _h, _j = _a.type, type = _j === void 0 ? 'button' : _j, _k = _a.state, state = _k === void 0 ? 'normal' : _k, onClick = _a.onClick, onMouseDown = _a.onMouseDown;
+    var text = _a.text, _b = _a.shapeType, shapeType = _b === void 0 ? 'round' : _b, fillType = _a.fillType, _c = _a.styleTheme, styleTheme = _c === void 0 ? 'primary' : _c, _d = _a.size, size = _d === void 0 ? 'large' : _d, _e = _a.responsiveMode, responsiveMode = _e === void 0 ? 'none' : _e, fontWeight = _a.fontWeight, _f = _a.iconMode, iconMode = _f === void 0 ? 'none' : _f, _g = _a.iconFillType, iconFillType = _g === void 0 ? 'line' : _g, iconName = _a.iconName, _h = _a.colorTheme, colorTheme = _h === void 0 ? 'none' : _h, _j = _a.type, type = _j === void 0 ? 'button' : _j, _k = _a.state, state = _k === void 0 ? 'normal' : _k, isLoading = _a.isLoading, isSubmitting = _a.isSubmitting, onClick = _a.onClick, onMouseDown = _a.onMouseDown;
     var handleClick = function (e) {
         if (onClick) {
             onClick(e);
@@ -47,6 +49,24 @@ function MainButton(_a) {
             onMouseDown(e);
         }
     };
+    var submittingProgressColor = function () {
+        if (fillType === 'line' && colorTheme !== 'none' && state !== 'disabled') {
+            return textThemeColorLineObj[colorTheme];
+        }
+        if (fillType === 'fill') {
+            return 'ui_cpnt_textlabel_usr_brandonprimary';
+        }
+        if (fillType === 'line') {
+            return 'ui_cpnt_textlabel_sys_primary';
+        }
+        if (styleTheme === 'primary') {
+            return 'ui_cpnt_textlabel_usr_brandonprimary';
+        }
+        if (styleTheme === 'secondary') {
+            return 'ui_cpnt_textlabel_usr_brandprimary';
+        }
+        return 'ui_cpnt_textlabel_usr_brandonprimary';
+    };
     var textStyle = {
         rlarge: 'body1Bold',
         large: 'body1Bold',
@@ -113,14 +133,24 @@ function MainButton(_a) {
             return iconStyleThemeColorObj[styleTheme];
         }
     };
-    return (react_1.default.createElement(S_Button, { shapeType: shapeType, fillType: fillType, styleTheme: styleTheme, size: size, responsiveMode: responsiveMode, fontWeight: fontWeight, colorTheme: colorTheme, type: type, state: state, disabled: state === 'disabled', onClick: handleClick, onMouseDown: handleMouseDown },
-        size !== 'xsmall' && iconMode === 'left' && (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: iconColor(), fillType: iconFillType }),
-            react_1.default.createElement(hybrid_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" }))),
-        react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], singleLineMode: "use", colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor(), colorOverride: selectTextThemeColor(), ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }),
-        size !== 'xsmall' && iconMode === 'right' && (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(hybrid_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" }),
-            react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: iconColor(), fillType: iconFillType })))));
+    var MainButtonVariation = function () {
+        if (isLoading) {
+            return (react_1.default.createElement(S_LoadingMainButton, { shapeType: shapeType, size: size, responsiveMode: responsiveMode, state: "disabled", disabled: true }));
+        }
+        if (isSubmitting) {
+            return (react_1.default.createElement(S_SubmittingMainButton, { shapeType: shapeType, fillType: fillType, styleTheme: styleTheme, size: size, responsiveMode: responsiveMode, colorTheme: colorTheme, state: "normal", disabled: true },
+                react_1.default.createElement(components_1.CircularProgress, { colorKey: submittingProgressColor(), size: size === 'rlarge' ? 'large' : size })));
+        }
+        return (react_1.default.createElement(S_MainButton, { shapeType: shapeType, fillType: fillType, styleTheme: styleTheme, size: size, responsiveMode: responsiveMode, fontWeight: fontWeight, colorTheme: colorTheme, type: type, state: state, disabled: state === 'disabled', onClick: handleClick, onMouseDown: handleMouseDown },
+            size !== 'xsmall' && iconMode === 'left' && (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: iconColor(), fillType: iconFillType }),
+                react_1.default.createElement(hybrid_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" }))),
+            react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], singleLineMode: "use", colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor(), colorOverride: selectTextThemeColor(), ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }),
+            size !== 'xsmall' && iconMode === 'right' && (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(hybrid_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" }),
+                react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: iconColor(), fillType: iconFillType })))));
+    };
+    return MainButtonVariation();
 }
 var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 48px;\n  min-width: 96px;\n  padding: 0 ", ";\n  ", "\n  ", ";\n\n  & > div {\n    height: 48px;\n    line-height: 48px;\n  }\n"], ["\n  height: 48px;\n  min-width: 96px;\n  padding: 0 ", ";\n  ", "\n  ", ";\n\n  & > div {\n    height: 48px;\n    line-height: 48px;\n  }\n"])), function (_a) {
     var theme = _a.theme;
@@ -256,7 +286,7 @@ var secondary = (0, styled_components_1.css)(templateObject_16 || (templateObjec
     var state = _a.state;
     return state === 'disabled' && secondaryDisabled;
 });
-var S_Button = styled_components_1.default.button(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: inline-flex;\n  justify-content: center;\n\n  &:focus {\n    outline: none;\n  }\n  ", "\n  ", "\n  ", "\n  ", ";\n\n  & > div {\n    ", ";\n  }\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: inline-flex;\n  justify-content: center;\n\n  &:focus {\n    outline: none;\n  }\n  ", "\n  ", "\n  ", "\n  ", ";\n\n  & > div {\n    ", ";\n  }\n"])), function (_a) {
+var S_MainButton = styled_components_1.default.button(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: inline-flex;\n  justify-content: center;\n\n  &:focus {\n    outline: none;\n  }\n  ", "\n  ", "\n  ", "\n  ", ";\n\n  & > div {\n    ", ";\n  }\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: inline-flex;\n  justify-content: center;\n\n  &:focus {\n    outline: none;\n  }\n  ", "\n  ", "\n  ", "\n  ", ";\n\n  & > div {\n    ", ";\n  }\n"])), function (_a) {
     var state = _a.state;
     return (state === 'normal' ? 'pointer' : 'default');
 }, function (_a) {
@@ -279,5 +309,7 @@ var S_Button = styled_components_1.default.button(templateObject_17 || (template
             regular: "font-weight: " + theme.fontWeight.normal
         }[fontWeight];
 });
+var S_LoadingMainButton = (0, styled_components_1.default)(S_MainButton)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_1.skeletonLoadingStyle);
+var S_SubmittingMainButton = (0, styled_components_1.default)(S_MainButton)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  cursor: default;\n"], ["\n  cursor: default;\n"])));
 exports.default = MainButton;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19;

package/dist/src/desktop/components/UploadMainButton/UploadMainButton.d.ts

@@ -15,7 +15,9 @@ declare type UploadMainButtonProps = {
     state?: 'normal' | 'disabled';
     accept?: string;
     multipleMode?: 'none' | 'use';
+    isLoading?: boolean;
+    isSubmitting?: boolean;
     onClick?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 };
-declare function UploadMainButton({ text, shapeType, fillType, styleTheme, size, responsiveMode, fontWeight, iconMode, iconFillType, iconName, colorTheme, state, accept, multipleMode, onClick }: UploadMainButtonProps): JSX.Element;
+declare function UploadMainButton({ text, shapeType, fillType, styleTheme, size, responsiveMode, fontWeight, iconMode, iconFillType, iconName, colorTheme, state, accept, multipleMode, isLoading, isSubmitting, onClick }: UploadMainButtonProps): JSX.Element;
 export default UploadMainButton;

package/dist/src/desktop/components/UploadMainButton/UploadMainButton.js

@@ -28,17 +28,37 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
+var components_1 = require("../../../common/components");
+var styles_1 = require("../../../common/styles");
 var hybrid_1 = require("../../../hybrid");
 var TextLabel_1 = require("../TextLabel");
 var types_1 = require("./types");
 function UploadMainButton(_a) {
-    var text = _a.text, _b = _a.shapeType, shapeType = _b === void 0 ? 'round' : _b, fillType = _a.fillType, _c = _a.styleTheme, styleTheme = _c === void 0 ? 'primary' : _c, _d = _a.size, size = _d === void 0 ? 'large' : _d, _e = _a.responsiveMode, responsiveMode = _e === void 0 ? 'none' : _e, fontWeight = _a.fontWeight, _f = _a.iconMode, iconMode = _f === void 0 ? 'none' : _f, _g = _a.iconFillType, iconFillType = _g === void 0 ? 'line' : _g, _h = _a.iconName, iconName = _h === void 0 ? 'ic_upload' : _h, _j = _a.colorTheme, colorTheme = _j === void 0 ? 'none' : _j, _k = _a.state, state = _k === void 0 ? 'normal' : _k, _l = _a.accept, accept = _l === void 0 ? '*' : _l, _m = _a.multipleMode, multipleMode = _m === void 0 ? 'none' : _m, onClick = _a.onClick;
+    var text = _a.text, _b = _a.shapeType, shapeType = _b === void 0 ? 'round' : _b, fillType = _a.fillType, _c = _a.styleTheme, styleTheme = _c === void 0 ? 'primary' : _c, _d = _a.size, size = _d === void 0 ? 'large' : _d, _e = _a.responsiveMode, responsiveMode = _e === void 0 ? 'none' : _e, fontWeight = _a.fontWeight, _f = _a.iconMode, iconMode = _f === void 0 ? 'none' : _f, _g = _a.iconFillType, iconFillType = _g === void 0 ? 'line' : _g, _h = _a.iconName, iconName = _h === void 0 ? 'ic_upload' : _h, _j = _a.colorTheme, colorTheme = _j === void 0 ? 'none' : _j, _k = _a.state, state = _k === void 0 ? 'normal' : _k, _l = _a.accept, accept = _l === void 0 ? '*' : _l, _m = _a.multipleMode, multipleMode = _m === void 0 ? 'none' : _m, isLoading = _a.isLoading, isSubmitting = _a.isSubmitting, onClick = _a.onClick;
     var handleClick = function (e) {
         if (onClick) {
             onClick(e);
         }
         e.target.value = '';
     };
+    var submittingProgressColor = function () {
+        if (fillType === 'line' && colorTheme !== 'none' && state !== 'disabled') {
+            return types_1.textThemeColorLines[colorTheme];
+        }
+        if (fillType === 'fill') {
+            return 'ui_cpnt_textlabel_usr_brandonprimary';
+        }
+        if (fillType === 'line') {
+            return 'ui_cpnt_textlabel_sys_primary';
+        }
+        if (styleTheme === 'primary') {
+            return 'ui_cpnt_textlabel_usr_brandonprimary';
+        }
+        if (styleTheme === 'secondary') {
+            return 'ui_cpnt_textlabel_usr_brandprimary';
+        }
+        return 'ui_cpnt_textlabel_usr_brandonprimary';
+    };
     var selectTextThemeColor = function () {
         if (colorTheme === 'line3' && state === 'disabled') {
             return 'ui_cpnt_button_text_darktheme_disabled';
@@ -80,15 +100,27 @@ function UploadMainButton(_a) {
         }
         return 'usrTextBrandOnPrimary';
     };
-    return (react_1.default.createElement(S_UploadMainButton, { shapeType: shapeType, fillType: fillType, styleTheme: styleTheme, size: size, responsiveMode: responsiveMode, fontWeight: fontWeight, colorTheme: colorTheme, disabled: state === 'disabled' },
-        react_1.default.createElement("input", { type: "file", hidden: true, disabled: state === 'disabled', accept: accept, multiple: multipleMode === 'use', onChange: handleClick }),
-        size !== 'xsmall' && iconMode === 'left' && (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: iconColor(), fillType: iconFillType }),
-            react_1.default.createElement(hybrid_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" }))),
-        react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: types_1.textStyles[size], singleLineMode: "use", colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor(), colorOverride: selectTextThemeColor(), ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }),
-        size !== 'xsmall' && iconMode === 'right' && (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(hybrid_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" }),
-            react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: iconColor(), fillType: iconFillType })))));
+    var UploadMainButtonVariation = function () {
+        if (isLoading) {
+            return (react_1.default.createElement(S_LoadingUploadMainButton, { shapeType: shapeType, size: size, responsiveMode: responsiveMode, colorTheme: "none", disabled: true },
+                react_1.default.createElement("input", { type: "file", hidden: true, disabled: true, accept: accept, multiple: multipleMode === 'use' })));
+        }
+        if (isSubmitting) {
+            return (react_1.default.createElement(S_SubmittingUploadMainButton, { shapeType: shapeType, fillType: fillType, styleTheme: styleTheme, size: size, responsiveMode: responsiveMode, colorTheme: colorTheme, disabled: false, isSubmitting: true },
+                react_1.default.createElement("input", { type: "file", hidden: true, disabled: true, accept: accept, multiple: multipleMode === 'use' }),
+                react_1.default.createElement(components_1.CircularProgress, { colorKey: submittingProgressColor(), size: size === 'rlarge' ? 'large' : size })));
+        }
+        return (react_1.default.createElement(S_UploadMainButton, { shapeType: shapeType, fillType: fillType, styleTheme: styleTheme, size: size, responsiveMode: responsiveMode, fontWeight: fontWeight, colorTheme: colorTheme, disabled: state === 'disabled' },
+            react_1.default.createElement("input", { type: "file", hidden: true, disabled: state === 'disabled', accept: accept, multiple: multipleMode === 'use', onChange: handleClick }),
+            size !== 'xsmall' && iconMode === 'left' && (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: iconColor(), fillType: iconFillType }),
+                react_1.default.createElement(hybrid_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" }))),
+            react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: types_1.textStyles[size], singleLineMode: "use", colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor(), colorOverride: selectTextThemeColor(), ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }),
+            size !== 'xsmall' && iconMode === 'right' && (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(hybrid_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" }),
+                react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: iconColor(), fillType: iconFillType })))));
+    };
+    return UploadMainButtonVariation();
 }
 var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 48px;\n  min-width: 96px;\n  padding: 0 ", ";\n  ", "\n  ", ";\n\n  & > div {\n    height: 48px;\n    line-height: 48px;\n  }\n"], ["\n  height: 48px;\n  min-width: 96px;\n  padding: 0 ", ";\n  ", "\n  ", ";\n\n  & > div {\n    height: 48px;\n    line-height: 48px;\n  }\n"])), function (_a) {
     var theme = _a.theme;
@@ -129,11 +161,13 @@ var fill = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 =
     var theme = _a.theme;
     return theme.ui_cpnt_button_fill_base_primary;
 }, function (_a) {
-    var theme = _a.theme;
-    return "linear-gradient(\n      to top,\n      " + theme.ui_cpnt_button_fill_on_base_hover + ",\n      " + theme.ui_cpnt_button_fill_on_base_hover + "\n    )";
+    var theme = _a.theme, isSubmitting = _a.isSubmitting;
+    return !isSubmitting &&
+        "linear-gradient(\n      to top,\n      " + theme.ui_cpnt_button_fill_on_base_hover + ",\n      " + theme.ui_cpnt_button_fill_on_base_hover + "\n    )";
 }, function (_a) {
-    var theme = _a.theme;
-    return "linear-gradient(\n      to top,\n      " + theme.ui_cpnt_button_fill_on_base_pressed + ",\n      " + theme.ui_cpnt_button_fill_on_base_pressed + "\n    )";
+    var theme = _a.theme, isSubmitting = _a.isSubmitting;
+    return !isSubmitting &&
+        "linear-gradient(\n      to top,\n      " + theme.ui_cpnt_button_fill_on_base_pressed + ",\n      " + theme.ui_cpnt_button_fill_on_base_pressed + "\n    )";
 }, function (_a) {
     var disabled = _a.disabled;
     return disabled && fillDisabled;
@@ -157,11 +191,11 @@ var line3 = (0, styled_components_1.css)(templateObject_10 || (templateObject_10
     var theme = _a.theme;
     return theme.ui_cpnt_button_line_base_darktheme_default;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_button_line_base_darktheme_hover;
+    var theme = _a.theme, isSubmitting = _a.isSubmitting;
+    return !isSubmitting && theme.ui_cpnt_button_line_base_darktheme_hover;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_button_line_base_darktheme_pressed;
+    var theme = _a.theme, isSubmitting = _a.isSubmitting;
+    return !isSubmitting && theme.ui_cpnt_button_line_base_darktheme_pressed;
 });
 var lineDisabled = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  background-color: ", ";\n  border: solid 1px\n    ", ";\n"], ["\n  background-color: ", ";\n  border: solid 1px\n    ", ";\n"])), function (_a) {
     var theme = _a.theme, colorTheme = _a.colorTheme;
@@ -178,11 +212,11 @@ var line = (0, styled_components_1.css)(templateObject_12 || (templateObject_12
     var theme = _a.theme;
     return theme.ui_cpnt_button_line_base_default;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_button_line_base_hover;
+    var theme = _a.theme, isSubmitting = _a.isSubmitting;
+    return !isSubmitting && theme.ui_cpnt_button_line_base_hover;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_button_line_base_pressed;
+    var theme = _a.theme, isSubmitting = _a.isSubmitting;
+    return !isSubmitting && theme.ui_cpnt_button_line_base_pressed;
 }, function (_a) {
     var colorTheme = _a.colorTheme;
     return colorTheme && { none: none, line1: line1, line2: line2, line3: line3 }[colorTheme];
@@ -198,11 +232,13 @@ var primary = (0, styled_components_1.css)(templateObject_14 || (templateObject_
     var theme = _a.theme;
     return theme.ui_cpnt_button_fill_base_primary;
 }, function (_a) {
-    var theme = _a.theme;
-    return "background-image: linear-gradient(\n    to top,\n    " + theme.ui_cpnt_button_fill_on_base_hover + ",\n    " + theme.ui_cpnt_button_fill_on_base_hover + "\n  );";
+    var theme = _a.theme, isSubmitting = _a.isSubmitting;
+    return !isSubmitting &&
+        "background-image: linear-gradient(\n    to top,\n    " + theme.ui_cpnt_button_fill_on_base_hover + ",\n    " + theme.ui_cpnt_button_fill_on_base_hover + "\n  );";
 }, function (_a) {
-    var theme = _a.theme;
-    return "background-image: linear-gradient(\n    to top,\n    " + theme.ui_cpnt_button_fill_on_base_pressed + ",\n    " + theme.ui_cpnt_button_fill_on_base_pressed + "\n  );";
+    var theme = _a.theme, isSubmitting = _a.isSubmitting;
+    return !isSubmitting &&
+        "background-image: linear-gradient(\n    to top,\n    " + theme.ui_cpnt_button_fill_on_base_pressed + ",\n    " + theme.ui_cpnt_button_fill_on_base_pressed + "\n  );";
 }, function (_a) {
     var disabled = _a.disabled;
     return disabled && primaryDisabled;
@@ -215,11 +251,13 @@ var secondary = (0, styled_components_1.css)(templateObject_16 || (templateObjec
     var theme = _a.theme;
     return theme.ui_cpnt_button_line_base_hover;
 }, function (_a) {
-    var theme = _a.theme;
-    return "background-image: linear-gradient(\n    to top,\n    " + theme.ui_cpnt_button_fill_on_base_hover + ",\n    " + theme.ui_cpnt_button_fill_on_base_hover + "\n  );";
+    var theme = _a.theme, isSubmitting = _a.isSubmitting;
+    return !isSubmitting &&
+        "background-image: linear-gradient(\n    to top,\n    " + theme.ui_cpnt_button_fill_on_base_hover + ",\n    " + theme.ui_cpnt_button_fill_on_base_hover + "\n  );";
 }, function (_a) {
-    var theme = _a.theme;
-    return "background-image: linear-gradient(\n    to top,\n    " + theme.ui_cpnt_button_fill_on_base_pressed + ",\n    " + theme.ui_cpnt_button_fill_on_base_pressed + "\n  );";
+    var theme = _a.theme, isSubmitting = _a.isSubmitting;
+    return !isSubmitting &&
+        "background-image: linear-gradient(\n    to top,\n    " + theme.ui_cpnt_button_fill_on_base_pressed + ",\n    " + theme.ui_cpnt_button_fill_on_base_pressed + "\n  );";
 }, function (_a) {
     var disabled = _a.disabled;
     return disabled && secondaryDisabled;
@@ -247,5 +285,7 @@ var S_UploadMainButton = styled_components_1.default.label(templateObject_17 ||
     var responsiveMode = _a.responsiveMode;
     return responsiveMode === 'use' && 'width: 100%';
 });
+var S_LoadingUploadMainButton = (0, styled_components_1.default)(S_UploadMainButton)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_1.skeletonLoadingStyle);
+var S_SubmittingUploadMainButton = (0, styled_components_1.default)(S_UploadMainButton)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  cursor: default;\n"], ["\n  cursor: default;\n"])));
 exports.default = UploadMainButton;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19;

package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/ContentsContainer.d.ts

@@ -6,6 +6,8 @@ export declare type ContentsContainerProps = {
     layoutType: 'WFA_1' | 'WFB_1' | 'WFC_1' | 'WFD_1' | 'WFD_2' | 'WFE_1' | 'WFE_2' | 'WFF_1' | 'WFG_1' | 'WFG_2' | 'WFG_3' | 'WFG_4' | 'WFG_5' | 'WFG_6' | 'WFH_1' | 'WFI_1' | 'WFI_2' | 'WFI_3' | 'WFI_4' | 'WFI_5' | 'WFI_6' | 'WFJ_1' | 'WFK_1';
     containerColor?: string;
     areaColor?: string;
+    isLoadingContainer1?: boolean;
+    isLoadingContainer2?: boolean;
 };
-declare const ContentsContainer: ({ stepContent, content1, content2, layoutType, containerColor, areaColor }: ContentsContainerProps) => JSX.Element;
+declare const ContentsContainer: ({ stepContent, content1, content2, layoutType, containerColor, areaColor, isLoadingContainer1, isLoadingContainer2 }: ContentsContainerProps) => JSX.Element;
 export default ContentsContainer;

package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/ContentsContainer.js

@@ -6,31 +6,31 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var variation_1 = require("./variation");
 var ContentsContainer = function (_a) {
-    var stepContent = _a.stepContent, content1 = _a.content1, content2 = _a.content2, layoutType = _a.layoutType, containerColor = _a.containerColor, areaColor = _a.areaColor;
+    var stepContent = _a.stepContent, content1 = _a.content1, content2 = _a.content2, layoutType = _a.layoutType, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, isLoadingContainer2 = _a.isLoadingContainer2;
     return (react_1.default.createElement(react_1.default.Fragment, null, {
-        WFA_1: (react_1.default.createElement(variation_1.WFA, { stepContent: stepContent, content1: content1, containerColor: containerColor, areaColor: areaColor })),
-        WFB_1: (react_1.default.createElement(variation_1.WFB, { stepContent: stepContent, content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
-        WFC_1: react_1.default.createElement(variation_1.WFC, { content1: content1, containerColor: containerColor, areaColor: areaColor }),
-        WFD_1: (react_1.default.createElement(variation_1.WFD, { layoutType: "WFD_1", content1: content1, containerColor: containerColor, areaColor: areaColor })),
-        WFD_2: (react_1.default.createElement(variation_1.WFD, { layoutType: "WFD_2", content1: content1, containerColor: containerColor, areaColor: areaColor })),
-        WFE_1: (react_1.default.createElement(variation_1.WFE, { layoutType: "WFE_1", stepContent: stepContent, content1: content1, containerColor: containerColor, areaColor: areaColor })),
-        WFE_2: (react_1.default.createElement(variation_1.WFE, { layoutType: "WFE_2", stepContent: stepContent, content1: content1, containerColor: containerColor, areaColor: areaColor })),
-        WFF_1: react_1.default.createElement(variation_1.WFF, { content1: content1, containerColor: containerColor, areaColor: areaColor }),
-        WFG_1: (react_1.default.createElement(variation_1.WFG, { layoutType: "WFG_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
-        WFG_2: (react_1.default.createElement(variation_1.WFG, { layoutType: "WFG_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
-        WFG_3: (react_1.default.createElement(variation_1.WFG, { layoutType: "WFG_3", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
-        WFG_4: (react_1.default.createElement(variation_1.WFG, { layoutType: "WFG_4", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
-        WFG_5: (react_1.default.createElement(variation_1.WFG, { layoutType: "WFG_5", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
-        WFG_6: (react_1.default.createElement(variation_1.WFG, { layoutType: "WFG_6", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
-        WFH_1: react_1.default.createElement(variation_1.WFH, { content1: content1, containerColor: containerColor, areaColor: areaColor }),
-        WFI_1: (react_1.default.createElement(variation_1.WFI, { layoutType: "WFI_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
-        WFI_2: (react_1.default.createElement(variation_1.WFI, { layoutType: "WFI_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
-        WFI_3: (react_1.default.createElement(variation_1.WFI, { layoutType: "WFI_3", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
-        WFI_4: (react_1.default.createElement(variation_1.WFI, { layoutType: "WFI_4", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
-        WFI_5: (react_1.default.createElement(variation_1.WFI, { layoutType: "WFI_5", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
-        WFI_6: (react_1.default.createElement(variation_1.WFI, { layoutType: "WFI_6", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
-        WFJ_1: react_1.default.createElement(variation_1.WFJ, { content1: content1, containerColor: containerColor, areaColor: areaColor }),
-        WFK_1: (react_1.default.createElement(variation_1.WFK, { content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor }))
+        WFA_1: (react_1.default.createElement(variation_1.WFA, { stepContent: stepContent, content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
+        WFB_1: (react_1.default.createElement(variation_1.WFB, { stepContent: stepContent, content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
+        WFC_1: (react_1.default.createElement(variation_1.WFC, { content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
+        WFD_1: (react_1.default.createElement(variation_1.WFD, { layoutType: "WFD_1", content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
+        WFD_2: (react_1.default.createElement(variation_1.WFD, { layoutType: "WFD_2", content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
+        WFE_1: (react_1.default.createElement(variation_1.WFE, { layoutType: "WFE_1", stepContent: stepContent, content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
+        WFE_2: (react_1.default.createElement(variation_1.WFE, { layoutType: "WFE_2", stepContent: stepContent, content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
+        WFF_1: (react_1.default.createElement(variation_1.WFF, { content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
+        WFG_1: (react_1.default.createElement(variation_1.WFG, { layoutType: "WFG_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
+        WFG_2: (react_1.default.createElement(variation_1.WFG, { layoutType: "WFG_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
+        WFG_3: (react_1.default.createElement(variation_1.WFG, { layoutType: "WFG_3", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
+        WFG_4: (react_1.default.createElement(variation_1.WFG, { layoutType: "WFG_4", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
+        WFG_5: (react_1.default.createElement(variation_1.WFG, { layoutType: "WFG_5", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
+        WFG_6: (react_1.default.createElement(variation_1.WFG, { layoutType: "WFG_6", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
+        WFH_1: (react_1.default.createElement(variation_1.WFH, { content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
+        WFI_1: (react_1.default.createElement(variation_1.WFI, { layoutType: "WFI_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
+        WFI_2: (react_1.default.createElement(variation_1.WFI, { layoutType: "WFI_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
+        WFI_3: (react_1.default.createElement(variation_1.WFI, { layoutType: "WFI_3", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
+        WFI_4: (react_1.default.createElement(variation_1.WFI, { layoutType: "WFI_4", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
+        WFI_5: (react_1.default.createElement(variation_1.WFI, { layoutType: "WFI_5", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
+        WFI_6: (react_1.default.createElement(variation_1.WFI, { layoutType: "WFI_6", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
+        WFJ_1: (react_1.default.createElement(variation_1.WFJ, { content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
+        WFK_1: (react_1.default.createElement(variation_1.WFK, { content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 }))
     }[layoutType]));
 };
 exports.default = ContentsContainer;

package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFA.d.ts

@@ -4,6 +4,7 @@ export declare type WFAProps = {
     content1?: JSX.Element;
     containerColor?: string;
     areaColor?: string;
+    isLoadingContainer1?: boolean;
 };
-declare const WFA: ({ stepContent, content1, containerColor, areaColor }: WFAProps) => JSX.Element;
+declare const WFA: ({ stepContent, content1, containerColor, areaColor, isLoadingContainer1 }: WFAProps) => JSX.Element;
 export default WFA;

package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFA.js

@@ -9,13 +9,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
+var components_1 = require("../../../../../../common/components");
 var WFA = function (_a) {
-    var stepContent = _a.stepContent, content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor;
-    return (react_1.default.createElement(S_ContentsContainer, { containerColor: containerColor },
-        react_1.default.createElement(S_SideArea, { areaColor: areaColor },
-            react_1.default.createElement(S_StepContent, null, stepContent)),
-        react_1.default.createElement(S_ContentsArea, { areaColor: areaColor },
-            react_1.default.createElement(S_Content1, null, content1))));
+    var stepContent = _a.stepContent, content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(S_ContentsContainer, { containerColor: containerColor }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(S_SideArea, { areaColor: areaColor },
+                react_1.default.createElement(S_StepContent, null, stepContent)),
+            react_1.default.createElement(S_ContentsArea, { areaColor: areaColor },
+                react_1.default.createElement(S_Content1, null, content1)))))));
 };
 var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: flex-start;\n  background-color: ", ";\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  min-width: 1200px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"], ["\n  align-items: flex-start;\n  background-color: ", ";\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  min-width: 1200px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFB.d.ts

@@ -5,6 +5,7 @@ export declare type WFBProps = {
     content2?: JSX.Element;
     containerColor?: string;
     areaColor?: string;
+    isLoadingContainer1?: boolean;
 };
-declare const WFB: ({ stepContent, content1, content2, containerColor, areaColor }: WFBProps) => JSX.Element;
+declare const WFB: ({ stepContent, content1, content2, containerColor, areaColor, isLoadingContainer1 }: WFBProps) => JSX.Element;
 export default WFB;

package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFB.js

@@ -9,14 +9,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
+var components_1 = require("../../../../../../common/components");
 var WFB = function (_a) {
-    var stepContent = _a.stepContent, content1 = _a.content1, content2 = _a.content2, containerColor = _a.containerColor, areaColor = _a.areaColor;
-    return (react_1.default.createElement(S_ContentsContainer, { containerColor: containerColor },
+    var stepContent = _a.stepContent, content1 = _a.content1, content2 = _a.content2, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1;
+    return (react_1.default.createElement(S_ContentsContainer, { containerColor: containerColor }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(S_SideArea, { areaColor: areaColor },
             react_1.default.createElement(S_StepContent, null, stepContent)),
         react_1.default.createElement(S_ContentsArea, { areaColor: areaColor },
             react_1.default.createElement(S_Content1, null, content1),
-            react_1.default.createElement(S_Content2, null, content2))));
+            react_1.default.createElement(S_Content2, null, content2))))));
 };
 var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: flex-start;\n  background-color: ", ";\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  min-width: 1200px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"], ["\n  align-items: flex-start;\n  background-color: ", ";\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  min-width: 1200px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFC.d.ts

@@ -3,6 +3,7 @@ export declare type WFCProps = {
     content1?: JSX.Element;
     containerColor?: string;
     areaColor?: string;
+    isLoadingContainer1?: boolean;
 };
-declare const WFC: ({ content1, containerColor, areaColor }: WFCProps) => JSX.Element;
+declare const WFC: ({ content1, containerColor, areaColor, isLoadingContainer1 }: WFCProps) => JSX.Element;
 export default WFC;

package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFC.js

@@ -9,11 +9,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
+var components_1 = require("../../../../../../common/components");
 var WFC = function (_a) {
-    var content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor;
-    return (react_1.default.createElement(S_ContentsContainer, { containerColor: containerColor },
-        react_1.default.createElement(S_ContentsArea, { areaColor: areaColor },
-            react_1.default.createElement(S_Content1, null, content1))));
+    var content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1;
+    return (react_1.default.createElement(S_ContentsContainer, { containerColor: containerColor }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea, { areaColor: areaColor },
+        react_1.default.createElement(S_Content1, null, content1)))));
 };
 var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  box-sizing: border-box;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"], ["\n  background-color: ", ";\n  box-sizing: border-box;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFD.d.ts

@@ -4,6 +4,7 @@ export declare type WFDProps = {
     layoutType: 'WFD_1' | 'WFD_2';
     containerColor?: string;
     areaColor?: string;
+    isLoadingContainer1?: boolean;
 };
-declare const WFD: ({ content1, layoutType, containerColor, areaColor }: WFDProps) => JSX.Element;
+declare const WFD: ({ content1, layoutType, containerColor, areaColor, isLoadingContainer1 }: WFDProps) => JSX.Element;
 export default WFD;

package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFD.js

@@ -9,11 +9,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
+var components_1 = require("../../../../../../common/components");
 var WFD = function (_a) {
-    var content1 = _a.content1, layoutType = _a.layoutType, containerColor = _a.containerColor, areaColor = _a.areaColor;
-    return (react_1.default.createElement(S_ContentsContainer, { layoutType: layoutType, containerColor: containerColor },
-        react_1.default.createElement(S_ContentsArea, { layoutType: layoutType, areaColor: areaColor },
-            react_1.default.createElement(S_Content1, { layoutType: layoutType }, content1))));
+    var content1 = _a.content1, layoutType = _a.layoutType, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1;
+    return (react_1.default.createElement(S_ContentsContainer, { layoutType: layoutType, containerColor: containerColor }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea, { layoutType: layoutType, areaColor: areaColor },
+        react_1.default.createElement(S_Content1, { layoutType: layoutType }, content1)))));
 };
 var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  box-sizing: border-box;\n  ", ";\n  ", ";\n"], ["\n  background-color: ", ";\n  box-sizing: border-box;\n  ", ";\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFE.d.ts

@@ -5,6 +5,7 @@ export declare type WFEProps = {
     content1?: JSX.Element;
     containerColor?: string;
     areaColor?: string;
+    isLoadingContainer1?: boolean;
 };
-declare const WFE: ({ layoutType, stepContent, content1, containerColor, areaColor }: WFEProps) => JSX.Element;
+declare const WFE: ({ layoutType, stepContent, content1, containerColor, areaColor, isLoadingContainer1 }: WFEProps) => JSX.Element;
 export default WFE;

package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFE.js

@@ -9,13 +9,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
+var components_1 = require("../../../../../../common/components");
 var WFE = function (_a) {
-    var layoutType = _a.layoutType, stepContent = _a.stepContent, content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor;
-    return (react_1.default.createElement(S_ContentsContainer, { layoutType: layoutType, containerColor: containerColor },
+    var layoutType = _a.layoutType, stepContent = _a.stepContent, content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1;
+    return (react_1.default.createElement(S_ContentsContainer, { layoutType: layoutType, containerColor: containerColor }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(S_SideArea, { layoutType: layoutType, areaColor: areaColor },
             react_1.default.createElement(S_StepContent, { layoutType: layoutType }, stepContent)),
         react_1.default.createElement(S_ContentsArea, { layoutType: layoutType, areaColor: areaColor },
-            react_1.default.createElement(S_Content1, { layoutType: layoutType }, content1))));
+            react_1.default.createElement(S_Content1, { layoutType: layoutType }, content1))))));
 };
 var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: flex-start;\n  background-color: ", ";\n  display: flex;\n  justify-content: center;\n  min-width: 1200px;\n  ", ";\n  ", ";\n"], ["\n  align-items: flex-start;\n  background-color: ", ";\n  display: flex;\n  justify-content: center;\n  min-width: 1200px;\n  ", ";\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFF.d.ts

@@ -3,6 +3,7 @@ export declare type WFFProps = {
     content1?: JSX.Element;
     containerColor?: string;
     areaColor?: string;
+    isLoadingContainer1?: boolean;
 };
-declare const WFF: ({ content1, containerColor, areaColor }: WFFProps) => JSX.Element;
+declare const WFF: ({ content1, containerColor, areaColor, isLoadingContainer1 }: WFFProps) => JSX.Element;
 export default WFF;

package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFF.js

@@ -9,11 +9,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
+var components_1 = require("../../../../../../common/components");
 var WFF = function (_a) {
-    var content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor;
-    return (react_1.default.createElement(S_ContentsContainer, { containerColor: containerColor },
-        react_1.default.createElement(S_ContentsArea, { areaColor: areaColor },
-            react_1.default.createElement(S_Content1, null, content1))));
+    var content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1;
+    return (react_1.default.createElement(S_ContentsContainer, { containerColor: containerColor }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea, { areaColor: areaColor },
+        react_1.default.createElement(S_Content1, null, content1)))));
 };
 var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  box-sizing: border-box;\n  height: 100%;\n  min-width: 960px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  padding-left: 24px;\n  ", ";\n"], ["\n  background-color: ", ";\n  box-sizing: border-box;\n  height: 100%;\n  min-width: 960px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  padding-left: 24px;\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFG.d.ts

@@ -5,6 +5,8 @@ export declare type WFGProps = {
     layoutType: 'WFG_1' | 'WFG_2' | 'WFG_3' | 'WFG_4' | 'WFG_5' | 'WFG_6';
     containerColor?: string;
     areaColor?: string;
+    isLoadingContainer1?: boolean;
+    isLoadingContainer2?: boolean;
 };
-declare const WFG: ({ content1, content2, layoutType, containerColor, areaColor }: WFGProps) => JSX.Element;
+declare const WFG: ({ content1, content2, layoutType, containerColor, areaColor, isLoadingContainer1, isLoadingContainer2 }: WFGProps) => JSX.Element;
 export default WFG;

package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFG.js

@@ -9,15 +9,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
+var components_1 = require("../../../../../../common/components");
 var WFG = function (_a) {
-    var content1 = _a.content1, content2 = _a.content2, layoutType = _a.layoutType, containerColor = _a.containerColor, areaColor = _a.areaColor;
+    var content1 = _a.content1, content2 = _a.content2, layoutType = _a.layoutType, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, isLoadingContainer2 = _a.isLoadingContainer2;
     return (react_1.default.createElement(S_Box, null,
-        react_1.default.createElement(S_ContentsContainer1, { layoutType: layoutType, containerColor: containerColor },
-            react_1.default.createElement(S_ContentsArea1, { layoutType: layoutType, areaColor: areaColor },
-                react_1.default.createElement(S_Content1, { layoutType: layoutType }, content1))),
-        react_1.default.createElement(S_ContentsContainer2, { layoutType: layoutType, containerColor: containerColor },
-            react_1.default.createElement(S_ContentsArea2, { layoutType: layoutType, areaColor: areaColor },
-                react_1.default.createElement(S_Content2, { layoutType: layoutType }, content2)))));
+        react_1.default.createElement(S_ContentsContainer1, { layoutType: layoutType, containerColor: containerColor }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea1, { layoutType: layoutType, areaColor: areaColor },
+            react_1.default.createElement(S_Content1, { layoutType: layoutType }, content1)))),
+        react_1.default.createElement(S_ContentsContainer2, { layoutType: layoutType, containerColor: containerColor }, isLoadingContainer2 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea2, { layoutType: layoutType, areaColor: areaColor },
+            react_1.default.createElement(S_Content2, { layoutType: layoutType }, content2))))));
 };
 var S_Box = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  height: 100%;\n"], ["\n  display: flex;\n  height: 100%;\n"])));
 var S_ContentsContainer1 = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  min-width: 480px;\n  width: 50%;\n  ", ";\n  ", ";\n"], ["\n  background-color: ", ";\n  min-width: 480px;\n  width: 50%;\n  ", ";\n  ", ";\n"])), function (_a) {