From 9d828a5c352fb4ca8bb1d9640bc5ec2bf63f486e Mon Sep 17 00:00:00 2001
From: gazizova-vlada <vlada.gazizova@onlyoffice.com>
Date: Tue, 19 Apr 2022 10:32:37 +0300
Subject: [PATCH] Web:Components:Added LoaderSubmenu.

---
 packages/asc-web-components/submenu/index.js  | 57 ++++++++++++-------
 packages/asc-web-components/submenu/loader.js | 32 +++++++++++
 2 files changed, 67 insertions(+), 22 deletions(-)
 create mode 100644 packages/asc-web-components/submenu/loader.js

diff --git a/packages/asc-web-components/submenu/index.js b/packages/asc-web-components/submenu/index.js
index f552c9737f..42f9b4a988 100644
--- a/packages/asc-web-components/submenu/index.js
+++ b/packages/asc-web-components/submenu/index.js
@@ -12,8 +12,9 @@ import {
   StyledSubmenuItems,
   StyledSubmenuItemText,
 } from "./styled-submenu";
+import LoaderSubmenu from "./loader";
 
-const Submenu = ({ data, startSelect = 0, onSelect, ...rest }) => {
+const Submenu = ({ data, startSelect = 0, onSelect, isLoading, ...rest }) => {
   if (!data) return null;
 
   const [currentItem, setCurrentItem] = useState(
@@ -74,29 +75,40 @@ const Submenu = ({ data, startSelect = 0, onSelect, ...rest }) => {
 
   return (
     <StyledSubmenu {...rest}>
-      <StyledSubmenuItems ref={submenuItemsRef} role="list">
-        {data.map((d) => {
-          const isActive = d.id === currentItem.id;
+      {isLoading ? (
+        <LoaderSubmenu />
+      ) : (
+        <>
+          <StyledSubmenuItems ref={submenuItemsRef} role="list">
+            {data.map((d) => {
+              const isActive = d.id === currentItem.id;
 
-          return (
-            <StyledSubmenuItem key={d.id} id={d.id} onClick={selectSubmenuItem}>
-              <StyledSubmenuItemText>
-                <Text
-                  color={isActive ? "#316DAA" : "#657077"}
-                  fontSize="13px"
-                  fontWeight="600"
-                  truncate={false}
+              return (
+                <StyledSubmenuItem
+                  key={d.id}
+                  id={d.id}
+                  onClick={selectSubmenuItem}
                 >
-                  {d.name}
-                </Text>
-              </StyledSubmenuItemText>
-              <StyledSubmenuItemLabel color={isActive ? "#316DAA" : "none"} />
-            </StyledSubmenuItem>
-          );
-        })}
-      </StyledSubmenuItems>
-      <StyledSubmenuBottomLine />
-
+                  <StyledSubmenuItemText>
+                    <Text
+                      color={isActive ? "#316DAA" : "#657077"}
+                      fontSize="13px"
+                      fontWeight="600"
+                      truncate={false}
+                    >
+                      {d.name}
+                    </Text>
+                  </StyledSubmenuItemText>
+                  <StyledSubmenuItemLabel
+                    color={isActive ? "#316DAA" : "none"}
+                  />
+                </StyledSubmenuItem>
+              );
+            })}
+          </StyledSubmenuItems>
+          <StyledSubmenuBottomLine />
+        </>
+      )}
       <StyledSubmenuContentWrapper>
         {currentItem.content}
       </StyledSubmenuContentWrapper>
@@ -108,6 +120,7 @@ Submenu.propTypes = {
   data: PropTypes.arrayOf(PropTypes.object.isRequired).isRequired,
   startSelect: PropTypes.oneOfType([PropTypes.object, PropTypes.number]),
   onSelect: PropTypes.func,
+  isLoading: PropTypes.bool,
 };
 
 export default Submenu;
diff --git a/packages/asc-web-components/submenu/loader.js b/packages/asc-web-components/submenu/loader.js
new file mode 100644
index 0000000000..ecc1ebbc42
--- /dev/null
+++ b/packages/asc-web-components/submenu/loader.js
@@ -0,0 +1,32 @@
+import React from "react";
+import styled, { css } from "styled-components";
+import Loaders from "@appserver/common/components/Loaders";
+import { isTablet } from "react-device-detect";
+
+const StyledLoader = styled.div`
+  margin-top: -4px;
+
+  .loader {
+    padding-right: 4px;
+  }
+
+  @media (min-width: 600px) {
+    margin-top: -9px;
+  }
+
+  ${isTablet &&
+  css`
+    margin-top: -9px;
+  `}
+`;
+
+const LoaderSubmenu = () => {
+  return (
+    <StyledLoader>
+      <Loaders.Rectangle width="100px" height="28px" className="loader" />
+      <Loaders.Rectangle width="100px" height="28px" />
+    </StyledLoader>
+  );
+};
+
+export default LoaderSubmenu;