From 921d479639cf58490e2dd6c4679bad05b924ec1f Mon Sep 17 00:00:00 2001
From: Viktor Fomin <viktor.fomin@onlyoffice.com>
Date: Wed, 8 Jun 2022 17:27:23 +0300
Subject: [PATCH] Web: Client: Settings: add tfa loader

---
 .../categories/security/access-portal/tfa.js  |  7 +++
 .../sub-components/loaders/tfa-loader.js      | 55 +++++++++++++++++++
 2 files changed, 62 insertions(+)
 create mode 100644 web/ASC.Web.Client/src/components/pages/Settings/categories/security/sub-components/loaders/tfa-loader.js

diff --git a/web/ASC.Web.Client/src/components/pages/Settings/categories/security/access-portal/tfa.js b/web/ASC.Web.Client/src/components/pages/Settings/categories/security/access-portal/tfa.js
index bf59724435..4f39a9b586 100644
--- a/web/ASC.Web.Client/src/components/pages/Settings/categories/security/access-portal/tfa.js
+++ b/web/ASC.Web.Client/src/components/pages/Settings/categories/security/access-portal/tfa.js
@@ -12,6 +12,8 @@ import { LearnMoreWrapper } from "../StyledSecurity";
 import { size } from "@appserver/components/utils/device";
 import { saveToSessionStorage, getFromSessionStorage } from "../../../utils";
 import SaveCancelButtons from "@appserver/components/save-cancel-buttons";
+import { isMobile } from "react-device-detect";
+import TfaLoader from "../sub-components/loaders/tfa-loader";
 
 const MainContainer = styled.div`
   width: 100%;
@@ -117,6 +119,11 @@ const TwoFactorAuth = (props) => {
   };
 
   const lng = getLanguage(localStorage.getItem("language") || "en");
+
+  if (isMobile && !isInit && !isLoading) {
+    return <TfaLoader />;
+  }
+
   return (
     <MainContainer>
       <LearnMoreWrapper>
diff --git a/web/ASC.Web.Client/src/components/pages/Settings/categories/security/sub-components/loaders/tfa-loader.js b/web/ASC.Web.Client/src/components/pages/Settings/categories/security/sub-components/loaders/tfa-loader.js
new file mode 100644
index 0000000000..824b6fc0a4
--- /dev/null
+++ b/web/ASC.Web.Client/src/components/pages/Settings/categories/security/sub-components/loaders/tfa-loader.js
@@ -0,0 +1,55 @@
+import React from "react";
+import styled from "styled-components";
+import Loaders from "@appserver/common/components/Loaders";
+
+const StyledLoader = styled.div`
+  padding-right: 8px;
+
+  .header {
+    width: 273px;
+    margin-bottom: 16px;
+  }
+
+  .description {
+    margin-bottom: 8px;
+  }
+
+  .link {
+    margin-bottom: 20px;
+  }
+
+  .checkboxs {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    width: 50px;
+  }
+
+  .buttons {
+    width: calc(100% - 32px);
+    position: absolute;
+    bottom: 16px;
+  }
+`;
+
+const TfaLoader = () => {
+  return (
+    <StyledLoader>
+      <Loaders.Rectangle className="header" height="37px" />
+      <Loaders.Rectangle className="description" height="40px" />
+      <div className="link">
+        <Loaders.Rectangle height="20px" width="57px" />
+      </div>
+
+      <div className="checkboxs">
+        <Loaders.Rectangle height="20px" />
+        <Loaders.Rectangle height="20px" />
+        <Loaders.Rectangle height="20px" />
+      </div>
+
+      <Loaders.Rectangle className="buttons" height="40px" />
+    </StyledLoader>
+  );
+};
+
+export default TfaLoader;