Client/Shared: VersionHistoryPanel: Added a header component.

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

@@ -27,7 +27,6 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { Backdrop } from "@docspace/shared/components/backdrop";
-import { Heading } from "@docspace/shared/components/heading";
 import { Aside } from "@docspace/shared/components/aside";
 
 import { FloatingButton } from "@docspace/shared/components/floating-button";
@@ -37,13 +36,11 @@ import { withTranslation } from "react-i18next";
 import {
   StyledVersionHistoryPanel,
   StyledContent,
-  StyledHeaderContent,
   StyledBody,
 } from "../StyledPanels";
 import { SectionBodyContent } from "../../../pages/VersionHistory/Section/";
 import { inject, observer } from "mobx-react";
 import config from "PACKAGE_FILE";
-import { ArticleHeaderLoader } from "@docspace/shared/skeletons/article";
 
 class PureVersionHistoryPanel extends React.Component {
   onClose = () => {
@@ -85,26 +82,10 @@ class PureVersionHistoryPanel extends React.Component {
           visible={visible}
           onClose={this.onClose}
           withoutBodyScroll
+          isLoading={!versions && !isLoading}
+          header={versions ? versions[0].title : ""}
         >
           <StyledContent>
-            <StyledHeaderContent className="version-history-panel-header">
-              {versions && !isLoading ? (
-                <Heading
-                  className="version-history-panel-heading"
-                  size="medium"
-                  truncate
-                >
-                  {versions[0].title}
-                </Heading>
-              ) : (
-                <ArticleHeaderLoader
-                  className="loader-version-history"
-                  height="28"
-                  width="688"
-                />
-              )}
-            </StyledHeaderContent>
-
             <StyledBody className="version-history-panel-body">
               <SectionBodyContent onClose={this.onClose} />
             </StyledBody>

packages/shared/components/aside/Aside.types.ts

@@ -51,6 +51,7 @@ export interface AsideHeaderProps {
   onBackClick?: () => void;
   onCloseClick?: () => void;
   style?: React.CSSProperties;
+  isLoading?: boolean;
 }
 export interface StyledAsideProps {
   visible: boolean;

packages/shared/components/aside/AsideHeader.tsx

@@ -31,6 +31,7 @@ import { IconButton } from "../icon-button";
 import { Text } from "../text";
 import { AsideHeaderProps } from "./Aside.types";
 import { StyledHeaderContainer } from "./Aside.styled";
+import { RectangleSkeleton } from "../../skeletons/rectangle";
 
 const AsideHeader = (props: AsideHeaderProps) => {
   const {
@@ -43,6 +44,7 @@ const AsideHeader = (props: AsideHeaderProps) => {
     className,
     id,
     style,
+    isLoading,
   } = props;
 
   const backButtonRender = (
@@ -64,8 +66,8 @@ const AsideHeader = (props: AsideHeaderProps) => {
     />
   );
 
-  return (
+  const mainComponent = (
-    <StyledHeaderContainer id={id} className={className} style={style}>
+    <>
       {isBackButton && backButtonRender}
       {typeof header === "string" ? (
         <Text fontSize="21px" fontWeight={700} className="header-component">
@@ -88,6 +90,14 @@ const AsideHeader = (props: AsideHeaderProps) => {
           ))}
         </div>
       )}
+    </>
+  );
+
+  const loaderComponent = <RectangleSkeleton height="28" width="100%" />;
+
+  return (
+    <StyledHeaderContainer id={id} className={className} style={style}>
+      {isLoading ? loaderComponent : mainComponent}
       {isCloseable && closeIconRender}
     </StyledHeaderContainer>
   );