pds-dev-kit-web 1.5.11 → 1.6.1

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) {

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

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

package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFH.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 WFH = 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  padding-right: 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  padding-right: 24px;\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;

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

@@ -5,6 +5,8 @@ export declare type WFIProps = {
     layoutType: 'WFI_1' | 'WFI_2' | 'WFI_3' | 'WFI_4' | 'WFI_5' | 'WFI_6';
     containerColor?: string;
     areaColor?: string;
+    isLoadingContainer1?: boolean;
+    isLoadingContainer2?: boolean;
 };
-declare const WFI: ({ content1, content2, layoutType, containerColor, areaColor }: WFIProps) => JSX.Element;
+declare const WFI: ({ content1, content2, layoutType, containerColor, areaColor, isLoadingContainer1, isLoadingContainer2 }: WFIProps) => JSX.Element;
 export default WFI;

package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFI.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 WFI = 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) {

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

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

package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFJ.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 WFJ = 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  ", ";\n"], ["\n  background-color: ", ";\n  box-sizing: border-box;\n  height: 100%;\n  min-width: 960px;\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;

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

@@ -4,6 +4,8 @@ export declare type WFKProps = {
     content2?: JSX.Element;
     containerColor?: string;
     areaColor?: string;
+    isLoadingContainer1?: boolean;
+    isLoadingContainer2?: boolean;
 };
-declare const WFK: ({ content1, content2, containerColor, areaColor }: WFKProps) => JSX.Element;
+declare const WFK: ({ content1, content2, containerColor, areaColor, isLoadingContainer1, isLoadingContainer2 }: WFKProps) => JSX.Element;
 export default WFK;

package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFK.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 WFK = function (_a) {
-    var content1 = _a.content1, content2 = _a.content2, containerColor = _a.containerColor, areaColor = _a.areaColor;
+    var content1 = _a.content1, content2 = _a.content2, 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, { containerColor: containerColor },
-            react_1.default.createElement(S_ContentsArea1, { areaColor: areaColor },
-                react_1.default.createElement(S_Content1, null, content1))),
-        react_1.default.createElement(S_ContentsContainer2, { containerColor: containerColor },
-            react_1.default.createElement(S_ContentsArea2, { areaColor: areaColor },
-                react_1.default.createElement(S_Content2, null, content2)))));
+        react_1.default.createElement(S_ContentsContainer1, { containerColor: containerColor }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea1, { areaColor: areaColor },
+            react_1.default.createElement(S_Content1, null, content1)))),
+        react_1.default.createElement(S_ContentsContainer2, { containerColor: containerColor }, isLoadingContainer2 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea2, { areaColor: areaColor },
+            react_1.default.createElement(S_Content2, null, 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: 360px;\n  width: 40%;\n  height: 100%;\n  ", ";\n"], ["\n  background-color: ", ";\n  min-width: 360px;\n  width: 40%;\n  height: 100%;\n  ", ";\n"])), function (_a) {

package/dist/src/desktop/layout/LayoutWF/ContainersBox/ContainersBox.d.ts

@@ -10,6 +10,8 @@ export declare type ContainersBoxProps = {
     children?: React.ReactNode;
     containerColor?: string;
     areaColor?: string;
+    isLoadingContainer1?: boolean;
+    isLoadingContainer2?: boolean;
 };
-declare const ContainersBox: ({ layoutType, pageMenuContent, subMenuContent, tabMenuContent, stepContent, content1, content2, containerColor, areaColor }: ContainersBoxProps) => JSX.Element;
+declare const ContainersBox: ({ layoutType, pageMenuContent, subMenuContent, tabMenuContent, stepContent, content1, content2, containerColor, areaColor, isLoadingContainer1, isLoadingContainer2 }: ContainersBoxProps) => JSX.Element;
 export default ContainersBox;

package/dist/src/desktop/layout/LayoutWF/ContainersBox/ContainersBox.js

@@ -11,7 +11,7 @@ var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var Containers_1 = require("../Containers");
 var ContainersBox = function (_a) {
-    var layoutType = _a.layoutType, pageMenuContent = _a.pageMenuContent, subMenuContent = _a.subMenuContent, tabMenuContent = _a.tabMenuContent, stepContent = _a.stepContent, content1 = _a.content1, content2 = _a.content2, containerColor = _a.containerColor, areaColor = _a.areaColor;
+    var layoutType = _a.layoutType, pageMenuContent = _a.pageMenuContent, subMenuContent = _a.subMenuContent, tabMenuContent = _a.tabMenuContent, stepContent = _a.stepContent, content1 = _a.content1, content2 = _a.content2, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, isLoadingContainer2 = _a.isLoadingContainer2;
     return (react_1.default.createElement(S_ContainersBox, null,
         pageMenuContent && (react_1.default.createElement(S_TopWrapper, null,
             react_1.default.createElement(Containers_1.PageMenuContainer, { pageMenuContent: pageMenuContent }))),
@@ -68,7 +68,7 @@ var ContainersBox = function (_a) {
                     WFK_1: react_1.default.createElement(react_1.default.Fragment, null)
                 }[layoutType],
                 react_1.default.createElement(S_ContentsWrapper, null,
-                    react_1.default.createElement(Containers_1.ContentsContainer, { layoutType: layoutType, stepContent: stepContent, content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor }))))));
+                    react_1.default.createElement(Containers_1.ContentsContainer, { layoutType: layoutType, stepContent: stepContent, content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 }))))));
 };
 var S_ContainersBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n"])));
 var S_TopWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));

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

@@ -5,6 +5,8 @@ export declare type ContentsContainerProps = {
     layoutType: 'WSA_1' | 'WSB_1' | 'WSC_1' | 'WSD_1' | 'WSE_1' | 'WSF_1' | 'WSF_2' | 'WSF_3' | 'WSF_4' | 'WSF_5' | 'WSF_6' | 'WSF_7' | 'WSG_1' | 'WSG_2' | 'WSG_3' | 'WSG_4' | 'WSG_5';
     containerColor?: string;
     areaColor?: string;
+    isLoadingContainer1?: boolean;
+    isLoadingContainer2?: boolean;
 };
-declare const ContentsContainer: ({ content1, content2, layoutType, containerColor, areaColor }: ContentsContainerProps) => JSX.Element;
+declare const ContentsContainer: ({ content1, content2, layoutType, containerColor, areaColor, isLoadingContainer1, isLoadingContainer2 }: ContentsContainerProps) => JSX.Element;
 export default ContentsContainer;

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

@@ -6,25 +6,25 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var variation_1 = require("./variation");
 var ContentsContainer = 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(react_1.default.Fragment, null, {
-        WSA_1: react_1.default.createElement(variation_1.WSA, { content1: content1, containerColor: containerColor, areaColor: areaColor }),
-        WSB_1: react_1.default.createElement(variation_1.WSB, { content1: content1, containerColor: containerColor, areaColor: areaColor }),
-        WSC_1: react_1.default.createElement(variation_1.WSC, { content1: content1, containerColor: containerColor, areaColor: areaColor }),
-        WSD_1: react_1.default.createElement(variation_1.WSD, { content1: content1, containerColor: containerColor, areaColor: areaColor }),
-        WSE_1: (react_1.default.createElement(variation_1.WSE, { content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
-        WSF_1: (react_1.default.createElement(variation_1.WSF, { layoutType: "WSF_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
-        WSF_2: (react_1.default.createElement(variation_1.WSF, { layoutType: "WSF_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
-        WSF_3: (react_1.default.createElement(variation_1.WSF, { layoutType: "WSF_3", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
-        WSF_4: (react_1.default.createElement(variation_1.WSF, { layoutType: "WSF_4", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
-        WSF_5: (react_1.default.createElement(variation_1.WSF, { layoutType: "WSF_5", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
-        WSF_6: (react_1.default.createElement(variation_1.WSF, { layoutType: "WSF_6", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
-        WSF_7: (react_1.default.createElement(variation_1.WSF, { layoutType: "WSF_7", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
-        WSG_1: (react_1.default.createElement(variation_1.WSG, { layoutType: "WSG_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
-        WSG_2: (react_1.default.createElement(variation_1.WSG, { layoutType: "WSG_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
-        WSG_3: (react_1.default.createElement(variation_1.WSG, { layoutType: "WSG_3", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
-        WSG_4: (react_1.default.createElement(variation_1.WSG, { layoutType: "WSG_4", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
-        WSG_5: (react_1.default.createElement(variation_1.WSG, { layoutType: "WSG_5", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor }))
+        WSA_1: (react_1.default.createElement(variation_1.WSA, { content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
+        WSB_1: (react_1.default.createElement(variation_1.WSB, { content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
+        WSC_1: (react_1.default.createElement(variation_1.WSC, { content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
+        WSD_1: (react_1.default.createElement(variation_1.WSD, { content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
+        WSE_1: (react_1.default.createElement(variation_1.WSE, { content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
+        WSF_1: (react_1.default.createElement(variation_1.WSF, { layoutType: "WSF_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
+        WSF_2: (react_1.default.createElement(variation_1.WSF, { layoutType: "WSF_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
+        WSF_3: (react_1.default.createElement(variation_1.WSF, { layoutType: "WSF_3", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
+        WSF_4: (react_1.default.createElement(variation_1.WSF, { layoutType: "WSF_4", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
+        WSF_5: (react_1.default.createElement(variation_1.WSF, { layoutType: "WSF_5", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
+        WSF_6: (react_1.default.createElement(variation_1.WSF, { layoutType: "WSF_6", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
+        WSF_7: (react_1.default.createElement(variation_1.WSF, { layoutType: "WSF_7", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
+        WSG_1: (react_1.default.createElement(variation_1.WSG, { layoutType: "WSG_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
+        WSG_2: (react_1.default.createElement(variation_1.WSG, { layoutType: "WSG_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
+        WSG_3: (react_1.default.createElement(variation_1.WSG, { layoutType: "WSG_3", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
+        WSG_4: (react_1.default.createElement(variation_1.WSG, { layoutType: "WSG_4", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
+        WSG_5: (react_1.default.createElement(variation_1.WSG, { layoutType: "WSG_5", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 }))
     }[layoutType]));
 };
 exports.default = ContentsContainer;

package/dist/src/desktop/layout/LayoutWS/Containers/ContentsContainer/variation/WSA.d.ts

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

package/dist/src/desktop/layout/LayoutWS/Containers/ContentsContainer/variation/WSA.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 WSA = 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  padding-right: 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  padding-right: 24px;\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/desktop/layout/LayoutWS/Containers/ContentsContainer/variation/WSB.d.ts

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

package/dist/src/desktop/layout/LayoutWS/Containers/ContentsContainer/variation/WSB.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 WSB = 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  height: 100%;\n  min-width: 960px;\n  overflow: hidden;\n  ", ";\n"], ["\n  background-color: ", ";\n  height: 100%;\n  min-width: 960px;\n  overflow: hidden;\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/desktop/layout/LayoutWS/Containers/ContentsContainer/variation/WSC.d.ts

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

package/dist/src/desktop/layout/LayoutWS/Containers/ContentsContainer/variation/WSC.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 WSC = 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  padding: 24px;\n  ", ";\n"], ["\n  background-color: ", ";\n  box-sizing: border-box;\n  height: 100%;\n  min-width: 960px;\n  padding: 24px;\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/desktop/layout/LayoutWS/Containers/ContentsContainer/variation/WSD.d.ts

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

package/dist/src/desktop/layout/LayoutWS/Containers/ContentsContainer/variation/WSD.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 WSD = 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/LayoutWS/Containers/ContentsContainer/variation/WSE.d.ts

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

package/dist/src/desktop/layout/LayoutWS/Containers/ContentsContainer/variation/WSE.js

@@ -9,12 +9,12 @@ 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 WSE = function (_a) {
-    var content1 = _a.content1, content2 = _a.content2, 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),
-            react_1.default.createElement(S_Content2, null, content2))));
+    var 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(S_ContentsArea, { areaColor: areaColor },
+        react_1.default.createElement(S_Content1, null, content1),
+        react_1.default.createElement(S_Content2, null, content2)))));
 };
 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  padding-left: 24px;\n  padding-right: 24px;\n  ", ";\n"], ["\n  background-color: ", ";\n  box-sizing: border-box;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  padding-left: 24px;\n  padding-right: 24px;\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/desktop/layout/LayoutWS/Containers/ContentsContainer/variation/WSF.d.ts

@@ -5,6 +5,8 @@ export declare type WSFProps = {
     layoutType: 'WSF_1' | 'WSF_2' | 'WSF_3' | 'WSF_4' | 'WSF_5' | 'WSF_6' | 'WSF_7';
     containerColor?: string;
     areaColor?: string;
+    isLoadingContainer1?: boolean;
+    isLoadingContainer2?: boolean;
 };
-declare const WSF: ({ content1, content2, layoutType, containerColor, areaColor }: WSFProps) => JSX.Element;
+declare const WSF: ({ content1, content2, layoutType, containerColor, areaColor, isLoadingContainer1, isLoadingContainer2 }: WSFProps) => JSX.Element;
 export default WSF;

package/dist/src/desktop/layout/LayoutWS/Containers/ContentsContainer/variation/WSF.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 WSF = 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) {

package/dist/src/desktop/layout/LayoutWS/Containers/ContentsContainer/variation/WSG.d.ts

@@ -5,6 +5,8 @@ export declare type WSGProps = {
     layoutType: 'WSG_1' | 'WSG_2' | 'WSG_3' | 'WSG_4' | 'WSG_5';
     containerColor?: string;
     areaColor?: string;
+    isLoadingContainer1?: boolean;
+    isLoadingContainer2?: boolean;
 };
-declare const WSG: ({ content1, content2, layoutType, containerColor, areaColor }: WSGProps) => JSX.Element;
+declare const WSG: ({ content1, content2, layoutType, containerColor, areaColor, isLoadingContainer1, isLoadingContainer2 }: WSGProps) => JSX.Element;
 export default WSG;

package/dist/src/desktop/layout/LayoutWS/Containers/ContentsContainer/variation/WSG.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 WSG = 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) {

package/dist/src/desktop/layout/LayoutWS/ContainersBox/ContainersBox.d.ts

@@ -8,6 +8,8 @@ export declare type ContainersBoxProps = {
     children?: React.ReactNode;
     containerColor?: string;
     areaColor?: string;
+    isLoadingContainer1?: boolean;
+    isLoadingContainer2?: boolean;
 };
-declare const ContainersBox: ({ layoutType, pageMenuContent, content1, content2, containerColor, areaColor }: ContainersBoxProps) => JSX.Element;
+declare const ContainersBox: ({ layoutType, pageMenuContent, content1, content2, containerColor, areaColor, isLoadingContainer1, isLoadingContainer2 }: ContainersBoxProps) => JSX.Element;
 export default ContainersBox;

package/dist/src/desktop/layout/LayoutWS/ContainersBox/ContainersBox.js

@@ -11,12 +11,12 @@ var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var Containers_1 = require("../Containers");
 var ContainersBox = function (_a) {
-    var layoutType = _a.layoutType, pageMenuContent = _a.pageMenuContent, content1 = _a.content1, content2 = _a.content2, containerColor = _a.containerColor, areaColor = _a.areaColor;
+    var layoutType = _a.layoutType, pageMenuContent = _a.pageMenuContent, content1 = _a.content1, content2 = _a.content2, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, isLoadingContainer2 = _a.isLoadingContainer2;
     return (react_1.default.createElement(S_ContainersBox, null,
         react_1.default.createElement(S_TopWrapper, null,
             react_1.default.createElement(Containers_1.PageMenuContainer, { pageMenuContent: pageMenuContent })),
         react_1.default.createElement(S_BottomWrapper, null,
-            react_1.default.createElement(Containers_1.ContentsContainer, { layoutType: layoutType, content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor }))));
+            react_1.default.createElement(Containers_1.ContentsContainer, { layoutType: layoutType, content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 }))));
 };
 var S_ContainersBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n"])));
 var S_TopWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));

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

@@ -5,7 +5,9 @@ export declare type ContentsContainerProps = {
     layoutType: 'WTA_1' | 'WTA_2' | 'WTA_3' | 'WTB_1' | 'WTC_1' | 'WTD_1' | 'WTD_2' | 'WTD_3' | 'WTD_4' | 'WTD_5' | 'WTD_6' | 'WTE_1' | 'WTF_1' | 'WTF_2' | 'WTF_3' | 'WTF_4' | 'WTF_5' | 'WTF_6' | 'WTG_1' | 'WTH_1' | 'WTH_2' | 'WTH_3' | 'WTI_1' | 'WTI_2' | 'WTJ_1' | 'WTK_1' | 'WTK_2' | 'WTK_3' | 'WTL_1' | 'WTM_1' | 'WTM_2' | 'WTN_1' | 'WTN_2' | 'WTN_3' | 'WTO_1' | 'WTP_1' | 'WTQ_1' | 'WTS_1' | 'WTS_2' | 'WTT_1' | 'WTT_2' | 'WTU_1';
     containerColor?: string;
     areaColor?: string;
+    isLoadingContainer1?: boolean;
+    isLoadingContainer2?: boolean;
     container1Ref?: MutableRefObject<HTMLDivElement | null>;
 };
-declare const ContentsContainer: ({ content1, content2, layoutType, containerColor, areaColor, container1Ref }: ContentsContainerProps) => JSX.Element;
+declare const ContentsContainer: ({ content1, content2, layoutType, containerColor, areaColor, isLoadingContainer1, isLoadingContainer2, container1Ref }: ContentsContainerProps) => JSX.Element;
 export default ContentsContainer;