Web: Client: Settings: add tfa loader

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>

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;