Web:InvitePanel Added loaders

packages/client/src/components/panels/InvitePanel/index.js

@@ -25,6 +25,8 @@ import Scrollbar from "@docspace/components/scrollbar";
 
 import InfoBar from "./sub-components/InfoBar";
 import { DeviceType } from "@docspace/common/constants";
+import InvitePanelLoader from "./sub-components/InvitePanelLoader";
+import { TIMEOUT } from "../../../helpers/filesConstants";
 
 const InvitePanel = ({
   folders,
@@ -53,6 +55,7 @@ const InvitePanel = ({
   filter,
   currentDeviceType,
 }) => {
+  const [invitePanelIsLoding, setInvitePanelIsLoading] = useState(false);
   const [selectedRoom, setSelectedRoom] = useState(null);
   const [hasErrors, setHasErrors] = useState(false);
   const [shareLinks, setShareLinks] = useState([]);
@@ -80,15 +83,16 @@ const InvitePanel = ({
 
     if (room) {
       setSelectedRoom(room);
+      return Promise.resolve();
     } else {
-      getFolderInfo(roomId).then((info) => {
+      return getFolderInfo(roomId).then((info) => {
         setSelectedRoom(info);
       });
     }
   };
 
   const getInfo = () => {
-    getRoomSecurityInfo(roomId).then((links) => {
+    return getRoomSecurityInfo(roomId).then((links) => {
       const link = links && links[0];
       if (link) {
         const { shareLink, id, title, expirationDate } = link.sharedTo;
@@ -109,10 +113,21 @@ const InvitePanel = ({
     });
   };
 
+  const disableInvitePanelLoader = () => {
+    setTimeout(() => {
+      setInvitePanelIsLoading(false);
+    }, TIMEOUT);
+  };
+
   useEffect(() => {
+    setInvitePanelIsLoading(true);
+
     if (roomId === -1) {
-      if (!userLink || !guestLink || !adminLink || !collaboratorLink)
-        getPortalInviteLinks();
+      if (!userLink || !guestLink || !adminLink || !collaboratorLink) {
+        getPortalInviteLinks().finally(() => {
+          disableInvitePanelLoader();
+        });
+      }
 
       setShareLinks([
         {
@@ -144,8 +159,9 @@ const InvitePanel = ({
       return;
     }
 
-    selectRoom();
-    getInfo();
+    Promise.all([selectRoom(), getInfo()]).finally(() => {
+      disableInvitePanelLoader(false);
+    });
   }, [roomId, userLink, guestLink, adminLink, collaboratorLink]);
 
   useEffect(() => {
@@ -308,36 +324,40 @@ const InvitePanel = ({
       <StyledBlock>
         <StyledHeading>{t("Common:InviteUsers")}</StyledHeading>
       </StyledBlock>
-
-      {scrollAllPanelContent ? (
-        <div className="invite-panel-body" ref={invitePanelBodyRef}>
-          <Scrollbar stype="mediumBlack">{bodyInvitePanel}</Scrollbar>
-        </div>
+      {invitePanelIsLoding ? (
+        <InvitePanelLoader />
       ) : (
-        bodyInvitePanel
-      )}
-
-      {hasInvitedUsers && (
-        <StyledButtons>
-          <Button
-            className="send-invitation"
-            scale={true}
-            size={"normal"}
-            isDisabled={hasErrors}
-            primary
-            onClick={onClickSend}
-            label={t("SendInvitation")}
-            isLoading={isLoading}
-          />
-          <Button
-            className="cancel-button"
-            scale={true}
-            size={"normal"}
-            onClick={onClose}
-            label={t("Common:CancelButton")}
-            isDisabled={isLoading}
-          />
-        </StyledButtons>
+        <>
+          {scrollAllPanelContent ? (
+            <div className="invite-panel-body" ref={invitePanelBodyRef}>
+              <Scrollbar stype="mediumBlack">{bodyInvitePanel}</Scrollbar>
+            </div>
+          ) : (
+            bodyInvitePanel
+          )}
+          {hasInvitedUsers && (
+            <StyledButtons>
+              <Button
+                className="send-invitation"
+                scale={true}
+                size={"normal"}
+                isDisabled={hasErrors}
+                primary
+                onClick={onClickSend}
+                label={t("SendInvitation")}
+                isLoading={isLoading}
+              />
+              <Button
+                className="cancel-button"
+                scale={true}
+                size={"normal"}
+                onClick={onClose}
+                label={t("Common:CancelButton")}
+                isDisabled={isLoading}
+              />
+            </StyledButtons>
+          )}
+        </>
       )}
     </>
   );
@@ -347,7 +367,8 @@ const InvitePanel = ({
       id="InvitePanelWrapper"
       hasInvitedUsers={hasInvitedUsers}
       scrollAllPanelContent={scrollAllPanelContent}
-      addUsersPanelVisible={addUsersPanelVisible}>
+      addUsersPanelVisible={addUsersPanelVisible}
+    >
       {isMobileView ? (
         <div className="invite_panel">
           <StyledControlContainer onClick={onClose}>
@@ -368,7 +389,8 @@ const InvitePanel = ({
             visible={visible}
             onClose={onClose}
             withoutBodyScroll
-            zIndex={310}>
+            zIndex={310}
+          >
             {invitePanelNode}
           </Aside>
         </>

packages/client/src/components/panels/InvitePanel/sub-components/InvitePanelLoader/InvitePanelLoader.styled.ts

@@ -0,0 +1,35 @@
+import styled from "styled-components";
+
+export const InvitePanelLoaderWrapper = styled.div``;
+
+export const ExternalLinksLoaderWrapper = styled.div`
+  display: grid;
+  grid-template-columns: 1fr auto;
+  grid-template-rows: auto auto;
+  grid-row-gap: 8px;
+
+  padding: 16px;
+
+  border-bottom: ${(props) => props.theme.filesPanels.sharing.borderBottom};
+`;
+
+export const InviteInputLoaderWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  padding: 16px;
+`;
+
+export const InviteInputLoaderHeaderWrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+export const InviteInputLoaderFooterWrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+`;

packages/client/src/components/panels/InvitePanel/sub-components/InvitePanelLoader/InvitePanelLoader.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+//@ts-ignore
+
+import Loaders from "@docspace/common/components/Loaders";
+
+import {
+  ExternalLinksLoaderWrapper,
+  InviteInputLoaderFooterWrapper,
+  InviteInputLoaderHeaderWrapper,
+  InviteInputLoaderWrapper,
+  InvitePanelLoaderWrapper,
+} from "./InvitePanelLoader.styled";
+
+function InvitePanelLoader() {
+  return (
+    <InvitePanelLoaderWrapper>
+      <ExternalLinksLoaderWrapper>
+        <Loaders.Rectangle width="50%" height="22px" />
+        <Loaders.Rectangle width="28px" height="16px" />
+        <Loaders.Rectangle width="90%" height="16px" />
+      </ExternalLinksLoaderWrapper>
+      <InviteInputLoaderWrapper>
+        <InviteInputLoaderHeaderWrapper>
+          <Loaders.Rectangle width="115px" height="22px" />
+          <Loaders.Rectangle width="100px" height="19px" />
+        </InviteInputLoaderHeaderWrapper>
+        <Loaders.Rectangle width="100%" height="32px" />
+        <Loaders.Rectangle width="70%" height="20px" />
+        <InviteInputLoaderFooterWrapper>
+          <Loaders.Rectangle height="32px" />
+          <Loaders.Rectangle width="90px" height="32px" />
+        </InviteInputLoaderFooterWrapper>
+      </InviteInputLoaderWrapper>
+    </InvitePanelLoaderWrapper>
+  );
+}
+
+export default InvitePanelLoader;

packages/client/src/components/panels/InvitePanel/sub-components/InvitePanelLoader/index.ts

@@ -0,0 +1 @@
+export { default } from "./InvitePanelLoader";