From 67cc52c6995c54605d127bb7b3f9f2275cbdf7a1 Mon Sep 17 00:00:00 2001
From: DmitrySychugov <dmitry.s.develop@mail.ru>
Date: Fri, 4 Aug 2023 19:00:23 +0500
Subject: [PATCH] Web: Management: create spaces loader

---
 .../spaces/sub-components/SpacesLoader.tsx    | 68 +++++++++++++++++++
 1 file changed, 68 insertions(+)
 create mode 100644 packages/management/src/categories/spaces/sub-components/SpacesLoader.tsx

diff --git a/packages/management/src/categories/spaces/sub-components/SpacesLoader.tsx b/packages/management/src/categories/spaces/sub-components/SpacesLoader.tsx
new file mode 100644
index 0000000000..32c2c384a5
--- /dev/null
+++ b/packages/management/src/categories/spaces/sub-components/SpacesLoader.tsx
@@ -0,0 +1,68 @@
+import React from "react";
+import Loaders from "@docspace/common/components/Loaders";
+import { isMobileOnly } from "react-device-detect";
+import styled, { css } from "styled-components";
+
+const StyledLoader = styled.div`
+  max-width: 700px;
+  display: flex;
+  flex-direction: column;
+
+  .button {
+    margin: 20px 0;
+    max-width: 100px;
+    ${isMobileOnly &&
+    css`
+      max-width: 100%;
+    `}
+  }
+
+  .portals {
+    margin-bottom: 24px;
+  }
+
+  .domain-header {
+    max-width: 130px;
+    margin-bottom: 16px;
+  }
+
+  .configuration-header {
+    max-width: 225px;
+    margin-top: 20px;
+    margin-bottom: 8px;
+  }
+
+  .input {
+    max-width: 350px;
+  }
+
+  .configuration-input {
+    max-width: 350px;
+    margin-top: 16px;
+  }
+`;
+
+export const SpacesLoader = ({ isConfigurationSection }) => {
+  return (
+    <StyledLoader>
+      <Loaders.Rectangle height="22px" className="subheader" />
+      {isConfigurationSection ? (
+        <>
+          <Loaders.Rectangle height="22px" className="configuration-header" />
+          <Loaders.Rectangle height="48px" className="section-title" />
+          <Loaders.Rectangle height="52px" className="configuration-input" />
+          <Loaders.Rectangle height="52px" className="configuration-input" />
+        </>
+      ) : (
+        <>
+          <Loaders.Rectangle height="23px" className="button" />
+          <Loaders.Rectangle height="160px" className="portals" />
+          <Loaders.Rectangle height="22px" className="domain-header" />
+          <Loaders.Rectangle height="52px" className="input" />
+        </>
+      )}
+
+      <Loaders.Rectangle height="22px" className="button" />
+    </StyledLoader>
+  );
+};