[MM-17353] Wait for transition on RHS before rendering expensive sub …

…components (#3594)

* [MM-17353] Wait for transition on RHS before rendering expensive sub components

* Style fix

* Fixed an issue on resize when the RHS is open

components/search_results/search_results.jsx

@@ -106,6 +106,7 @@ export default class SearchResults extends React.Component {
  channelDisplayName: PropTypes.string.isRequired,
  dataRetentionEnableMessageDeletion: PropTypes.bool.isRequired,
  dataRetentionMessageRetentionDays: PropTypes.string,
+ isOpened: PropTypes.bool,
  actions: PropTypes.shape({
  getMorePostsForSearch: PropTypes.func.isRequired,
  }),
@@ -181,7 +182,8 @@ export default class SearchResults extends React.Component {
  if (
  this.props.isSearchingTerm ||
  this.props.isSearchingFlaggedPost ||
- this.props.isSearchingPinnedPost
+ this.props.isSearchingPinnedPost ||
+ !this.props.isOpened
  ) {
  ctls = (
  <div className='sidebar--right__subheader'>

components/sidebar_right/sidebar_right.jsx

@@ -38,6 +38,27 @@ export default class SidebarRight extends React.PureComponent {
  }),
  };
 
+ constructor(props) {
+ super(props);
+
+ this.sidebarRight = React.createRef();
+ this.state = {
+ isOpened: false,
+ };
+ }
+
+ componentDidMount() {
+ window.addEventListener('resize', this.determineTransition);
+ this.determineTransition();
+ }
+
+ componentWillUnmount() {
+ window.removeEventListener('resize', this.determineTransition);
+ if (this.sidebarRight.current) {
+ this.sidebarRight.current.removeEventListener('transitionend', this.onFinishTransition);
+ }
+ }
+
  componentDidUpdate(prevProps) {
  const wasOpen = prevProps.searchVisible || prevProps.postRightVisible;
  const isOpen = this.props.searchVisible || this.props.postRightVisible;
@@ -55,6 +76,27 @@ export default class SidebarRight extends React.PureComponent {
  }
  }
 
+ determineTransition = () => {
+ const transitionInfo = window.getComputedStyle(this.sidebarRight.current).getPropertyValue('transition');
+ const hasTransition = transitionInfo !== 'all 0s ease 0s';
+
+ if (this.sidebarRight.current && hasTransition) {
+ this.setState({isOpened: this.props.isOpen});
+ this.sidebarRight.current.addEventListener('transitionend', this.onFinishTransition);
+ } else {
+ this.setState({isOpened: true});
+ if (this.sidebarRight.current) {
+ this.sidebarRight.current.removeEventListener('transitionend', this.onFinishTransition);
+ }
+ }
+ }
+
+ onFinishTransition = (e) => {
+ if (e.propertyName === 'transform') {
+ this.setState({isOpened: this.props.isOpen});
+ }
+ }
+
  onShrink = () => {
  this.props.actions.setRhsExpanded(false);
  };
@@ -105,6 +147,7 @@ export default class SidebarRight extends React.PureComponent {
  toggleSize={this.toggleSize}
  shrink={this.onShrink}
  channelDisplayName={channelDisplayName}
+ isOpened={this.state.isOpened}
  />
  </div>
  );
@@ -145,6 +188,7 @@ export default class SidebarRight extends React.PureComponent {
  <div
  className={classNames('sidebar--right', expandedClass, {'move--left': this.props.isOpen})}
  id='sidebar-right'
+ ref={this.sidebarRight}
  >
  <div
  onClick={this.onShrink}