Web: Common/People: Fixed display downloading of profile & edit profile.

products/ASC.People/Client/src/components/pages/Profile/index.js

@@ -28,7 +28,9 @@ class PureProfile extends React.Component {
     const { userId } = match.params;
     isChrome && isAndroid && window && window.scroll(0, 0);
     setDocumentTitle(t("Profile"));
-
+    this.documentElement = document.getElementsByClassName(
+      "needToCancelAnimationWithTransition"
+    );
     const queryString = ((location && location.search) || "").slice(1);
     const queryParams = queryString.split("&");
     const arrayOfQueryParams = queryParams.map((queryParam) =>
@@ -42,16 +44,28 @@ class PureProfile extends React.Component {
     if (!profile) {
       fetchProfile(userId);
     }
+
+    if (!profile && this.documentElement) {
+      for (var i = 0; i < this.documentElement.length; i++) {
+        this.documentElement[i].style.transition = "none";
+      }
+    }
   }
 
   componentDidUpdate(prevProps) {
-    const { match, fetchProfile } = this.props;
+    const { match, fetchProfile, profile } = this.props;
     const { userId } = match.params;
     const prevUserId = prevProps.match.params.userId;
 
     if (userId !== undefined && userId !== prevUserId) {
       fetchProfile(userId);
     }
+
+    if (profile && this.documentElement) {
+      for (var i = 0; i < this.documentElement.length; i++) {
+        this.documentElement[i].style.transition = "";
+      }
+    }
   }
 
   componentWillUnmount() {

products/ASC.People/Client/src/components/pages/ProfileAction/index.js

@@ -32,7 +32,9 @@ class ProfileAction extends React.Component {
   componentDidMount() {
     const { match, fetchProfile, isEdit, setIsEditingForm, t } = this.props;
     const { userId } = match.params;
-
+    this.documentElement = document.getElementsByClassName(
+      "needToCancelAnimationWithTransition"
+    );
     setDocumentTitle(t("ProfileAction"));
     changeLanguage(i18n);
     if (isEdit) {
@@ -41,6 +43,12 @@ class ProfileAction extends React.Component {
     if (userId) {
       fetchProfile(userId);
     }
+
+    if (!this.loaded && this.documentElement) {
+      for (var i = 0; i < this.documentElement.length; i++) {
+        this.documentElement[i].style.transition = "none";
+      }
+    }
   }
 
   componentDidUpdate(prevProps) {
@@ -51,12 +59,18 @@ class ProfileAction extends React.Component {
     if (userId !== undefined && userId !== prevUserId) {
       fetchProfile(userId);
     }
+
+    if (this.loaded && this.documentElement) {
+      for (var i = 0; i < this.documentElement.length; i++) {
+        this.documentElement[i].style.transition = "";
+      }
+    }
   }
 
   render() {
     console.log("ProfileAction render");
 
-    let loaded = false;
+    this.loaded = false;
     const {
       profile,
       isVisitor,
@@ -67,9 +81,9 @@ class ProfileAction extends React.Component {
     const { userId, type } = match.params;
 
     if (type) {
-      loaded = true;
+      this.loaded = true;
     } else if (profile) {
-      loaded = profile.userName === userId || profile.id === userId;
+      this.loaded = profile.userName === userId || profile.id === userId;
     }
 
     return (
@@ -92,11 +106,11 @@ class ProfileAction extends React.Component {
           )}
 
           <PageLayout.SectionHeader>
-            {loaded ? <SectionHeaderContent /> : <Loaders.SectionHeader />}
+            {this.loaded ? <SectionHeaderContent /> : <Loaders.SectionHeader />}
           </PageLayout.SectionHeader>
 
           <PageLayout.SectionBody>
-            {loaded ? (
+            {this.loaded ? (
               type ? (
                 avatarEditorIsOpen ? (
                   <CreateAvatarEditorPage />

web/ASC.Web.Common/src/components/NavMenu/sub-components/header-nav.js

@@ -98,7 +98,10 @@ const HeaderNav = React.memo(
     return (
       <LayoutContextConsumer>
         {(value) => (
-          <StyledNav valueTop={value.isVisible}>
+          <StyledNav
+            valueTop={value.isVisible}
+            className="needToCancelAnimationWithTransition"
+          >
             {modules.map((module) => (
               <NavItem
                 key={module.id}

web/ASC.Web.Common/src/components/NavMenu/sub-components/header.js

@@ -124,6 +124,7 @@ const HeaderComponent = ({
             valueTop={value.isVisible}
             isLoaded={isLoaded}
             isAuthenticated={isAuthenticated}
+            className="needToCancelAnimationWithTransition"
           >
             <NavItem
               iconName="MenuIcon"

web/ASC.Web.Common/src/components/PageLayout/sub-components/section-header.js

@@ -109,9 +109,12 @@ class SectionHeader extends React.Component {
         <LayoutContextConsumer>
           {(value) => (
             <div
-              className={classnames("section-header", {
+              className={classnames(
+                "section-header needToCancelAnimationWithTransition",
+                {
                   "section-header--hidden": !value.isVisible,
-              })}
+                }
+              )}
               {...rest}
             />
           )}