From 59eee29c61889e9ce03fdcdf89ded6a9c39b8e60 Mon Sep 17 00:00:00 2001
From: Viktor Fomin <viktor.fomin@onlyoffice.com>
Date: Wed, 8 Jun 2022 17:51:26 +0300
Subject: [PATCH] Web: Client: Settings: add session lifetime loader

---
 .../security/access-portal/sessionLifetime.js |  6 ++
 .../loaders/session-lifetime-loader.js        | 59 +++++++++++++++++++
 2 files changed, 65 insertions(+)
 create mode 100644 web/ASC.Web.Client/src/components/pages/Settings/categories/security/sub-components/loaders/session-lifetime-loader.js

diff --git a/web/ASC.Web.Client/src/components/pages/Settings/categories/security/access-portal/sessionLifetime.js b/web/ASC.Web.Client/src/components/pages/Settings/categories/security/access-portal/sessionLifetime.js
index 86a2a36fb8..8ecb8648dd 100644
--- a/web/ASC.Web.Client/src/components/pages/Settings/categories/security/access-portal/sessionLifetime.js
+++ b/web/ASC.Web.Client/src/components/pages/Settings/categories/security/access-portal/sessionLifetime.js
@@ -12,6 +12,8 @@ import { size } from "@appserver/components/utils/device";
 import { saveToSessionStorage, getFromSessionStorage } from "../../../utils";
 import SaveCancelButtons from "@appserver/components/save-cancel-buttons";
 import isEqual from "lodash/isEqual";
+import { isMobile } from "react-device-detect";
+import SessionLifetimeLoader from "../sub-components/loaders/session-lifetime-loader";
 
 const MainContainer = styled.div`
   width: 100%;
@@ -150,6 +152,10 @@ const SessionLifetime = (props) => {
     setShowReminder(false);
   };
 
+  if (isMobile && !isInit && !isLoading) {
+    return <SessionLifetimeLoader />;
+  }
+
   return (
     <MainContainer>
       <LearnMoreWrapper>
diff --git a/web/ASC.Web.Client/src/components/pages/Settings/categories/security/sub-components/loaders/session-lifetime-loader.js b/web/ASC.Web.Client/src/components/pages/Settings/categories/security/sub-components/loaders/session-lifetime-loader.js
new file mode 100644
index 0000000000..0c2f0e7378
--- /dev/null
+++ b/web/ASC.Web.Client/src/components/pages/Settings/categories/security/sub-components/loaders/session-lifetime-loader.js
@@ -0,0 +1,59 @@
+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: 16px;
+  }
+
+  .input {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .buttons {
+    width: calc(100% - 32px);
+    position: absolute;
+    bottom: 16px;
+  }
+`;
+
+const SessionLifetimeLoader = () => {
+  return (
+    <StyledLoader>
+      <Loaders.Rectangle className="header" height="37px" />
+      <Loaders.Rectangle className="description" height="20px" />
+
+      <div className="checkboxs">
+        <Loaders.Rectangle height="20px" />
+        <Loaders.Rectangle height="20px" />
+      </div>
+
+      <div className="input">
+        <Loaders.Rectangle height="20px" width="95px" />
+        <Loaders.Rectangle height="32px" />
+      </div>
+
+      <Loaders.Rectangle className="buttons" height="40px" />
+    </StyledLoader>
+  );
+};
+
+export default SessionLifetimeLoader;