diff --git a/packages/asc-web-common/components/Loaders/DialogAsideLoader/DialogAsideLoader.js b/packages/asc-web-common/components/Loaders/DialogAsideLoader/DialogAsideLoader.js
new file mode 100644
index 00000000000..2aca8af3227
--- /dev/null
+++ b/packages/asc-web-common/components/Loaders/DialogAsideLoader/DialogAsideLoader.js
@@ -0,0 +1,41 @@
+import React from "react";
+import Loaders from "../../Loaders";
+import StyledDialogAsideLoader from "./StyledDialogAsideLoader";
+import Aside from "@appserver/components/aside";
+import Backdrop from "@appserver/components/backdrop";
+
+const DialogAsideLoader = ({ isPanel, withoutAside }) => {
+  const zIndex = 310;
+
+  const renderClearDialogAsideLoader = () => {
+    return (
+      <StyledDialogAsideLoader visible isPanel={isPanel}>
+        <div className="dialog-loader-header">
+          <Loaders.Rectangle />
+        </div>
+        <div className="dialog-loader-body">
+          <Loaders.Rectangle height="200px" />
+        </div>
+
+        <div className="dialog-loader-footer">
+          <Loaders.Rectangle />
+        </div>
+      </StyledDialogAsideLoader>
+    );
+  };
+
+  return withoutAside ? (
+    renderClearDialogAsideLoader()
+  ) : (
+    <>
+      <Backdrop visible isAside />
+      <StyledDialogAsideLoader visible isPanel={isPanel}>
+        <Aside className="dialog-aside-loader" visible zIndex={zIndex}>
+          {renderClearDialogAsideLoader()}
+        </Aside>
+      </StyledDialogAsideLoader>
+    </>
+  );
+};
+
+export default DialogAsideLoader;
diff --git a/packages/asc-web-common/components/Loaders/DialogAsideLoader/StyledDialogAsideLoader.js b/packages/asc-web-common/components/Loaders/DialogAsideLoader/StyledDialogAsideLoader.js
new file mode 100644
index 00000000000..19b438b8630
--- /dev/null
+++ b/packages/asc-web-common/components/Loaders/DialogAsideLoader/StyledDialogAsideLoader.js
@@ -0,0 +1,59 @@
+import styled, { css } from "styled-components";
+
+const StyledDialogAsideLoader = styled.div`
+  ${(props) =>
+    props.isPanel &&
+    css`
+      .dialog-aside-loader {
+        padding: 0;
+        transform: translateX(${(props) => (props.visible ? "0" : "500px")});
+        width: 500px;
+
+        @media (max-width: 550px) {
+          width: 320px;
+          transform: translateX(${(props) => (props.visible ? "0" : "320px")});
+        }
+      }
+    `}
+
+  ${(props) =>
+    props.isPanel
+      ? css`
+          .dialog-loader-header {
+            padding: 12px 16px;
+          }
+
+          .dialog-loader-body {
+            padding: 16px;
+          }
+
+          .dialog-loader-footer {
+            padding: 12px 16px;
+            position: fixed;
+            bottom: 0;
+            width: 468px;
+
+            @media (max-width: 550px) {
+              width: 288px;
+            }
+          }
+        `
+      : css`
+          .dialog-loader-header {
+            border-bottom: 1px solid rgb(222, 226, 230);
+            padding: 12px 0;
+          }
+
+          .dialog-loader-body {
+            padding: 16px 0;
+          }
+
+          .dialog-loader-footer {
+            position: fixed;
+            bottom: 16px;
+            width: 293px;
+          }
+        `}
+`;
+
+export default StyledDialogAsideLoader;
diff --git a/packages/asc-web-common/components/Loaders/DialogAsideLoader/index.js b/packages/asc-web-common/components/Loaders/DialogAsideLoader/index.js
new file mode 100644
index 00000000000..93a057aee83
--- /dev/null
+++ b/packages/asc-web-common/components/Loaders/DialogAsideLoader/index.js
@@ -0,0 +1 @@
+export default from "./DialogAsideLoader";
diff --git a/packages/asc-web-common/components/Loaders/DialogLoader/DialogLoader.js b/packages/asc-web-common/components/Loaders/DialogLoader/DialogLoader.js
new file mode 100644
index 00000000000..a94b6b8b1e0
--- /dev/null
+++ b/packages/asc-web-common/components/Loaders/DialogLoader/DialogLoader.js
@@ -0,0 +1,32 @@
+import React from "react";
+import Loaders from "../../Loaders";
+import StyledDialogLoader from "./StyledDialogLoader";
+
+const DialogLoader = () => {
+  return (
+    <StyledDialogLoader>
+      <div className="dialog-loader-header">
+        <Loaders.Rectangle height="28px" width="470px" />
+        <Loaders.Rectangle
+          className="dialog-loader-icon"
+          height="28px"
+          width="28px"
+        />
+      </div>
+      <div className="dialog-loader-body">
+        <Loaders.Rectangle height="150px" />
+      </div>
+
+      <div className="dialog-loader-footer">
+        <Loaders.Rectangle height="30px" width="120px" />
+        <Loaders.Rectangle
+          className="dialog-loader-icon"
+          height="30px"
+          width="100px"
+        />
+      </div>
+    </StyledDialogLoader>
+  );
+};
+
+export default DialogLoader;
diff --git a/packages/asc-web-common/components/Loaders/DialogLoader/StyledDialogLoader.js b/packages/asc-web-common/components/Loaders/DialogLoader/StyledDialogLoader.js
new file mode 100644
index 00000000000..d4f33b77f1c
--- /dev/null
+++ b/packages/asc-web-common/components/Loaders/DialogLoader/StyledDialogLoader.js
@@ -0,0 +1,27 @@
+import styled from "styled-components";
+
+const StyledDialogLoader = styled.div`
+  .dialog-loader-header {
+    border-bottom: 1px solid rgb(222, 226, 230);
+    display: flex;
+    padding: 12px 0;
+  }
+
+  .dialog-loader-body {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding-top: 12px;
+  }
+
+  .dialog-loader-footer {
+    display: flex;
+    padding-top: 12px;
+  }
+
+  .dialog-loader-icon {
+    margin-left: auto;
+  }
+`;
+
+export default StyledDialogLoader;
diff --git a/packages/asc-web-common/components/Loaders/DialogLoader/index.js b/packages/asc-web-common/components/Loaders/DialogLoader/index.js
new file mode 100644
index 00000000000..7f451024a10
--- /dev/null
+++ b/packages/asc-web-common/components/Loaders/DialogLoader/index.js
@@ -0,0 +1 @@
+export default from "./DialogLoader";
diff --git a/packages/asc-web-common/components/Loaders/TreeFolderLoader/TreeFolderLoader.js b/packages/asc-web-common/components/Loaders/TreeFolderLoader/TreeFolderLoader.js
index a3a3fe91895..4217798d250 100644
--- a/packages/asc-web-common/components/Loaders/TreeFolderLoader/TreeFolderLoader.js
+++ b/packages/asc-web-common/components/Loaders/TreeFolderLoader/TreeFolderLoader.js
@@ -2,7 +2,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import { StyledTreeFolder, StyledContainer } from "./StyledTreeFolderLoader";
 import RectangleLoader from "../RectangleLoader";
-import CircleLoader from "../CircleLoader";
+import TreeNodeLoader from "../TreeNodeLoader";
 
 const TreeFolderLoader = ({ id, className, style, ...rest }) => {
   const {
@@ -19,173 +19,19 @@ const TreeFolderLoader = ({ id, className, style, ...rest }) => {
   return (
     <div id={id} className={className} style={style}>
       <StyledTreeFolder>
-        <CircleLoader
-          title={title}
-          height="32"
-          radius="3"
-          backgroundColor={backgroundColor}
-          foregroundColor={foregroundColor}
-          backgroundOpacity={backgroundOpacity}
-          foregroundOpacity={foregroundOpacity}
-          speed={speed}
-          animate={animate}
-        />
-        <RectangleLoader
-          title={title}
-          width="100%"
-          height="24"
-          borderRadius={borderRadius}
-          backgroundColor={backgroundColor}
-          foregroundColor={foregroundColor}
-          backgroundOpacity={backgroundOpacity}
-          foregroundOpacity={foregroundOpacity}
-          speed={speed}
-          animate={animate}
-        />
-        <CircleLoader
-          title={title}
-          height="32"
-          radius="3"
-          backgroundColor={backgroundColor}
-          foregroundColor={foregroundColor}
-          backgroundOpacity={backgroundOpacity}
-          foregroundOpacity={foregroundOpacity}
-          speed={speed}
-          animate={animate}
-        />
-        <RectangleLoader
-          title={title}
-          width="100%"
-          height="24"
-          borderRadius={borderRadius}
-          backgroundColor={backgroundColor}
-          foregroundColor={foregroundColor}
-          backgroundOpacity={backgroundOpacity}
-          foregroundOpacity={foregroundOpacity}
-          speed={speed}
-          animate={animate}
-        />
-        <CircleLoader
-          title={title}
-          height="32"
-          radius="3"
-          backgroundColor={backgroundColor}
-          foregroundColor={foregroundColor}
-          backgroundOpacity={backgroundOpacity}
-          foregroundOpacity={foregroundOpacity}
-          speed={speed}
-          animate={animate}
-        />
-        <RectangleLoader
-          title={title}
-          width="100%"
-          height="24"
-          borderRadius={borderRadius}
-          backgroundColor={backgroundColor}
-          foregroundColor={foregroundColor}
-          backgroundOpacity={backgroundOpacity}
-          foregroundOpacity={foregroundOpacity}
-          speed={speed}
-          animate={animate}
-        />
+        <TreeNodeLoader {...rest} />
+        <TreeNodeLoader {...rest} />
+        <TreeNodeLoader {...rest} />
       </StyledTreeFolder>
 
       <StyledTreeFolder>
-        <CircleLoader
-          title={title}
-          height="32"
-          radius="3"
-          backgroundColor={backgroundColor}
-          foregroundColor={foregroundColor}
-          backgroundOpacity={backgroundOpacity}
-          foregroundOpacity={foregroundOpacity}
-          speed={speed}
-          animate={animate}
-        />
-        <RectangleLoader
-          title={title}
-          width="100%"
-          height="24"
-          borderRadius={borderRadius}
-          backgroundColor={backgroundColor}
-          foregroundColor={foregroundColor}
-          backgroundOpacity={backgroundOpacity}
-          foregroundOpacity={foregroundOpacity}
-          speed={speed}
-          animate={animate}
-        />
-        <CircleLoader
-          title={title}
-          height="32"
-          radius="3"
-          backgroundColor={backgroundColor}
-          foregroundColor={foregroundColor}
-          backgroundOpacity={backgroundOpacity}
-          foregroundOpacity={foregroundOpacity}
-          speed={speed}
-          animate={animate}
-        />
-        <RectangleLoader
-          title={title}
-          width="100%"
-          height="24"
-          borderRadius={borderRadius}
-          backgroundColor={backgroundColor}
-          foregroundColor={foregroundColor}
-          backgroundOpacity={backgroundOpacity}
-          foregroundOpacity={foregroundOpacity}
-          speed={speed}
-          animate={animate}
-        />
-        <CircleLoader
-          title={title}
-          height="32"
-          radius="3"
-          backgroundColor={backgroundColor}
-          foregroundColor={foregroundColor}
-          backgroundOpacity={backgroundOpacity}
-          foregroundOpacity={foregroundOpacity}
-          speed={speed}
-          animate={animate}
-        />
-        <RectangleLoader
-          title={title}
-          width="100%"
-          height="24"
-          borderRadius={borderRadius}
-          backgroundColor={backgroundColor}
-          foregroundColor={foregroundColor}
-          backgroundOpacity={backgroundOpacity}
-          foregroundOpacity={foregroundOpacity}
-          speed={speed}
-          animate={animate}
-        />
+        <TreeNodeLoader {...rest} />
+        <TreeNodeLoader {...rest} />
+        <TreeNodeLoader {...rest} />
       </StyledTreeFolder>
 
       <StyledTreeFolder>
-        <CircleLoader
-          title={title}
-          radius="3"
-          height="32"
-          backgroundColor={backgroundColor}
-          foregroundColor={foregroundColor}
-          backgroundOpacity={backgroundOpacity}
-          foregroundOpacity={foregroundOpacity}
-          speed={speed}
-          animate={animate}
-        />
-        <RectangleLoader
-          title={title}
-          width="100%"
-          height="24"
-          borderRadius={borderRadius}
-          backgroundColor={backgroundColor}
-          foregroundColor={foregroundColor}
-          backgroundOpacity={backgroundOpacity}
-          foregroundOpacity={foregroundOpacity}
-          speed={speed}
-          animate={animate}
-        />
+        <TreeNodeLoader {...rest} />
       </StyledTreeFolder>
 
       <StyledContainer>
diff --git a/packages/asc-web-common/components/Loaders/TreeNodeLoader/TreeNodeLoader.js b/packages/asc-web-common/components/Loaders/TreeNodeLoader/TreeNodeLoader.js
new file mode 100644
index 00000000000..2ad3531aa52
--- /dev/null
+++ b/packages/asc-web-common/components/Loaders/TreeNodeLoader/TreeNodeLoader.js
@@ -0,0 +1,44 @@
+import React from "react";
+import RectangleLoader from "../RectangleLoader";
+import CircleLoader from "../CircleLoader";
+
+const TreeNodeLoader = ({
+  title,
+  borderRadius,
+  backgroundColor,
+  foregroundColor,
+  backgroundOpacity,
+  foregroundOpacity,
+  speed,
+  animate,
+}) => {
+  return (
+    <>
+      <CircleLoader
+        title={title}
+        height="32"
+        radius="3"
+        backgroundColor={backgroundColor}
+        foregroundColor={foregroundColor}
+        backgroundOpacity={backgroundOpacity}
+        foregroundOpacity={foregroundOpacity}
+        speed={speed}
+        animate={animate}
+      />
+      <RectangleLoader
+        title={title}
+        width="100%"
+        height="24"
+        borderRadius={borderRadius}
+        backgroundColor={backgroundColor}
+        foregroundColor={foregroundColor}
+        backgroundOpacity={backgroundOpacity}
+        foregroundOpacity={foregroundOpacity}
+        speed={speed}
+        animate={animate}
+      />
+    </>
+  );
+};
+
+export default TreeNodeLoader;
diff --git a/packages/asc-web-common/components/Loaders/TreeNodeLoader/index.js b/packages/asc-web-common/components/Loaders/TreeNodeLoader/index.js
new file mode 100644
index 00000000000..81d7a967c7e
--- /dev/null
+++ b/packages/asc-web-common/components/Loaders/TreeNodeLoader/index.js
@@ -0,0 +1 @@
+export default from "./TreeNodeLoader";
diff --git a/packages/asc-web-common/components/Loaders/TreeSettingsLoader/StyledTreeSettingsLoader.js b/packages/asc-web-common/components/Loaders/TreeSettingsLoader/StyledTreeSettingsLoader.js
new file mode 100644
index 00000000000..9171b5d0c17
--- /dev/null
+++ b/packages/asc-web-common/components/Loaders/TreeSettingsLoader/StyledTreeSettingsLoader.js
@@ -0,0 +1,12 @@
+import styled from "styled-components";
+
+const StyledTreeSettingsLoader = styled.div`
+  width: 90%;
+  display: grid;
+  grid-template-columns: 8px 1fr;
+  grid-template-rows: 1fr;
+  grid-column-gap: 6px;
+  margin: 24px 0;
+`;
+
+export default StyledTreeSettingsLoader;
diff --git a/packages/asc-web-common/components/Loaders/TreeSettingsLoader/TreeSettingsLoader.js b/packages/asc-web-common/components/Loaders/TreeSettingsLoader/TreeSettingsLoader.js
new file mode 100644
index 00000000000..f0fdf434f18
--- /dev/null
+++ b/packages/asc-web-common/components/Loaders/TreeSettingsLoader/TreeSettingsLoader.js
@@ -0,0 +1,28 @@
+import React from "react";
+import PropTypes from "prop-types";
+import StyledTreeSettingsLoader from "./StyledTreeSettingsLoader";
+import TreeNodeLoader from "../TreeNodeLoader";
+
+const TreeSettingsLoader = ({ id, className, style, ...rest }) => {
+  return (
+    <div id={id} className={className} style={style}>
+      <StyledTreeSettingsLoader>
+        <TreeNodeLoader {...rest} />
+      </StyledTreeSettingsLoader>
+    </div>
+  );
+};
+
+TreeSettingsLoader.propTypes = {
+  id: PropTypes.string,
+  className: PropTypes.string,
+  style: PropTypes.object,
+};
+
+TreeSettingsLoader.defaultProps = {
+  id: undefined,
+  className: undefined,
+  style: undefined,
+};
+
+export default TreeSettingsLoader;
diff --git a/packages/asc-web-common/components/Loaders/TreeSettingsLoader/index.js b/packages/asc-web-common/components/Loaders/TreeSettingsLoader/index.js
new file mode 100644
index 00000000000..dba2dfe9df8
--- /dev/null
+++ b/packages/asc-web-common/components/Loaders/TreeSettingsLoader/index.js
@@ -0,0 +1 @@
+export default from "./TreeSettingsLoader";
diff --git a/packages/asc-web-common/components/Loaders/index.js b/packages/asc-web-common/components/Loaders/index.js
index 729ea41a801..4c9035cbffa 100644
--- a/packages/asc-web-common/components/Loaders/index.js
+++ b/packages/asc-web-common/components/Loaders/index.js
@@ -4,6 +4,7 @@ import Header from "./HeaderLoader";
 import SectionHeader from "./SectionHeaderLoader";
 import ArticleHeader from "./ArticleHeaderLoader";
 import TreeFolders from "./TreeFolderLoader";
+import TreeSettingsLoader from "./TreeSettingsLoader";
 import Row from "./RowLoader";
 import Rows from "./RowsLoader";
 import Text from "./TextLoader";
@@ -14,6 +15,8 @@ import Group from "./GroupLoader";
 import HistoryRows from "./HistoryRowsLoader";
 import Tile from "./TileLoader";
 import Tiles from "./TilesLoader";
+import DialogLoader from "./DialogLoader";
+import DialogAsideLoader from "./DialogAsideLoader";
 
 export default {
   Rectangle,
@@ -22,6 +25,7 @@ export default {
   SectionHeader,
   ArticleHeader,
   TreeFolders,
+  TreeSettingsLoader,
   Row,
   Rows,
   Text,
@@ -32,4 +36,6 @@ export default {
   HistoryRows,
   Tile,
   Tiles,
+  DialogLoader,
+  DialogAsideLoader,
 };
diff --git a/packages/asc-web-components/modal-dialog/index.js b/packages/asc-web-components/modal-dialog/index.js
index e877714ddab..27fcfc36f8f 100644
--- a/packages/asc-web-components/modal-dialog/index.js
+++ b/packages/asc-web-components/modal-dialog/index.js
@@ -15,6 +15,7 @@ import {
   BodyBox,
 } from "./styled-modal-dialog";
 import Portal from "../portal";
+import Loaders from "@appserver/common/components/Loaders";
 
 function Header() {
   return null;
@@ -104,6 +105,7 @@ class ModalDialog extends React.Component {
       id,
       style,
       children,
+      isLoading,
     } = this.props;
 
     let header = null;
@@ -143,16 +145,22 @@ class ModalDialog extends React.Component {
             style={style}
           >
             <Content contentHeight={contentHeight} contentWidth={contentWidth}>
-              <StyledHeader>
-                <Heading className="heading" size="medium" truncate={true}>
-                  {header ? header.props.children : null}
-                </Heading>
-                <CloseButton onClick={onClose}></CloseButton>
-              </StyledHeader>
-              <BodyBox paddingProp={bodyPadding}>
-                {body ? body.props.children : null}
-              </BodyBox>
-              <Box>{footer ? footer.props.children : null}</Box>
+              {isLoading ? (
+                <Loaders.DialogLoader />
+              ) : (
+                <>
+                  <StyledHeader>
+                    <Heading className="heading" size="medium" truncate={true}>
+                      {header ? header.props.children : null}
+                    </Heading>
+                    <CloseButton onClick={onClose}></CloseButton>
+                  </StyledHeader>
+                  <BodyBox paddingProp={bodyPadding}>
+                    {body ? body.props.children : null}
+                  </BodyBox>
+                  <Box>{footer ? footer.props.children : null}</Box>
+                </>
+              )}
             </Content>
           </Dialog>
         </Backdrop>
@@ -171,21 +179,27 @@ class ModalDialog extends React.Component {
             className="modal-dialog-aside not-selectable"
           >
             <Content contentHeight={contentHeight} contentWidth={contentWidth}>
-              <StyledHeader className="modal-dialog-aside-header">
-                <Heading className="heading" size="medium" truncate={true}>
-                  {header ? header.props.children : null}
-                </Heading>
-                {scale ? <CloseButton onClick={onClose}></CloseButton> : ""}
-              </StyledHeader>
-              <BodyBox
-                className="modal-dialog-aside-body"
-                paddingProp={bodyPadding}
-              >
-                {body ? body.props.children : null}
-              </BodyBox>
-              <Box className="modal-dialog-aside-footer">
-                {footer ? footer.props.children : null}
-              </Box>
+              {isLoading ? (
+                <Loaders.DialogAsideLoader withoutAside />
+              ) : (
+                <>
+                  <StyledHeader className="modal-dialog-aside-header">
+                    <Heading className="heading" size="medium" truncate={true}>
+                      {header ? header.props.children : null}
+                    </Heading>
+                    {scale ? <CloseButton onClick={onClose}></CloseButton> : ""}
+                  </StyledHeader>
+                  <BodyBox
+                    className="modal-dialog-aside-body"
+                    paddingProp={bodyPadding}
+                  >
+                    {body ? body.props.children : null}
+                  </BodyBox>
+                  <Box className="modal-dialog-aside-footer">
+                    {footer ? footer.props.children : null}
+                  </Box>
+                </>
+              )}
             </Content>
           </Aside>
         </Box>
@@ -214,6 +228,7 @@ ModalDialog.propTypes = {
   bodyPadding: PropTypes.string,
   contentHeight: PropTypes.string,
   contentWidth: PropTypes.string,
+  isLoading: PropTypes.bool,
   className: PropTypes.string,
   id: PropTypes.string,
   style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
diff --git a/products/ASC.CRM/Client/public/index.html b/products/ASC.CRM/Client/public/index.html
index 8eb5fffff02..974dc7a9dbd 100644
--- a/products/ASC.CRM/Client/public/index.html
+++ b/products/ASC.CRM/Client/public/index.html
@@ -91,7 +91,7 @@
 
     <div id="root"></div>
 
-    <div id="temp-content">
+    <div id="temp-content" style="display: none">
       <header class="temp-header-container">
         <div id="burger-loader-svg" class="burger-loader-svg">
           <svg
diff --git a/products/ASC.Calendar/Client/public/index.html b/products/ASC.Calendar/Client/public/index.html
index 189720883bf..ce8ffc10edd 100644
--- a/products/ASC.Calendar/Client/public/index.html
+++ b/products/ASC.Calendar/Client/public/index.html
@@ -91,7 +91,7 @@
 
     <div id="root"></div>
 
-    <div id="temp-content">
+    <div id="temp-content" style="display: none">
       <header class="temp-header-container">
         <div id="burger-loader-svg" class="burger-loader-svg">
           <svg
diff --git a/products/ASC.Files/Client/src/HOCs/withFileActions.js b/products/ASC.Files/Client/src/HOCs/withFileActions.js
index cb86f9b5725..827d1b0b6e2 100644
--- a/products/ASC.Files/Client/src/HOCs/withFileActions.js
+++ b/products/ASC.Files/Client/src/HOCs/withFileActions.js
@@ -155,14 +155,7 @@ export default function withFileActions(WrappedFileItem) {
 
         this.onFilesClick();
       } else {
-        if (checked) {
-          this.onContentFileSelect(!checked, item);
-          this.fileContextClick();
-        } else {
-          if (!isMouseDown) return;
-          this.onContentFileSelect(true, item);
-          this.fileContextClick();
-        }
+        this.fileContextClick();
       }
       this.setState({ isMouseDown: false });
     };
@@ -208,7 +201,7 @@ export default function withFileActions(WrappedFileItem) {
           addExpandedKeys(parentFolder + "");
         }
 
-        fetchFiles(id, filter)
+        fetchFiles(id)
           .then((data) => {
             const pathParts = data.selectedFolder.pathParts;
             const newExpandedKeys = createTreeFolders(pathParts, expandedKeys);
diff --git a/products/ASC.Files/Client/src/HOCs/withLoader.js b/products/ASC.Files/Client/src/HOCs/withLoader.js
index 070b8abcc79..c9537ba1af8 100644
--- a/products/ASC.Files/Client/src/HOCs/withLoader.js
+++ b/products/ASC.Files/Client/src/HOCs/withLoader.js
@@ -5,7 +5,7 @@ import { isMobile } from "react-device-detect";
 import Loaders from "@appserver/common/components/Loaders";
 
 let loadTimeout = null;
-export default function withLoader(WrappedComponent, type) {
+const withLoader = (WrappedComponent) => (Loader) => {
   const withLoader = (props) => {
     const { tReady, firstLoad, isLoaded, isLoading, viewAs } = props;
     const [inLoad, setInLoad] = useState(false);
@@ -34,7 +34,9 @@ export default function withLoader(WrappedComponent, type) {
     }, [isLoading]);
 
     return firstLoad || !isLoaded || (isMobile && inLoad) || !tReady ? (
-      viewAs === "tile" ? (
+      Loader ? (
+        Loader
+      ) : viewAs === "tile" ? (
         <Loaders.Tiles />
       ) : (
         <Loaders.Rows />
@@ -53,4 +55,5 @@ export default function withLoader(WrappedComponent, type) {
       viewAs,
     };
   })(observer(withLoader));
-}
+};
+export default withLoader;
diff --git a/products/ASC.Files/Client/src/components/Article/Body/ThirdPartyList.js b/products/ASC.Files/Client/src/components/Article/Body/ThirdPartyList.js
index b7e95274a37..2b813da9f83 100644
--- a/products/ASC.Files/Client/src/components/Article/Body/ThirdPartyList.js
+++ b/products/ASC.Files/Client/src/components/Article/Body/ThirdPartyList.js
@@ -9,6 +9,8 @@ import { withRouter } from "react-router";
 import { combineUrl } from "@appserver/common/utils";
 import { AppServerConfig } from "@appserver/common/constants";
 import config from "../../../../package.json";
+import Loaders from "@appserver/common/components/Loaders";
+import withLoader from "../../../HOCs/withLoader";
 
 const StyledThirdParty = styled.div`
   margin-top: 42px;
@@ -71,6 +73,10 @@ const StyledThirdParty = styled.div`
   }
 `;
 
+const StyledRectangleLoader = styled(Loaders.Rectangle)`
+  margin-top: 42px;
+`;
+
 const ServiceItem = (props) => {
   const { capability, src, ...rest } = props;
 
@@ -212,7 +218,7 @@ const PureThirdPartyListContainer = ({
 };
 
 const ThirdPartyList = withTranslation(["Article", "Translations"])(
-  withRouter(PureThirdPartyListContainer)
+  withRouter(withLoader(PureThirdPartyListContainer)(<StyledRectangleLoader />))
 );
 
 export default inject(
diff --git a/products/ASC.Files/Client/src/components/Article/Body/TreeSettings.js b/products/ASC.Files/Client/src/components/Article/Body/TreeSettings.js
index 2500bf4cde2..f2e216e1905 100644
--- a/products/ASC.Files/Client/src/components/Article/Body/TreeSettings.js
+++ b/products/ASC.Files/Client/src/components/Article/Body/TreeSettings.js
@@ -12,6 +12,8 @@ import commonIconsStyles from "@appserver/components/utils/common-icons-style";
 import config from "../../../../package.json";
 import { combineUrl } from "@appserver/common/utils";
 import { AppServerConfig } from "@appserver/common/constants";
+import Loaders from "@appserver/common/components/Loaders";
+import withLoader from "../../../HOCs/withLoader";
 
 const StyledTreeMenu = styled(TreeMenu)`
   margin-top: 18px !important;
@@ -210,7 +212,7 @@ const PureTreeSettings = ({
 };
 
 const TreeSettings = withTranslation(["Settings", "Common"])(
-  withRouter(PureTreeSettings)
+  withRouter(withLoader(PureTreeSettings)(<Loaders.TreeSettingsLoader />))
 );
 
 export default inject(
diff --git a/products/ASC.Files/Client/src/components/Article/Body/index.js b/products/ASC.Files/Client/src/components/Article/Body/index.js
index 21603239a33..ddf6d47e35a 100644
--- a/products/ASC.Files/Client/src/components/Article/Body/index.js
+++ b/products/ASC.Files/Client/src/components/Article/Body/index.js
@@ -12,6 +12,7 @@ import { withRouter } from "react-router-dom";
 import config from "../../../../package.json";
 import { clickBackdrop, combineUrl } from "@appserver/common/utils";
 import { AppServerConfig } from "@appserver/common/constants";
+import FilesFilter from "@appserver/common/api/files/filter";
 
 class ArticleBodyContent extends React.Component {
   constructor(props) {
@@ -46,11 +47,6 @@ class ArticleBodyContent extends React.Component {
     setSelectedNode(data);
     setIsLoading(true);
 
-    const newFilter = filter.clone();
-    newFilter.page = 0;
-    newFilter.startIndex = 0;
-    newFilter.folder = data[0];
-
     const selectedFolderTitle =
       (e.node && e.node.props && e.node.props.title) || null;
 
@@ -59,12 +55,11 @@ class ArticleBodyContent extends React.Component {
       : setDocumentTitle();
 
     if (window.location.pathname.indexOf("/filter") > 0) {
-      fetchFiles(data[0], newFilter)
+      fetchFiles(data[0])
         .catch((err) => toastr.error(err))
         .finally(() => setIsLoading(false));
     } else {
-      newFilter.startIndex = 0;
-      const urlFilter = newFilter.toUrlParams();
+      const urlFilter = FilesFilter.getDefault().toUrlParams();
       history.push(
         combineUrl(AppServerConfig.proxyURL, homepage, `/filter?${urlFilter}`)
       );
diff --git a/products/ASC.Files/Client/src/components/Article/MainButton/index.js b/products/ASC.Files/Client/src/components/Article/MainButton/index.js
index 69ab930c6ba..73842a60a19 100644
--- a/products/ASC.Files/Client/src/components/Article/MainButton/index.js
+++ b/products/ASC.Files/Client/src/components/Article/MainButton/index.js
@@ -11,8 +11,9 @@ import { encryptionUploadDialog } from "../../../helpers/desktop";
 import { inject, observer } from "mobx-react";
 import config from "../../../../package.json";
 import { combineUrl } from "@appserver/common/utils";
+import withLoader from "../../../HOCs/withLoader";
 
-class PureArticleMainButtonContent extends React.Component {
+class ArticleMainButtonContent extends React.Component {
   onCreate = (e) => {
     // this.goToHomePage();
     const format = e.currentTarget.dataset.format || null;
@@ -64,11 +65,16 @@ class PureArticleMainButtonContent extends React.Component {
 
   render() {
     //console.log("Files ArticleMainButtonContent render");
-    const { t, canCreate, isDisabled, firstLoad, isPrivacy } = this.props;
+    const {
+      t,
+      tReady,
+      canCreate,
+      isDisabled,
+      firstLoad,
+      isPrivacy,
+    } = this.props;
 
-    return firstLoad ? (
-      <Loaders.Rectangle />
-    ) : (
+    return (
       <MainButton
         isDisabled={isDisabled ? isDisabled : !canCreate}
         isDropdown={true}
@@ -143,10 +149,6 @@ class PureArticleMainButtonContent extends React.Component {
   }
 }
 
-const ArticleMainButtonContent = withTranslation(["Article", "Common"])(
-  PureArticleMainButtonContent
-);
-
 ArticleMainButtonContent.propTypes = {
   history: PropTypes.object.isRequired,
 };
@@ -166,4 +168,12 @@ export default inject(({ filesStore, uploadDataStore, treeFoldersStore }) => {
     setAction: fileActionStore.setAction,
     startUpload,
   };
-})(withRouter(observer(ArticleMainButtonContent)));
+})(
+  withRouter(
+    withTranslation(["Article", "Common"])(
+      withLoader(observer(ArticleMainButtonContent))(
+        <Loaders.Rectangle width="217px" />
+      )
+    )
+  )
+);
diff --git a/products/ASC.Files/Client/src/components/dialogs/ConflictResolveDialog/index.js b/products/ASC.Files/Client/src/components/dialogs/ConflictResolveDialog/index.js
index 8bb90036395..3dd1afffe25 100644
--- a/products/ASC.Files/Client/src/components/dialogs/ConflictResolveDialog/index.js
+++ b/products/ASC.Files/Client/src/components/dialogs/ConflictResolveDialog/index.js
@@ -12,6 +12,7 @@ import { ConflictResolveType } from "@appserver/common/constants";
 const ConflictResolveDialog = (props) => {
   const {
     t,
+    tReady,
     visible,
     setConflictResolveDialogVisible,
     conflictResolveDialogData,
@@ -110,7 +111,11 @@ const ConflictResolveDialog = (props) => {
   const file = items[0].title;
 
   return (
-    <ModalDialogContainer visible={visible} onClose={onClose}>
+    <ModalDialogContainer
+      isLoading={!tReady}
+      visible={visible}
+      onClose={onClose}
+    >
       <ModalDialog.Header>{t("ConflictResolveTitle")}</ModalDialog.Header>
       <ModalDialog.Body>
         <Text className="conflict-resolve-dialog-text">
diff --git a/products/ASC.Files/Client/src/components/dialogs/ConnectDialog/index.js b/products/ASC.Files/Client/src/components/dialogs/ConnectDialog/index.js
index 3e457991e8b..2749160420b 100644
--- a/products/ASC.Files/Client/src/components/dialogs/ConnectDialog/index.js
+++ b/products/ASC.Files/Client/src/components/dialogs/ConnectDialog/index.js
@@ -14,6 +14,7 @@ const PureConnectDialogContainer = (props) => {
   const {
     visible,
     t,
+    tReady,
     item,
     treeFolders,
     fetchThirdPartyProviders,
@@ -185,7 +186,12 @@ const PureConnectDialogContainer = (props) => {
   }, [setToken, token]);
 
   return (
-    <ModalDialog visible={visible} zIndex={310} onClose={onClose}>
+    <ModalDialog
+      isLoading={!tReady}
+      visible={visible}
+      zIndex={310}
+      onClose={onClose}
+    >
       <ModalDialog.Header>
         {t("Translations:ConnectingAccount")}
       </ModalDialog.Header>
diff --git a/products/ASC.Files/Client/src/components/dialogs/ConvertDialog/index.js b/products/ASC.Files/Client/src/components/dialogs/ConvertDialog/index.js
index c7ad894910f..f086be181ec 100644
--- a/products/ASC.Files/Client/src/components/dialogs/ConvertDialog/index.js
+++ b/products/ASC.Files/Client/src/components/dialogs/ConvertDialog/index.js
@@ -7,11 +7,12 @@ import Text from "@appserver/components/text";
 import Checkbox from "@appserver/components/checkbox";
 import { withTranslation } from "react-i18next";
 import { inject, observer } from "mobx-react";
+import Loaders from "@appserver/common/components/Loaders";
 
 const ConvertDialogComponent = (props) => {
   const {
     t,
-    //tReady,
+    tReady,
     visible,
     folderId,
     convertFile,
@@ -48,10 +49,12 @@ const ConvertDialogComponent = (props) => {
     }
   };
 
-  const tReady = true;
-
-  return tReady ? (
-    <ModalDialogContainer visible={visible} onClose={onClose}>
+  return (
+    <ModalDialogContainer
+      isLoading={!tReady}
+      visible={visible}
+      onClose={onClose}
+    >
       <ModalDialog.Header>
         {convertSingleFile ? t("ConvertAndOpenTitle") : t("ConversionTitle")}
       </ModalDialog.Header>
@@ -105,8 +108,6 @@ const ConvertDialogComponent = (props) => {
         </div>
       </ModalDialog.Footer>
     </ModalDialogContainer>
-  ) : (
-    <></>
   );
 };
 
diff --git a/products/ASC.Files/Client/src/components/dialogs/DeleteDialog/index.js b/products/ASC.Files/Client/src/components/dialogs/DeleteDialog/index.js
index 3e118331403..441c38bca03 100644
--- a/products/ASC.Files/Client/src/components/dialogs/DeleteDialog/index.js
+++ b/products/ASC.Files/Client/src/components/dialogs/DeleteDialog/index.js
@@ -99,7 +99,14 @@ class DeleteDialogComponent extends React.Component {
   };
 
   render() {
-    const { visible, t, isLoading, unsubscribe, isPrivacyFolder } = this.props;
+    const {
+      visible,
+      t,
+      tReady,
+      isLoading,
+      unsubscribe,
+      isPrivacyFolder,
+    } = this.props;
     const { filesList, foldersList, selection } = this.state;
 
     const checkedSelections = selection.filter((x) => x.checked === true);
@@ -122,6 +129,12 @@ class DeleteDialogComponent extends React.Component {
         : t("MoveToTrashOneFolderNote")
       : t("MoveToTrashItemsNote");
 
+    const accessButtonLabel = isPrivacyFolder
+      ? t("Common:OKButton")
+      : unsubscribe
+      ? t("UnsubscribeButton")
+      : t("MoveToTrashButton");
+
     const accuracy = 20;
     let filesHeight = 25 * filesList.length + accuracy + 8;
     let foldersHeight = 25 * foldersList.length + accuracy + 8;
@@ -135,7 +148,11 @@ class DeleteDialogComponent extends React.Component {
     const height = filesHeight + foldersHeight;
 
     return (
-      <ModalDialogContainer visible={visible} onClose={this.onClose}>
+      <ModalDialogContainer
+        isLoading={!tReady}
+        visible={visible}
+        onClose={this.onClose}
+      >
         <ModalDialog.Header>{title}</ModalDialog.Header>
         <ModalDialog.Body>
           <div className="modal-dialog-content">
@@ -181,9 +198,7 @@ class DeleteDialogComponent extends React.Component {
           <Button
             className="button-dialog-accept"
             key="OkButton"
-            label={
-              unsubscribe ? t("UnsubscribeButton") : t("MoveToTrashButton")
-            }
+            label={accessButtonLabel}
             size="medium"
             primary
             onClick={unsubscribe ? this.onUnsubscribe : this.onDelete}
diff --git a/products/ASC.Files/Client/src/components/dialogs/DeleteThirdPartyDialog/index.js b/products/ASC.Files/Client/src/components/dialogs/DeleteThirdPartyDialog/index.js
index de7561b643d..92d011e4cbd 100644
--- a/products/ASC.Files/Client/src/components/dialogs/DeleteThirdPartyDialog/index.js
+++ b/products/ASC.Files/Client/src/components/dialogs/DeleteThirdPartyDialog/index.js
@@ -12,6 +12,7 @@ const DeleteThirdPartyDialog = (props) => {
   const {
     t,
     myId,
+    tReady,
     visible,
     commonId,
     providers,
@@ -63,7 +64,12 @@ const DeleteThirdPartyDialog = (props) => {
   };
 
   return (
-    <ModalDialog visible={visible} zIndex={310} onClose={onClose}>
+    <ModalDialog
+      isLoading={!tReady}
+      visible={visible}
+      zIndex={310}
+      onClose={onClose}
+    >
       <ModalDialog.Header>
         {t("Translations:DeleteThirdParty")}
       </ModalDialog.Header>
diff --git a/products/ASC.Files/Client/src/components/dialogs/DownloadDialog/index.js b/products/ASC.Files/Client/src/components/dialogs/DownloadDialog/index.js
index 6af54a383ae..04167bfbb31 100644
--- a/products/ASC.Files/Client/src/components/dialogs/DownloadDialog/index.js
+++ b/products/ASC.Files/Client/src/components/dialogs/DownloadDialog/index.js
@@ -396,7 +396,7 @@ class DownloadDialogComponent extends React.Component {
   };
 
   render() {
-    const { visible, t } = this.props;
+    const { visible, t, tReady } = this.props;
     const {
       documentsTitleFormat,
       spreadsheetsTitleFormat,
@@ -427,7 +427,11 @@ class DownloadDialogComponent extends React.Component {
       1;
 
     return (
-      <ModalDialogContainer visible={visible} onClose={this.onClose}>
+      <ModalDialogContainer
+        isLoading={!tReady}
+        visible={visible}
+        onClose={this.onClose}
+      >
         <ModalDialog.Header>{t("Translations:DownloadAs")}</ModalDialog.Header>
         <ModalDialog.Body>
           <Text>{t("ChooseFormatText")}</Text>
diff --git a/products/ASC.Files/Client/src/components/dialogs/EmptyTrashDialog/index.js b/products/ASC.Files/Client/src/components/dialogs/EmptyTrashDialog/index.js
index 8ee70db4c72..b82568ff08c 100644
--- a/products/ASC.Files/Client/src/components/dialogs/EmptyTrashDialog/index.js
+++ b/products/ASC.Files/Client/src/components/dialogs/EmptyTrashDialog/index.js
@@ -14,6 +14,7 @@ const EmptyTrashDialogComponent = (props) => {
   const {
     visible,
     t,
+    tReady,
     filter,
     currentFolderId,
     setSecondaryProgressBarData,
@@ -115,7 +116,11 @@ const EmptyTrashDialogComponent = (props) => {
   ]);
 
   return (
-    <ModalDialogContainer visible={visible} onClose={onClose}>
+    <ModalDialogContainer
+      isLoading={!tReady}
+      visible={visible}
+      onClose={onClose}
+    >
       <ModalDialog.Header>{t("DeleteForeverTitle")}</ModalDialog.Header>
       <ModalDialog.Body>
         <Text>{t("DeleteForeverNote")}</Text>
diff --git a/products/ASC.Files/Client/src/components/dialogs/ThirdPartyDialog/index.js b/products/ASC.Files/Client/src/components/dialogs/ThirdPartyDialog/index.js
index f9e03e82f26..02a9cd067af 100644
--- a/products/ASC.Files/Client/src/components/dialogs/ThirdPartyDialog/index.js
+++ b/products/ASC.Files/Client/src/components/dialogs/ThirdPartyDialog/index.js
@@ -61,6 +61,7 @@ const ServiceItem = (props) => {
 const ThirdPartyDialog = (props) => {
   const {
     t,
+    tReady,
     isAdmin,
     googleConnectItem,
     boxConnectItem,
@@ -120,6 +121,7 @@ const ThirdPartyDialog = (props) => {
 
   return (
     <ModalDialog
+      isLoading={!tReady}
       visible={visible}
       scale={false}
       displayType="auto"
diff --git a/products/ASC.Files/Client/src/components/dialogs/ThirdPartyMoveDialog/index.js b/products/ASC.Files/Client/src/components/dialogs/ThirdPartyMoveDialog/index.js
index fccd4c1fcf0..64035be99cc 100644
--- a/products/ASC.Files/Client/src/components/dialogs/ThirdPartyMoveDialog/index.js
+++ b/products/ASC.Files/Client/src/components/dialogs/ThirdPartyMoveDialog/index.js
@@ -15,6 +15,7 @@ const StyledOperationDialog = styled.div`
 
 const PureThirdPartyMoveContainer = ({
   t,
+  tReady,
   visible,
   provider,
   selection,
@@ -58,7 +59,12 @@ const PureThirdPartyMoveContainer = ({
 
   return (
     <StyledOperationDialog>
-      <ModalDialog visible={visible} zIndex={zIndex} onClose={onClose}>
+      <ModalDialog
+        isLoading={!tReady}
+        visible={visible}
+        zIndex={zIndex}
+        onClose={onClose}
+      >
         <ModalDialog.Header>{t("MoveConfirmation")}</ModalDialog.Header>
         <ModalDialog.Body>
           <Text>{t("MoveConfirmationMessage", { provider })}</Text>
diff --git a/products/ASC.Files/Client/src/components/panels/AddGroupsPanel/index.js b/products/ASC.Files/Client/src/components/panels/AddGroupsPanel/index.js
index 25a6d9fd4cd..6327531138f 100644
--- a/products/ASC.Files/Client/src/components/panels/AddGroupsPanel/index.js
+++ b/products/ASC.Files/Client/src/components/panels/AddGroupsPanel/index.js
@@ -14,6 +14,8 @@ import {
   StyledBody,
 } from "../StyledPanels";
 import AccessComboBox from "../SharingPanel/AccessComboBox";
+import Loaders from "@appserver/common/components/Loaders";
+import withLoader from "../../../HOCs/withLoader";
 
 class AddGroupsPanelComponent extends React.Component {
   constructor(props) {
@@ -174,4 +176,6 @@ AddGroupsPanelComponent.propTypes = {
   onClose: PropTypes.func,
 };
 
-export default withTranslation("SharingPanel")(AddGroupsPanelComponent);
+export default withTranslation("SharingPanel")(
+  withLoader(AddGroupsPanelComponent)(<Loaders.DialogAsideLoader isPanel />)
+);
diff --git a/products/ASC.Files/Client/src/components/panels/AddUsersPanel/index.js b/products/ASC.Files/Client/src/components/panels/AddUsersPanel/index.js
index d3a5759dd44..aa6e009f524 100644
--- a/products/ASC.Files/Client/src/components/panels/AddUsersPanel/index.js
+++ b/products/ASC.Files/Client/src/components/panels/AddUsersPanel/index.js
@@ -14,6 +14,8 @@ import {
   StyledBody,
 } from "../StyledPanels";
 import AccessComboBox from "../SharingPanel/AccessComboBox";
+import Loaders from "@appserver/common/components/Loaders";
+import withLoader from "../../../HOCs/withLoader";
 
 class AddUsersPanelComponent extends React.Component {
   constructor(props) {
@@ -190,5 +192,5 @@ AddUsersPanelComponent.propTypes = {
 };
 
 export default withTranslation(["SharingPanel", "Translations"])(
-  AddUsersPanelComponent
+  withLoader(AddUsersPanelComponent)(<Loaders.DialogAsideLoader isPanel />)
 );
diff --git a/products/ASC.Files/Client/src/components/panels/ChangeOwnerPanel/OwnerSelector.js b/products/ASC.Files/Client/src/components/panels/ChangeOwnerPanel/OwnerSelector.js
index efa76197721..17f3a9c3a5d 100644
--- a/products/ASC.Files/Client/src/components/panels/ChangeOwnerPanel/OwnerSelector.js
+++ b/products/ASC.Files/Client/src/components/panels/ChangeOwnerPanel/OwnerSelector.js
@@ -3,6 +3,7 @@ import PeopleSelector from "people/PeopleSelector";
 import Aside from "@appserver/components/aside";
 import Backdrop from "@appserver/components/backdrop";
 import Heading from "@appserver/components/heading";
+import IconButton from "@appserver/components/icon-button";
 import {
   StyledAddUsersPanelPanel,
   StyledContent,
@@ -11,7 +12,14 @@ import {
 } from "../StyledPanels";
 
 const OwnerSelector = (props) => {
-  const { ownerLabel, isOpen, groupsCaption, onOwnerSelect, onClose } = props;
+  const {
+    ownerLabel,
+    isOpen,
+    groupsCaption,
+    onOwnerSelect,
+    onClose,
+    onClosePanel,
+  } = props;
 
   const zIndex = 310;
 
@@ -26,6 +34,12 @@ const OwnerSelector = (props) => {
       <Aside className="header_aside-panel">
         <StyledContent>
           <StyledHeaderContent>
+            <IconButton
+              size="16"
+              iconName="/static/images/arrow.path.react.svg"
+              onClick={onClosePanel}
+              color="#A3A9AE"
+            />
             <Heading
               className="header_aside-panel-header"
               size="medium"
diff --git a/products/ASC.Files/Client/src/components/panels/ChangeOwnerPanel/index.js b/products/ASC.Files/Client/src/components/panels/ChangeOwnerPanel/index.js
index 37e1ee878a7..b741ef441fd 100644
--- a/products/ASC.Files/Client/src/components/panels/ChangeOwnerPanel/index.js
+++ b/products/ASC.Files/Client/src/components/panels/ChangeOwnerPanel/index.js
@@ -17,6 +17,8 @@ import {
   StyledBody,
 } from "../StyledPanels";
 import { inject, observer } from "mobx-react";
+import Loaders from "@appserver/common/components/Loaders";
+import withLoader from "../../../HOCs/withLoader";
 
 class ChangeOwnerComponent extends React.Component {
   constructor(props) {
@@ -109,17 +111,17 @@ class ChangeOwnerComponent extends React.Component {
                 <Text>{t("ChangeOwnerDescription")}</Text>
               </div>
             </StyledBody>
+            <StyledFooter>
+              <Button
+                label={t("Common:SaveButton")}
+                size="medium"
+                scale
+                primary
+                onClick={this.onOwnerChange}
+                isDisabled={disableSaveButton || isLoading}
+              />
+            </StyledFooter>
           </StyledContent>
-          <StyledFooter>
-            <Button
-              label={t("Common:SaveButton")}
-              size="medium"
-              scale
-              primary
-              onClick={this.onOwnerChange}
-              isDisabled={disableSaveButton || isLoading}
-            />
-          </StyledFooter>
         </Aside>
         {showPeopleSelector && (
           <OwnerSelector
@@ -128,7 +130,7 @@ class ChangeOwnerComponent extends React.Component {
             groupsCaption={groupsCaption}
             onOwnerSelect={this.onOwnerSelect}
             onClose={this.onClose}
-            onClosePanels={this.onClosePanels}
+            onClosePanel={this.onShowPeopleSelector}
           />
         )}
       </StyledAsidePanel>
@@ -137,7 +139,7 @@ class ChangeOwnerComponent extends React.Component {
 }
 
 const ChangeOwnerPanel = withTranslation(["ChangeOwnerPanel", "Common"])(
-  ChangeOwnerComponent
+  withLoader(ChangeOwnerComponent)(<Loaders.DialogAsideLoader isPanel />)
 );
 
 export default inject(({ auth, filesStore, dialogsStore }) => {
diff --git a/products/ASC.Files/Client/src/components/panels/NewFilesPanel/index.js b/products/ASC.Files/Client/src/components/panels/NewFilesPanel/index.js
index e9660a440bc..98272d63676 100644
--- a/products/ASC.Files/Client/src/components/panels/NewFilesPanel/index.js
+++ b/products/ASC.Files/Client/src/components/panels/NewFilesPanel/index.js
@@ -24,6 +24,8 @@ import { inject, observer } from "mobx-react";
 import { combineUrl } from "@appserver/common/utils";
 import { AppServerConfig } from "@appserver/common/constants";
 import config from "../../../../package.json";
+import Loaders from "@appserver/common/components/Loaders";
+import withLoader from "../../../HOCs/withLoader";
 
 class NewFilesPanel extends React.Component {
   state = { readingFiles: [] };
@@ -291,6 +293,8 @@ export default inject(
   }
 )(
   withRouter(
-    withTranslation(["NewFilesPanel", "Common"])(observer(NewFilesPanel))
+    withTranslation(["NewFilesPanel", "Common"])(
+      withLoader(observer(NewFilesPanel))(<Loaders.DialogAsideLoader isPanel />)
+    )
   )
 );
diff --git a/products/ASC.Files/Client/src/components/panels/OperationsPanel/index.js b/products/ASC.Files/Client/src/components/panels/OperationsPanel/index.js
index 28521b4a4c9..5ae056c691c 100644
--- a/products/ASC.Files/Client/src/components/panels/OperationsPanel/index.js
+++ b/products/ASC.Files/Client/src/components/panels/OperationsPanel/index.js
@@ -10,6 +10,7 @@ import toastr from "studio/toastr";
 const OperationsPanelComponent = (props) => {
   const {
     t,
+    tReady,
     filter,
     isCopy,
     visible,
@@ -104,6 +105,7 @@ const OperationsPanelComponent = (props) => {
         displayType="aside"
         zIndex={zIndex}
         onClose={onClose}
+        isLoading={!tReady}
       >
         <ModalDialog.Header>
           {isRecycleBin
diff --git a/products/ASC.Files/Client/src/components/panels/SharingPanel/index.js b/products/ASC.Files/Client/src/components/panels/SharingPanel/index.js
index 5cae06a7b89..70639285171 100644
--- a/products/ASC.Files/Client/src/components/panels/SharingPanel/index.js
+++ b/products/ASC.Files/Client/src/components/panels/SharingPanel/index.js
@@ -10,7 +10,6 @@ import DropDownItem from "@appserver/components/drop-down-item";
 import Textarea from "@appserver/components/textarea";
 import Loader from "@appserver/components/loader";
 import Text from "@appserver/components/text";
-import { withRouter } from "react-router";
 import { withTranslation, Trans } from "react-i18next";
 import toastr from "studio/toastr";
 import { ShareAccessRights } from "@appserver/common/constants";
@@ -28,6 +27,8 @@ import config from "../../../../package.json";
 import i18n from "./i18n";
 import { I18nextProvider } from "react-i18next";
 import { isMobile } from "react-device-detect";
+import Loaders from "@appserver/common/components/Loaders";
+import withLoader from "../../../HOCs/withLoader";
 
 const SharingBodyStyle = { height: `calc(100vh - 156px)` };
 
@@ -380,7 +381,7 @@ class SharingPanelComponent extends React.Component {
       this.onClose();
     }
 
-    if (this.state.message === prevState.message) {
+    if (this.state.message === prevState.message && this.scrollRef.current) {
       this.scrollRef.current.view.focus();
     }
   }
@@ -389,6 +390,7 @@ class SharingPanelComponent extends React.Component {
     //console.log("Sharing panel render");
     const {
       t,
+      tReady,
       isMyId,
       selection,
       groupsCaption,
@@ -660,7 +662,7 @@ const SharingPanel = inject(
 )(
   observer(
     withTranslation(["SharingPanel", "Common", "Translations"])(
-      SharingPanelComponent
+      withLoader(SharingPanelComponent)(<Loaders.DialogAsideLoader isPanel />)
     )
   )
 );
diff --git a/products/ASC.Files/Client/src/components/panels/UploadPanel/index.js b/products/ASC.Files/Client/src/components/panels/UploadPanel/index.js
index 66054a84665..0f160032bbb 100644
--- a/products/ASC.Files/Client/src/components/panels/UploadPanel/index.js
+++ b/products/ASC.Files/Client/src/components/panels/UploadPanel/index.js
@@ -13,6 +13,8 @@ import {
 } from "../StyledPanels";
 import FileList from "./FileList";
 import { inject, observer } from "mobx-react";
+import Loaders from "@appserver/common/components/Loaders";
+import withLoader from "../../../HOCs/withLoader";
 
 class UploadPanelComponent extends React.Component {
   constructor(props) {
@@ -135,7 +137,9 @@ class UploadPanelComponent extends React.Component {
   }
 }
 
-const UploadPanel = withTranslation("UploadPanel")(UploadPanelComponent);
+const UploadPanel = withTranslation("UploadPanel")(
+  withLoader(UploadPanelComponent)(<Loaders.DialogAsideLoader isPanel />)
+);
 
 export default inject(({ /* dialogsStore, */ uploadDataStore }) => {
   //const { sharingPanelVisible } = dialogsStore;
diff --git a/products/ASC.Files/Client/src/pages/Home/Section/Body/index.js b/products/ASC.Files/Client/src/pages/Home/Section/Body/index.js
index c2e9b6973d5..37c31007ba9 100644
--- a/products/ASC.Files/Client/src/pages/Home/Section/Body/index.js
+++ b/products/ASC.Files/Client/src/pages/Home/Section/Body/index.js
@@ -6,7 +6,6 @@ import { observer, inject } from "mobx-react";
 import FilesRowContainer from "./RowsView/FilesRowContainer";
 import FilesTileContainer from "./TilesView/FilesTileContainer";
 import EmptyContainer from "../../../../components/EmptyContainer";
-
 import withLoader from "../../../../HOCs/withLoader";
 
 let currentDroppable = null;
@@ -203,7 +202,7 @@ export default inject(
 )(
   withRouter(
     withTranslation(["Home", "Translations"])(
-      withLoader(observer(SectionBodyContent))
+      withLoader(observer(SectionBodyContent))()
     )
   )
 );
diff --git a/products/ASC.Files/Client/src/pages/Home/Section/Header/index.js b/products/ASC.Files/Client/src/pages/Home/Section/Header/index.js
index 8e7cdcd1127..9ff490d96ba 100644
--- a/products/ASC.Files/Client/src/pages/Home/Section/Header/index.js
+++ b/products/ASC.Files/Client/src/pages/Home/Section/Header/index.js
@@ -453,6 +453,7 @@ class SectionHeaderContent extends React.Component {
 
     const {
       t,
+      tReady,
       isHeaderVisible,
       isHeaderChecked,
       isHeaderIndeterminate,
@@ -493,7 +494,7 @@ class SectionHeaderContent extends React.Component {
               </div>
             ) : (
               <div className="header-container">
-                {!title ? (
+                {!title || !tReady ? (
                   <Loaders.SectionHeader />
                 ) : (
                   <>
diff --git a/products/ASC.Files/Client/src/pages/Home/Section/Paging/index.js b/products/ASC.Files/Client/src/pages/Home/Section/Paging/index.js
index 492d9276fee..108b3a8d69f 100644
--- a/products/ASC.Files/Client/src/pages/Home/Section/Paging/index.js
+++ b/products/ASC.Files/Client/src/pages/Home/Section/Paging/index.js
@@ -12,6 +12,7 @@ const SectionPagingContent = ({
   setIsLoading,
   selectedCount,
   selectedFolderId,
+  tReady,
 }) => {
   const { t } = useTranslation("Home");
   const onNextClick = useCallback(
@@ -140,7 +141,7 @@ const SectionPagingContent = ({
       );
   }, [files, folders, filter, pageItems]);
 
-  return filter.total < filter.pageCount && filter.total < 26 ? (
+  return !tReady || (filter.total < filter.pageCount && filter.total < 26) ? (
     <></>
   ) : (
     <Paging
diff --git a/products/ASC.Files/Client/src/pages/Home/index.js b/products/ASC.Files/Client/src/pages/Home/index.js
index 80a422b8d21..67760b815e3 100644
--- a/products/ASC.Files/Client/src/pages/Home/index.js
+++ b/products/ASC.Files/Client/src/pages/Home/index.js
@@ -240,6 +240,7 @@ class PureHome extends React.Component {
 
       isLoading,
       dragging,
+      tReady,
     } = this.props;
     return (
       <>
@@ -297,7 +298,7 @@ class PureHome extends React.Component {
           </PageLayout.SectionBody>
 
           <PageLayout.SectionPaging>
-            <SectionPagingContent />
+            <SectionPagingContent tReady={tReady} />
           </PageLayout.SectionPaging>
         </PageLayout>
       </>
diff --git a/products/ASC.Files/Client/src/pages/Settings/Section/Body/index.js b/products/ASC.Files/Client/src/pages/Settings/Section/Body/index.js
index bfcd62b4180..d82188cd755 100644
--- a/products/ASC.Files/Client/src/pages/Settings/Section/Body/index.js
+++ b/products/ASC.Files/Client/src/pages/Settings/Section/Body/index.js
@@ -44,7 +44,6 @@ const SectionBodyContent = ({
   setForceSave,
   isAdmin,
   isErrorSettings,
-  isLoadedSettingsTree,
   settingsIsLoaded,
   treeFolders,
   myFolderId,
@@ -81,7 +80,7 @@ const SectionBodyContent = ({
   };
 
   const renderAdminSettings = () => {
-    return !isLoadedSettingsTree || isLoading ? null : (
+    return (
       <StyledSettings>
         <ToggleButton
           className="toggle-btn"
@@ -130,7 +129,7 @@ const SectionBodyContent = ({
   };
 
   const renderCommonSettings = () => {
-    return !isLoadedSettingsTree || isLoading ? null : (
+    return (
       <StyledSettings>
         <ToggleButton
           className="toggle-btn"
@@ -214,7 +213,6 @@ export default inject(
   ({ auth, filesStore, settingsStore, treeFoldersStore }) => {
     const { isLoading } = filesStore;
     const {
-      isLoadedSettingsTree,
       storeOriginalFiles,
       confirmDelete,
       updateIfExist,
@@ -245,7 +243,6 @@ export default inject(
     return {
       isAdmin: auth.isAdmin,
       isLoading,
-      isLoadedSettingsTree,
       storeOriginalFiles,
       confirmDelete,
       updateIfExist,
diff --git a/products/ASC.Files/Client/src/pages/Settings/index.js b/products/ASC.Files/Client/src/pages/Settings/index.js
index a47ea41f06f..6d1bcb2092b 100644
--- a/products/ASC.Files/Client/src/pages/Settings/index.js
+++ b/products/ASC.Files/Client/src/pages/Settings/index.js
@@ -16,6 +16,7 @@ import { inject, observer } from "mobx-react";
 const PureSettings = ({
   match,
   t,
+  tReady,
   isLoading,
   isLoadedSettingsTree,
   setFirstLoad,
@@ -42,7 +43,7 @@ const PureSettings = ({
         setTitle(t("CommonSettings"));
         break;
     }
-  }, [setting]);
+  }, [setting, t]);
 
   useEffect(() => {
     if (isLoading) {
@@ -74,7 +75,7 @@ const PureSettings = ({
         </PageLayout.ArticleBody>
 
         <PageLayout.SectionHeader>
-          {(!isLoadedSettingsTree && isLoading) || isLoading ? (
+          {(!isLoadedSettingsTree && isLoading) || isLoading || !tReady ? (
             <Loaders.SectionHeader />
           ) : (
             <SectionHeaderContent title={title} />
@@ -82,7 +83,7 @@ const PureSettings = ({
         </PageLayout.SectionHeader>
 
         <PageLayout.SectionBody>
-          {(!isLoadedSettingsTree && isLoading) || isLoading ? (
+          {(!isLoadedSettingsTree && isLoading) || isLoading || !tReady ? (
             setting === "thirdParty" ? (
               <Loaders.Rows />
             ) : (
diff --git a/products/ASC.Files/Client/src/store/FilesStore.js b/products/ASC.Files/Client/src/store/FilesStore.js
index fbe6efde554..a4e1393873f 100644
--- a/products/ASC.Files/Client/src/store/FilesStore.js
+++ b/products/ASC.Files/Client/src/store/FilesStore.js
@@ -292,7 +292,7 @@ class FilesStore {
     let requestCounter = 1;
     const request = () =>
       api.files
-        .getFolder(folderId, filter)
+        .getFolder(folderId, filterData)
         .then(async (data) => {
           const isRecycleBinFolder =
             data.current.rootFolderType === FolderType.TRASH;
diff --git a/products/ASC.Mail/Client/public/index.html b/products/ASC.Mail/Client/public/index.html
index afc1bfbd88d..a5d2c82976f 100644
--- a/products/ASC.Mail/Client/public/index.html
+++ b/products/ASC.Mail/Client/public/index.html
@@ -91,7 +91,7 @@
 
     <div id="root"></div>
 
-    <div id="temp-content">
+    <div id="temp-content" style="display: none">
       <header class="temp-header-container">
         <div id="burger-loader-svg" class="burger-loader-svg">
           <svg
diff --git a/products/ASC.People/Client/public/index.html b/products/ASC.People/Client/public/index.html
index 3431936766c..6f03cd071dc 100644
--- a/products/ASC.People/Client/public/index.html
+++ b/products/ASC.People/Client/public/index.html
@@ -91,7 +91,7 @@
 
     <div id="root"></div>
 
-    <div id="temp-content">
+    <div id="temp-content" style="display: none">
       <header class="temp-header-container">
         <div id="burger-loader-svg" class="burger-loader-svg">
           <svg
diff --git a/products/ASC.People/Client/src/HOCs/withLoader.js b/products/ASC.People/Client/src/HOCs/withLoader.js
index 65485cb4175..41ac69f3a52 100644
--- a/products/ASC.People/Client/src/HOCs/withLoader.js
+++ b/products/ASC.People/Client/src/HOCs/withLoader.js
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 import { observer, inject } from "mobx-react";
 
 let loadTimeout = null;
-const WithLoader = (WrappedComponent) => (Loader) => {
+const withLoader = (WrappedComponent) => (Loader) => {
   const withLoader = (props) => {
     const { tReady, isLoaded, isLoading, firstLoad, profileLoaded } = props;
     const [inLoad, setInLoad] = useState(true);
@@ -50,4 +50,4 @@ const WithLoader = (WrappedComponent) => (Loader) => {
   })(observer(withLoader));
 };
 
-export default WithLoader;
+export default withLoader;
diff --git a/products/ASC.People/Client/src/components/Article/MainButton/index.js b/products/ASC.People/Client/src/components/Article/MainButton/index.js
index 37af113c81b..fc9c8c9a525 100644
--- a/products/ASC.People/Client/src/components/Article/MainButton/index.js
+++ b/products/ASC.People/Client/src/components/Article/MainButton/index.js
@@ -11,8 +11,9 @@ import { inject, observer } from "mobx-react";
 import config from "../../../../package.json";
 import { combineUrl } from "@appserver/common/utils";
 import { AppServerConfig } from "@appserver/common/constants";
+import withLoader from "../../../HOCs/withLoader";
 
-class PureArticleMainButtonContent extends React.Component {
+class ArticleMainButtonContent extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -57,110 +58,94 @@ class PureArticleMainButtonContent extends React.Component {
 
   render() {
     //console.log("People ArticleMainButtonContent render");
-    const {
-      t,
-      tReady,
-      isLoaded,
-      isAdmin,
-      homepage,
-      userCaption,
-      guestCaption,
-      groupCaption,
-    } = this.props;
+    const { t, homepage, userCaption, guestCaption, groupCaption } = this.props;
 
     const { dialogVisible } = this.state;
 
     return (
-      isAdmin &&
-      (!isLoaded || !tReady ? (
-        <Loaders.Rectangle />
-      ) : (
-        <>
-          <MainButton
-            isDisabled={false}
-            isDropdown={true}
-            text={t("Common:Actions")}
-          >
-            <DropDownItem
-              icon={combineUrl(
-                AppServerConfig.proxyURL,
-                homepage,
-                "/images/add.employee.react.svg"
-              )}
-              label={userCaption}
-              onClick={this.goToEmployeeCreate}
-            />
+      <>
+        <MainButton
+          isDisabled={false}
+          isDropdown={true}
+          text={t("Common:Actions")}
+        >
+          <DropDownItem
+            icon={combineUrl(
+              AppServerConfig.proxyURL,
+              homepage,
+              "/images/add.employee.react.svg"
+            )}
+            label={userCaption}
+            onClick={this.goToEmployeeCreate}
+          />
 
+          <DropDownItem
+            icon={combineUrl(
+              AppServerConfig.proxyURL,
+              homepage,
+              "/images/add.guest.react.svg"
+            )}
+            label={guestCaption}
+            onClick={this.goToGuestCreate}
+          />
+          <DropDownItem
+            icon={combineUrl(
+              AppServerConfig.proxyURL,
+              homepage,
+              "/images/add.department.react.svg"
+            )}
+            label={groupCaption}
+            onClick={this.goToGroupCreate}
+          />
+          <DropDownItem isSeparator />
+          <DropDownItem
+            icon={combineUrl(
+              AppServerConfig.proxyURL,
+              "/static/images/invitation.link.react.svg"
+            )}
+            label={t("Translations:InviteLinkTitle")}
+            onClick={this.onInvitationDialogClick}
+          />
+          {/* <DropDownItem
+              icon="images/plane.react.svg"
+              label={t("SendInvitesAgain")}
+              onClick={this.onNotImplementedClick.bind(this, t("SendInvitesAgain"))}
+            /> */}
+          {false && (
             <DropDownItem
               icon={combineUrl(
                 AppServerConfig.proxyURL,
                 homepage,
-                "/images/add.guest.react.svg"
-              )}
-              label={guestCaption}
-              onClick={this.goToGuestCreate}
-            />
-            <DropDownItem
-              icon={combineUrl(
-                AppServerConfig.proxyURL,
-                homepage,
-                "/images/add.department.react.svg"
-              )}
-              label={groupCaption}
-              onClick={this.goToGroupCreate}
-            />
-            <DropDownItem isSeparator />
-            <DropDownItem
-              icon={combineUrl(
-                AppServerConfig.proxyURL,
-                "/static/images/invitation.link.react.svg"
+                "/images/import.react.svg"
               )}
-              label={t("Translations:InviteLinkTitle")}
-              onClick={this.onInvitationDialogClick}
-            />
-            {/* <DropDownItem
-              icon="images/plane.react.svg"
-              label={t("SendInvitesAgain")}
-              onClick={this.onNotImplementedClick.bind(this, t("SendInvitesAgain"))}
-            /> */}
-            {false && (
-              <DropDownItem
-                icon={combineUrl(
-                  AppServerConfig.proxyURL,
-                  homepage,
-                  "/images/import.react.svg"
-                )}
-                label={t("ImportPeople")}
-                onClick={this.onImportClick}
-              />
-            )}
-          </MainButton>
-          {dialogVisible && (
-            <InviteDialog
-              visible={dialogVisible}
-              onClose={this.onInvitationDialogClick}
-              onCloseButton={this.onInvitationDialogClick}
+              label={t("ImportPeople")}
+              onClick={this.onImportClick}
             />
           )}
-        </>
-      ))
+        </MainButton>
+        {dialogVisible && (
+          <InviteDialog
+            visible={dialogVisible}
+            onClose={this.onInvitationDialogClick}
+            onCloseButton={this.onInvitationDialogClick}
+          />
+        )}
+      </>
     );
   }
 }
 
-const ArticleMainButtonContent = withTranslation([
-  "Article",
-  "Common",
-  "Translations",
-])(PureArticleMainButtonContent);
-
 export default withRouter(
   inject(({ auth }) => ({
-    isAdmin: auth.isAdmin,
     homepage: config.homepage,
     userCaption: auth.settingsStore.customNames.userCaption,
     guestCaption: auth.settingsStore.customNames.guestCaption,
     groupCaption: auth.settingsStore.customNames.groupCaption,
-    isLoaded: auth.isLoaded,
-  }))(observer(ArticleMainButtonContent))
+  }))(
+    withTranslation(["Article", "Common", "Translations"])(
+      withLoader(observer(ArticleMainButtonContent))(
+        <Loaders.Rectangle width="217px" />
+      )
+    )
+  )
 );
diff --git a/products/ASC.People/Client/src/components/dialogs/BackupCodesDialog/index.js b/products/ASC.People/Client/src/components/dialogs/BackupCodesDialog/index.js
index 99ae06716ec..57c2cb74d07 100644
--- a/products/ASC.People/Client/src/components/dialogs/BackupCodesDialog/index.js
+++ b/products/ASC.People/Client/src/components/dialogs/BackupCodesDialog/index.js
@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 import ModalDialog from "@appserver/components/modal-dialog";
 import Button from "@appserver/components/button";
 import Text from "@appserver/components/text";
-import { Trans, withTranslation } from "react-i18next";
+import { withTranslation } from "react-i18next";
 import ModalDialogContainer from "../ModalDialogContainer";
 import toastr from "studio/toastr";
 
@@ -40,11 +40,21 @@ class BackupCodesDialogComponent extends React.Component {
 
   render() {
     //console.log("Render BackupCodesDialog");
-    const { t, visible, onClose, backupCodes, backupCodesCount } = this.props;
-    let count = 0;
+    const {
+      t,
+      tReady,
+      visible,
+      onClose,
+      backupCodes,
+      backupCodesCount,
+    } = this.props;
 
     return (
-      <ModalDialogContainer visible={visible} onClose={onClose}>
+      <ModalDialogContainer
+        isLoading={!tReady}
+        visible={visible}
+        onClose={onClose}
+      >
         <ModalDialog.Header>{t("BackupCodesTitle")}</ModalDialog.Header>
         <ModalDialog.Body>
           <div id="backup-codes-print-content">
diff --git a/products/ASC.People/Client/src/components/dialogs/ChangeEmailDialog/index.js b/products/ASC.People/Client/src/components/dialogs/ChangeEmailDialog/index.js
index bee405fd466..ea61783ddfb 100644
--- a/products/ASC.People/Client/src/components/dialogs/ChangeEmailDialog/index.js
+++ b/products/ASC.People/Client/src/components/dialogs/ChangeEmailDialog/index.js
@@ -126,11 +126,15 @@ class ChangeEmailDialogComponent extends React.Component {
 
   render() {
     console.log("ChangeEmailDialog render");
-    const { t, visible, onClose } = this.props;
+    const { t, tReady, visible, onClose } = this.props;
     const { isRequestRunning, email, errorMessage, hasError } = this.state;
 
     return (
-      <ModalDialogContainer visible={visible} onClose={onClose}>
+      <ModalDialogContainer
+        isLoading={!tReady}
+        visible={visible}
+        onClose={onClose}
+      >
         <ModalDialog.Header>{t("EmailChangeTitle")}</ModalDialog.Header>
         <ModalDialog.Body>
           <FieldContainer
diff --git a/products/ASC.People/Client/src/components/dialogs/ChangePasswordDialog/index.js b/products/ASC.People/Client/src/components/dialogs/ChangePasswordDialog/index.js
index 54603ebdd85..0875068efa6 100644
--- a/products/ASC.People/Client/src/components/dialogs/ChangePasswordDialog/index.js
+++ b/products/ASC.People/Client/src/components/dialogs/ChangePasswordDialog/index.js
@@ -32,11 +32,11 @@ class ChangePasswordDialogComponent extends React.Component {
 
   render() {
     console.log("ChangePasswordDialog render");
-    const { t, visible, email, onClose } = this.props;
+    const { t, tReady, visible, email, onClose } = this.props;
     const { isRequestRunning } = this.state;
 
     return (
-      <ModalDialog visible={visible} onClose={onClose}>
+      <ModalDialog isLoading={!tReady} visible={visible} onClose={onClose}>
         <ModalDialog.Header>{t("PasswordChangeTitle")}</ModalDialog.Header>
         <ModalDialog.Body>
           <Text fontSize="13px">
diff --git a/products/ASC.People/Client/src/components/dialogs/ChangePhoneDialog/index.js b/products/ASC.People/Client/src/components/dialogs/ChangePhoneDialog/index.js
index f61cfaa5de4..d5b413cf086 100644
--- a/products/ASC.People/Client/src/components/dialogs/ChangePhoneDialog/index.js
+++ b/products/ASC.People/Client/src/components/dialogs/ChangePhoneDialog/index.js
@@ -26,11 +26,11 @@ class ChangePhoneDialogComponent extends React.Component {
 
   render() {
     console.log("ChangePhoneDialog render");
-    const { t, visible, onClose } = this.props;
+    const { t, tReady, visible, onClose } = this.props;
     const { isRequestRunning } = this.state;
 
     return (
-      <ModalDialog visible={visible} onClose={onClose}>
+      <ModalDialog isLoading={!tReady} visible={visible} onClose={onClose}>
         <ModalDialog.Header>{t("MobilePhoneChangeTitle")}</ModalDialog.Header>
         <ModalDialog.Body>
           <Text>{t("MobilePhoneEraseDescription")}</Text>
diff --git a/products/ASC.People/Client/src/components/dialogs/ChangeUserStatusDialog/index.js b/products/ASC.People/Client/src/components/dialogs/ChangeUserStatusDialog/index.js
index 0321c61b3fc..cfe90925855 100644
--- a/products/ASC.People/Client/src/components/dialogs/ChangeUserStatusDialog/index.js
+++ b/products/ASC.People/Client/src/components/dialogs/ChangeUserStatusDialog/index.js
@@ -75,7 +75,7 @@ class ChangeUserStatusDialogComponent extends React.Component {
   };
 
   render() {
-    const { t, onClose, visible, userStatus } = this.props;
+    const { t, tReady, onClose, visible, userStatus } = this.props;
     const { listUsers, isRequestRunning, userIds } = this.state;
     const containerStyles = { height: listUsers.length * 25, maxHeight: 220 };
     const itemSize = 25;
@@ -120,7 +120,11 @@ class ChangeUserStatusDialogComponent extends React.Component {
         : t("Common:Active");
 
     return (
-      <ModalDialogContainer visible={visible} onClose={onClose}>
+      <ModalDialogContainer
+        isLoading={!tReady}
+        visible={visible}
+        onClose={onClose}
+      >
         <ModalDialog.Header>
           {t("ChangeUserStatusDialogHeader")}
         </ModalDialog.Header>
diff --git a/products/ASC.People/Client/src/components/dialogs/ChangeUserTypeDialog/index.js b/products/ASC.People/Client/src/components/dialogs/ChangeUserTypeDialog/index.js
index dc46df54677..958b1a55cee 100644
--- a/products/ASC.People/Client/src/components/dialogs/ChangeUserTypeDialog/index.js
+++ b/products/ASC.People/Client/src/components/dialogs/ChangeUserTypeDialog/index.js
@@ -76,7 +76,7 @@ class ChangeUserTypeDialogComponent extends React.Component {
   };
 
   render() {
-    const { visible, onClose, t, userType } = this.props;
+    const { visible, onClose, t, tReady, userType } = this.props;
     const { isRequestRunning, listUsers, userIds } = this.state;
     const itemSize = 25;
     const containerStyles = { height: listUsers.length * 25, maxHeight: 220 };
@@ -114,7 +114,11 @@ class ChangeUserTypeDialogComponent extends React.Component {
     const firstType = userType === 1 ? t("Common:Guest") : t("Common:User");
     const secondType = userType === 1 ? t("Common:User") : t("Common:Guest");
     return (
-      <ModalDialogContainer visible={visible} onClose={onClose}>
+      <ModalDialogContainer
+        isLoading={!tReady}
+        visible={visible}
+        onClose={onClose}
+      >
         <ModalDialog.Header>{t("ChangeUserTypeHeader")}</ModalDialog.Header>
         <ModalDialog.Body>
           <Text>
diff --git a/products/ASC.People/Client/src/components/dialogs/DataLossWarningDialog/index.js b/products/ASC.People/Client/src/components/dialogs/DataLossWarningDialog/index.js
index d722707a1cb..029a74515e3 100644
--- a/products/ASC.People/Client/src/components/dialogs/DataLossWarningDialog/index.js
+++ b/products/ASC.People/Client/src/components/dialogs/DataLossWarningDialog/index.js
@@ -33,12 +33,13 @@ class DataLossWarningDialogComponent extends React.Component {
     }
   };
   render() {
-    const { t, isVisibleDataLossDialog } = this.props;
+    const { t, tReady, isVisibleDataLossDialog } = this.props;
 
     return (
       <ModalDialogContainer
         visible={isVisibleDataLossDialog}
         onClose={this.onClose}
+        isLoading={!tReady}
       >
         <ModalDialog.Header>{t("DataLossWarningHeader")}</ModalDialog.Header>
         <ModalDialog.Body>
diff --git a/products/ASC.People/Client/src/components/dialogs/DeleteProfileEverDialog/index.js b/products/ASC.People/Client/src/components/dialogs/DeleteProfileEverDialog/index.js
index ee92f73b24f..f9a23e6de10 100644
--- a/products/ASC.People/Client/src/components/dialogs/DeleteProfileEverDialog/index.js
+++ b/products/ASC.People/Client/src/components/dialogs/DeleteProfileEverDialog/index.js
@@ -53,11 +53,15 @@ class DeleteProfileEverDialogComponent extends React.Component {
 
   render() {
     console.log("DeleteProfileEverDialog render");
-    const { t, visible, user, onClose, userCaption } = this.props;
+    const { t, tReady, visible, user, onClose, userCaption } = this.props;
     const { isRequestRunning } = this.state;
 
     return (
-      <ModalDialogContainer visible={visible} onClose={onClose}>
+      <ModalDialogContainer
+        isLoading={!tReady}
+        visible={visible}
+        onClose={onClose}
+      >
         <ModalDialog.Header>{t("Confirmation")}</ModalDialog.Header>
         <ModalDialog.Body>
           <Text>
diff --git a/products/ASC.People/Client/src/components/dialogs/DeleteSelfProfileDialog/index.js b/products/ASC.People/Client/src/components/dialogs/DeleteSelfProfileDialog/index.js
index ae315ac9132..5bdade26020 100644
--- a/products/ASC.People/Client/src/components/dialogs/DeleteSelfProfileDialog/index.js
+++ b/products/ASC.People/Client/src/components/dialogs/DeleteSelfProfileDialog/index.js
@@ -35,11 +35,15 @@ class DeleteSelfProfileDialogComponent extends React.Component {
 
   render() {
     console.log("DeleteSelfProfileDialog render");
-    const { t, visible, email, onClose } = this.props;
+    const { t, tReady, visible, email, onClose } = this.props;
     const { isRequestRunning } = this.state;
 
     return (
-      <ModalDialogContainer visible={visible} onClose={onClose}>
+      <ModalDialogContainer
+        isLoading={!tReady}
+        visible={visible}
+        onClose={onClose}
+      >
         <ModalDialog.Header>{t("DeleteProfileTitle")}</ModalDialog.Header>
         <ModalDialog.Body>
           <Text fontSize="13px">
diff --git a/products/ASC.People/Client/src/components/dialogs/DeleteUsersDialog/index.js b/products/ASC.People/Client/src/components/dialogs/DeleteUsersDialog/index.js
index 29acb244061..2530f4909b4 100644
--- a/products/ASC.People/Client/src/components/dialogs/DeleteUsersDialog/index.js
+++ b/products/ASC.People/Client/src/components/dialogs/DeleteUsersDialog/index.js
@@ -72,7 +72,7 @@ class DeleteGroupUsersDialogComponent extends React.Component {
   };
 
   render() {
-    const { t, onClose, visible } = this.props;
+    const { t, tReady, onClose, visible } = this.props;
     const { isRequestRunning, userIds, listUsers } = this.state;
     const itemSize = 25;
     const containerStyles = { height: listUsers.length * 25, maxHeight: 220 };
@@ -109,7 +109,11 @@ class DeleteGroupUsersDialogComponent extends React.Component {
 
     //console.log("DeleteGroupUsersDialog render");
     return (
-      <ModalDialogContainer visible={visible} onClose={onClose}>
+      <ModalDialogContainer
+        isLoading={!tReady}
+        visible={visible}
+        onClose={onClose}
+      >
         <ModalDialog.Header>
           {t("DeleteGroupUsersMessageHeader")}
         </ModalDialog.Header>
diff --git a/products/ASC.People/Client/src/components/dialogs/InviteDialog/index.js b/products/ASC.People/Client/src/components/dialogs/InviteDialog/index.js
index 41e49442182..15a8f48aeae 100644
--- a/products/ASC.People/Client/src/components/dialogs/InviteDialog/index.js
+++ b/products/ASC.People/Client/src/components/dialogs/InviteDialog/index.js
@@ -116,12 +116,13 @@ class InviteDialogComponent extends React.Component {
 
   render() {
     console.log("InviteDialog render");
-    const { t, visible, hasShortenService, guestsCaption } = this.props;
+    const { t, tReady, visible, hasShortenService, guestsCaption } = this.props;
     const { LinkCopySuccess, ChangeTextAnim } = this.state;
 
     return (
       this.state.visible && (
         <ModalDialogContainer
+          isLoading={!tReady}
           ChangeTextAnim={ChangeTextAnim}
           visible={visible}
           onClose={this.onClose}
diff --git a/products/ASC.People/Client/src/components/dialogs/ResetApplicationDialog/index.js b/products/ASC.People/Client/src/components/dialogs/ResetApplicationDialog/index.js
index 225cba926c0..9143471d510 100644
--- a/products/ASC.People/Client/src/components/dialogs/ResetApplicationDialog/index.js
+++ b/products/ASC.People/Client/src/components/dialogs/ResetApplicationDialog/index.js
@@ -24,10 +24,14 @@ class ResetApplicationDialogComponent extends React.Component {
 
   render() {
     //console.log("Render ResetApplicationDialog");
-    const { t, visible, onClose } = this.props;
+    const { t, tReady, visible, onClose } = this.props;
 
     return (
-      <ModalDialogContainer visible={visible} onClose={onClose}>
+      <ModalDialogContainer
+        isLoading={!tReady}
+        visible={visible}
+        onClose={onClose}
+      >
         <ModalDialog.Header>{t("ResetApplicationTitle")}</ModalDialog.Header>
         <ModalDialog.Body>
           <Text className="text-dialog">
diff --git a/products/ASC.People/Client/src/components/dialogs/SendInviteDialog/index.js b/products/ASC.People/Client/src/components/dialogs/SendInviteDialog/index.js
index 39250727d33..93e4a574fcd 100644
--- a/products/ASC.People/Client/src/components/dialogs/SendInviteDialog/index.js
+++ b/products/ASC.People/Client/src/components/dialogs/SendInviteDialog/index.js
@@ -75,7 +75,7 @@ class SendInviteDialogComponent extends React.Component {
   };
 
   render() {
-    const { t, onClose, visible } = this.props;
+    const { t, tReady, onClose, visible } = this.props;
     const { listUsers, isRequestRunning, userIds } = this.state;
     const itemSize = 25;
     const containerStyles = { height: listUsers.length * 25, maxHeight: 220 };
@@ -112,7 +112,11 @@ class SendInviteDialogComponent extends React.Component {
 
     //console.log("SendInviteDialog render");
     return (
-      <ModalDialogContainer visible={visible} onClose={onClose}>
+      <ModalDialogContainer
+        isLoading={!tReady}
+        visible={visible}
+        onClose={onClose}
+      >
         <ModalDialog.Header>
           {t("Translations:SendInviteAgain")}
         </ModalDialog.Header>
diff --git a/products/ASC.People/Client/src/pages/Home/Section/Header/index.js b/products/ASC.People/Client/src/pages/Home/Section/Header/index.js
index 3c5ad879cda..44430bfa11a 100644
--- a/products/ASC.People/Client/src/pages/Home/Section/Header/index.js
+++ b/products/ASC.People/Client/src/pages/Home/Section/Header/index.js
@@ -11,6 +11,7 @@ import { Consumer } from "@appserver/components/utils/context";
 import Headline from "@appserver/common/components/Headline";
 import toastr from "studio/toastr";
 import Loaders from "@appserver/common/components/Loaders";
+import withLoader from "../../../../HOCs/withLoader";
 import {
   EmployeeType,
   EmployeeStatus,
@@ -463,9 +464,7 @@ const SectionHeaderContent = (props) => {
             </div>
           ) : (
             <div className="header-container">
-              {!isLoaded || !tReady ? (
-                <Loaders.SectionHeader />
-              ) : group ? (
+              {group ? (
                 <>
                   <Headline
                     className="headline-header"
@@ -557,8 +556,8 @@ export default withRouter(
     group: peopleStore.selectedGroupStore.group,
     isTabletView: auth.settingsStore.isTabletView,
   }))(
-    observer(
-      withTranslation(["Home", "Common", "Translations"])(SectionHeaderContent)
+    withTranslation(["Home", "Common", "Translations"])(
+      withLoader(observer(SectionHeaderContent))(<Loaders.SectionHeader />)
     )
   )
 );
diff --git a/products/ASC.Projects/Client/public/index.html b/products/ASC.Projects/Client/public/index.html
index 8eb5fffff02..974dc7a9dbd 100644
--- a/products/ASC.Projects/Client/public/index.html
+++ b/products/ASC.Projects/Client/public/index.html
@@ -91,7 +91,7 @@
 
     <div id="root"></div>
 
-    <div id="temp-content">
+    <div id="temp-content" style="display: none">
       <header class="temp-header-container">
         <div id="burger-loader-svg" class="burger-loader-svg">
           <svg
diff --git a/web/ASC.Web.Client/src/components/pages/About/index.js b/web/ASC.Web.Client/src/components/pages/About/index.js
index 0e6530e1ded..a920dbbbe50 100644
--- a/web/ASC.Web.Client/src/components/pages/About/index.js
+++ b/web/ASC.Web.Client/src/components/pages/About/index.js
@@ -8,6 +8,7 @@ import { isMobile } from "react-device-detect";
 import { setDocumentTitle } from "../../../helpers/utils";
 import i18n from "./i18n";
 import config from "../../../../package.json";
+import withLoader from "../Confirm/withLoader";
 
 const BodyStyle = styled.div`
   margin-top: ${isMobile ? "80px" : "24px"};
@@ -189,7 +190,7 @@ const Body = ({ t }) => {
   );
 };
 
-const BodyWrapper = withTranslation(["About", "Common"])(Body);
+const BodyWrapper = withTranslation(["About", "Common"])(withLoader(Body));
 
 const About = (props) => {
   return (
diff --git a/web/ASC.Web.Client/src/components/pages/Confirm/sub-components/activateUser.js b/web/ASC.Web.Client/src/components/pages/Confirm/sub-components/activateUser.js
index 0441f6e7196..e3437d34c36 100644
--- a/web/ASC.Web.Client/src/components/pages/Confirm/sub-components/activateUser.js
+++ b/web/ASC.Web.Client/src/components/pages/Confirm/sub-components/activateUser.js
@@ -390,4 +390,6 @@ export default inject(({ auth }) => {
     getPortalPasswordSettings,
     login: auth.login,
   };
-})(withRouter(withTranslation("Confirm")(observer(ActivateUserForm))));
+})(
+  withRouter(withTranslation(["Confirm", "Common"])(observer(ActivateUserForm)))
+);
diff --git a/web/ASC.Web.Client/src/components/pages/Confirm/sub-components/changeOwner.js b/web/ASC.Web.Client/src/components/pages/Confirm/sub-components/changeOwner.js
index 5147be8eee3..d85abcd8627 100644
--- a/web/ASC.Web.Client/src/components/pages/Confirm/sub-components/changeOwner.js
+++ b/web/ASC.Web.Client/src/components/pages/Confirm/sub-components/changeOwner.js
@@ -8,6 +8,7 @@ import toastr from "@appserver/components/toast/toastr";
 import PageLayout from "@appserver/common/components/PageLayout";
 import { tryRedirectTo } from "@appserver/common/utils";
 import { inject, observer } from "mobx-react";
+import withLoader from "../withLoader";
 
 const BodyStyle = styled.div`
   margin-top: 70px;
@@ -132,5 +133,9 @@ export default inject(({ auth }) => ({
   greetingTitle: auth.settingsStore.greetingSettings,
   defaultPage: auth.settingsStore.defaultPage,
 }))(
-  withRouter(withTranslation(["Confirm", "Common"])(observer(ChangeOwnerForm)))
+  withRouter(
+    withTranslation(["Confirm", "Common"])(
+      withLoader(observer(ChangeOwnerForm))
+    )
+  )
 );
diff --git a/web/ASC.Web.Client/src/components/pages/Confirm/sub-components/changePassword.js b/web/ASC.Web.Client/src/components/pages/Confirm/sub-components/changePassword.js
index 80b3604c817..d34012f7759 100644
--- a/web/ASC.Web.Client/src/components/pages/Confirm/sub-components/changePassword.js
+++ b/web/ASC.Web.Client/src/components/pages/Confirm/sub-components/changePassword.js
@@ -7,13 +7,13 @@ import styled from "styled-components";
 import Button from "@appserver/components/button";
 import Text from "@appserver/components/text";
 import PasswordInput from "@appserver/components/password-input";
-import Loader from "@appserver/components/loader";
 import toastr from "@appserver/components/toast/toastr";
 import Heading from "@appserver/components/heading";
 import PageLayout from "@appserver/common/components/PageLayout";
 import { createPasswordHash, tryRedirectTo } from "@appserver/common/utils";
 import { PasswordLimitSpecialCharacters } from "@appserver/common/constants";
 import { inject, observer } from "mobx-react";
+import withLoader from "../withLoader";
 
 const BodyStyle = styled.form`
   margin: 70px auto 0 auto;
@@ -110,15 +110,6 @@ class Form extends React.PureComponent {
   };
 
   componentDidMount() {
-    const { defaultPage, getSettings, getPortalPasswordSettings } = this.props;
-
-    const requests = [getSettings(), getPortalPasswordSettings(this.state.key)];
-
-    axios.all(requests).catch((error) => {
-      toastr.error(this.props.t(`${error}`));
-      tryRedirectTo(defaultPage);
-    });
-
     window.addEventListener("keydown", this.onKeyPress);
     window.addEventListener("keyup", this.onKeyPress);
   }
@@ -134,9 +125,7 @@ class Form extends React.PureComponent {
     const { settings, t, greetingTitle } = this.props;
     const { isLoading, password, passwordEmpty } = this.state;
 
-    return !settings ? (
-      <Loader className="pageLoader" type="rombs" size="40px" />
-    ) : (
+    return (
       <BodyStyle>
         <div className="password-header">
           <img
@@ -241,6 +230,8 @@ export default inject(({ auth, setup }) => {
   };
 })(
   withRouter(
-    withTranslation(["Confirm", "Common"])(observer(ChangePasswordForm))
+    withTranslation(["Confirm", "Common"])(
+      withLoader(observer(ChangePasswordForm))
+    )
   )
 );
diff --git a/web/ASC.Web.Client/src/components/pages/Confirm/sub-components/changePhone.js b/web/ASC.Web.Client/src/components/pages/Confirm/sub-components/changePhone.js
index 178dda93a08..564ae5ba726 100644
--- a/web/ASC.Web.Client/src/components/pages/Confirm/sub-components/changePhone.js
+++ b/web/ASC.Web.Client/src/components/pages/Confirm/sub-components/changePhone.js
@@ -7,6 +7,7 @@ import TextInput from "@appserver/components/text-input";
 import Text from "@appserver/components/text";
 import PageLayout from "@appserver/common/components/PageLayout";
 import { inject, observer } from "mobx-react";
+import withLoader from "../withLoader";
 
 const BodyStyle = styled.div`
   margin: 70px auto 0 auto;
@@ -126,5 +127,9 @@ export default inject(({ auth }) => ({
   currentPhone: auth.userStore.mobilePhone,
   greetingTitle: auth.settingsStore.greetingSettings,
 }))(
-  withRouter(withTranslation(["Confirm", "Common"])(observer(ChangePhoneForm)))
+  withRouter(
+    withTranslation(["Confirm", "Common"])(
+      observer(withLoader(ChangePhoneForm))
+    )
+  )
 );
diff --git a/web/ASC.Web.Client/src/components/pages/Confirm/sub-components/createUser.js b/web/ASC.Web.Client/src/components/pages/Confirm/sub-components/createUser.js
index b74ff84fc90..0266df9514e 100644
--- a/web/ASC.Web.Client/src/components/pages/Confirm/sub-components/createUser.js
+++ b/web/ASC.Web.Client/src/components/pages/Confirm/sub-components/createUser.js
@@ -12,24 +12,22 @@ import Box from "@appserver/components/box";
 import Text from "@appserver/components/text";
 import PasswordInput from "@appserver/components/password-input";
 import toastr from "@appserver/components/toast/toastr";
-import Loader from "@appserver/components/loader";
 import SocialButton from "@appserver/components/social-button";
 import FacebookButton from "@appserver/components/facebook-button";
 import EmailInput from "@appserver/components/email-input";
 import { getAuthProviders } from "@appserver/common/api/settings";
 import PageLayout from "@appserver/common/components/PageLayout";
 import {
-  combineUrl,
   createPasswordHash,
   getProviderTranslation,
 } from "@appserver/common/utils";
 import {
-  AppServerConfig,
   providersData,
   PasswordLimitSpecialCharacters,
 } from "@appserver/common/constants";
 import { isMobile } from "react-device-detect";
 import { desktop } from "@appserver/components/utils/device";
+import withLoader from "../withLoader";
 
 const inputWidth = "400px";
 
@@ -347,15 +345,6 @@ class Confirm extends React.PureComponent {
   validatePassword = (value) => this.setState({ passwordValid: value });
 
   componentDidMount() {
-    const { history, getSettings, getPortalPasswordSettings } = this.props;
-
-    const requests = [getSettings(), getPortalPasswordSettings(this.state.key)];
-
-    axios.all(requests).catch((e) => {
-      console.error("get settings error", e);
-      history.push(combineUrl(AppServerConfig.proxyURL, `/login/error=${e}`));
-    });
-
     this.setProviders();
     window.authCallback = this.authCallback;
 
@@ -404,9 +393,7 @@ class Confirm extends React.PureComponent {
     const { email, password } = this.state;
     const showCopyLink = !!email.trim() || !!password.trim();
 
-    return !settings ? (
-      <Loader className="pageLoader" type="rombs" size="40px" />
-    ) : (
+    return (
       <ConfirmContainer>
         <div className="start-basis">
           <div className="margin-left">
@@ -594,5 +581,7 @@ export default inject(({ auth }) => {
     providers,
   };
 })(
-  withRouter(withTranslation(["Confirm", "Common"])(observer(CreateUserForm)))
+  withRouter(
+    withTranslation(["Confirm", "Common"])(withLoader(observer(CreateUserForm)))
+  )
 );
diff --git a/web/ASC.Web.Client/src/components/pages/Confirm/sub-components/profileRemove.js b/web/ASC.Web.Client/src/components/pages/Confirm/sub-components/profileRemove.js
index 40bacb5f09f..cc17ec29664 100644
--- a/web/ASC.Web.Client/src/components/pages/Confirm/sub-components/profileRemove.js
+++ b/web/ASC.Web.Client/src/components/pages/Confirm/sub-components/profileRemove.js
@@ -9,6 +9,7 @@ import Button from "@appserver/components/button";
 import Text from "@appserver/components/text";
 import PageLayout from "@appserver/common/components/PageLayout";
 import { deleteSelf } from "@appserver/common/api/people"; //TODO: Move inside UserStore
+import withLoader from "../withLoader";
 
 const ProfileRemoveContainer = styled.div`
   display: flex;
@@ -121,4 +122,8 @@ const ProfileRemoveForm = (props) => (
 export default inject(({ auth }) => ({
   greetingTitle: auth.settingsStore.greetingSettings,
   logout: auth.logout,
-}))(withRouter(withTranslation("Confirm")(observer(ProfileRemoveForm))));
+}))(
+  withRouter(
+    withTranslation("Confirm")(withLoader(observer(ProfileRemoveForm)))
+  )
+);
diff --git a/web/ASC.Web.Client/src/components/pages/Confirm/sub-components/tfaActivation.js b/web/ASC.Web.Client/src/components/pages/Confirm/sub-components/tfaActivation.js
index bcc4f870230..5c5fbd7ccb5 100644
--- a/web/ASC.Web.Client/src/components/pages/Confirm/sub-components/tfaActivation.js
+++ b/web/ASC.Web.Client/src/components/pages/Confirm/sub-components/tfaActivation.js
@@ -12,7 +12,7 @@ import Box from "@appserver/components/box";
 import withLoader from "../withLoader";
 import toastr from "studio/toastr";
 import ErrorContainer from "@appserver/common/components/ErrorContainer";
-import { mobile, tablet, isMobile } from "@appserver/components/utils/device";
+import { mobile, tablet } from "@appserver/components/utils/device";
 import Link from "@appserver/components/link";
 
 const StyledForm = styled(Box)`
diff --git a/web/ASC.Web.Client/src/components/pages/Confirm/withLoader.js b/web/ASC.Web.Client/src/components/pages/Confirm/withLoader.js
index f5fe83530b7..1b7d07312c6 100644
--- a/web/ASC.Web.Client/src/components/pages/Confirm/withLoader.js
+++ b/web/ASC.Web.Client/src/components/pages/Confirm/withLoader.js
@@ -1,14 +1,50 @@
 import React, { useEffect, useState } from "react";
 import { observer, inject } from "mobx-react";
 import Loader from "@appserver/components/loader";
-//import { isMobile } from "react-device-detect";
+import axios from "axios";
+import { combineUrl } from "@appserver/common/utils";
+import { AppServerConfig } from "@appserver/common/constants";
 
 let loadTimeout = null;
-export default function withLoader(WrappedComponent, type) {
+export default function withLoader(WrappedComponent) {
   const withLoader = (props) => {
-    const { tReady, isLoaded, isLoading } = props;
+    const {
+      tReady,
+      isLoading,
+      linkData,
+      passwordSettings,
+      getSettings,
+      getPortalPasswordSettings,
+      history,
+    } = props;
     const [inLoad, setInLoad] = useState(false);
 
+    const type = linkData ? linkData.type : null;
+    const confirmHeader = linkData ? linkData.confirmHeader : null;
+
+    useEffect(() => {
+      if (
+        (type === "ChangePasswordForm" || type === "LinkInvite") &&
+        !passwordSettings
+      ) {
+        axios
+          .all([getSettings(), getPortalPasswordSettings(confirmHeader)])
+          .catch((error) => {
+            console.error(error);
+            history.push(
+              combineUrl(AppServerConfig.proxyURL, `/login/error=${error}`)
+            );
+          });
+      }
+    }, [passwordSettings]);
+
+    const isLoaded =
+      type === "TfaActivation" || type === "TfaAuth"
+        ? props.isLoaded
+        : type === "ChangePasswordForm" || type === "LinkInvite"
+        ? !!passwordSettings
+        : true;
+
     const cleanTimer = () => {
       loadTimeout && clearTimeout(loadTimeout);
       loadTimeout = null;
@@ -30,17 +66,27 @@ export default function withLoader(WrappedComponent, type) {
       };
     }, [isLoading]);
 
-    return !isLoaded || !tReady || inLoad ? (
+    return !isLoaded || !tReady ? (
       <Loader className="pageLoader" type="rombs" size="40px" />
     ) : (
       <WrappedComponent {...props} />
     );
   };
 
-  return inject(({ confirm }) => {
+  return inject(({ auth, confirm }) => {
+    const { isLoaded, isLoading } = confirm;
+    const {
+      passwordSettings,
+      getSettings,
+      getPortalPasswordSettings,
+    } = auth.settingsStore;
+
     return {
-      isLoaded: confirm.isLoaded,
-      isLoading: confirm.isLoading,
+      isLoaded,
+      isLoading,
+      getSettings,
+      passwordSettings,
+      getPortalPasswordSettings,
     };
   })(observer(withLoader));
 }