Web: Client: Settings: add ip security loader

web/ASC.Web.Client/src/components/pages/Settings/categories/security/access-portal/ipSecurity.js

@@ -12,6 +12,8 @@ import { size } from "@appserver/components/utils/device";
 import { saveToSessionStorage, getFromSessionStorage } from "../../../utils";
 import isEqual from "lodash/isEqual";
 import SaveCancelButtons from "@appserver/components/save-cancel-buttons";
+import { isMobile } from "react-device-detect";
+import IpSecurityLoader from "../sub-components/loaders/ip-security-loader";
 
 const MainContainer = styled.div`
   width: 100%;
@@ -164,6 +166,10 @@ const IpSecurity = (props) => {
     setShowReminder(false);
   };
 
+  if (isMobile && !isInit && !isLoading) {
+    return <IpSecurityLoader />;
+  }
+
   return (
     <MainContainer>
       <LearnMoreWrapper>

web/ASC.Web.Client/src/components/pages/Settings/categories/security/sub-components/loaders/ip-security-loader.js

@@ -0,0 +1,66 @@
+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: 12px;
+  }
+
+  .checkboxs {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    width: 50px;
+    margin-bottom: 15px;
+  }
+
+  .add-button {
+    width: 85px;
+    margin-bottom: 16px;
+  }
+
+  .block {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .buttons {
+    width: calc(100% - 32px);
+    position: absolute;
+    bottom: 16px;
+  }
+`;
+
+const IpSecurityLoader = () => {
+  return (
+    <StyledLoader>
+      <Loaders.Rectangle className="header" height="37px" />
+      <Loaders.Rectangle className="description" height="80px" />
+
+      <div className="checkboxs">
+        <Loaders.Rectangle height="20px" />
+        <Loaders.Rectangle height="20px" />
+      </div>
+
+      <Loaders.Rectangle className="add-button" height="20px" />
+
+      <div className="block">
+        <Loaders.Rectangle height="22px" width="72px" />
+        <Loaders.Rectangle height="64px" />
+      </div>
+
+      <Loaders.Rectangle className="buttons" height="40px" />
+    </StyledLoader>
+  );
+};
+
+export default IpSecurityLoader;