From 473dcb4f74ff1bd83a17dbe390ce50660e3322c1 Mon Sep 17 00:00:00 2001
From: Viktor Fomin <viktor.fomin@onlyoffice.com>
Date: Sun, 24 Jul 2022 21:12:50 +0300
Subject: [PATCH] Web: Client: Settings: add sso loader

---
 .../Settings/categories/integration/index.js  |  4 +-
 .../integration/sub-components/ssoLoader.js   | 49 +++++++++++++++++++
 2 files changed, 52 insertions(+), 1 deletion(-)
 create mode 100644 web/ASC.Web.Client/src/components/pages/Settings/categories/integration/sub-components/ssoLoader.js

diff --git a/web/ASC.Web.Client/src/components/pages/Settings/categories/integration/index.js b/web/ASC.Web.Client/src/components/pages/Settings/categories/integration/index.js
index 29cf250db4..f3e7ac1d43 100644
--- a/web/ASC.Web.Client/src/components/pages/Settings/categories/integration/index.js
+++ b/web/ASC.Web.Client/src/components/pages/Settings/categories/integration/index.js
@@ -11,6 +11,7 @@ import SSO from "./SingleSignOn";
 import ThirdParty from "./ThirdPartyServicesSettings";
 
 import AppLoader from "@appserver/common/components/AppLoader";
+import SSOLoader from "./sub-components/ssoLoader";
 
 const IntegrationWrapper = (props) => {
   const { t, history, loadBaseInfo } = props;
@@ -52,7 +53,8 @@ const IntegrationWrapper = (props) => {
     );
   };
 
-  if (!isLoading) return <AppLoader />;
+  if (!isLoading) return currentTab === 0 ? <SSOLoader /> : <AppLoader />;
+
   return (
     <Submenu
       data={data}
diff --git a/web/ASC.Web.Client/src/components/pages/Settings/categories/integration/sub-components/ssoLoader.js b/web/ASC.Web.Client/src/components/pages/Settings/categories/integration/sub-components/ssoLoader.js
new file mode 100644
index 0000000000..26b82cff36
--- /dev/null
+++ b/web/ASC.Web.Client/src/components/pages/Settings/categories/integration/sub-components/ssoLoader.js
@@ -0,0 +1,49 @@
+import React from "react";
+import styled from "styled-components";
+import Loaders from "@appserver/common/components/Loaders";
+
+const StyledLoader = styled.div`
+  .submenu {
+    display: flex;
+    gap: 20px;
+    margin-bottom: 20px;
+    .item {
+      width: 72px;
+    }
+  }
+
+  .description {
+    max-width: 700px;
+    margin-bottom: 20px;
+  }
+
+  .category {
+    margin-top: 24px;
+    width: 238px;
+  }
+
+  hr {
+    margin-top: 24px;
+    border: none;
+    border-top: 1px solid #eceef1;
+  }
+`;
+
+const SSOLoader = () => {
+  return (
+    <StyledLoader>
+      <div className="submenu">
+        <Loaders.Rectangle className="item" height="28px" />
+        <Loaders.Rectangle className="item" height="28px" />
+      </div>
+      <Loaders.Rectangle className="description" height="60px" />
+      <Loaders.Rectangle height="64px" />
+
+      <Loaders.Rectangle className="category" height="22px" />
+      <hr />
+      <Loaders.Rectangle className="category" height="22px" />
+    </StyledLoader>
+  );
+};
+
+export default SSOLoader;