Perf: improved discussions MFE's components re-rendering and loading time (#485)

* chore: configure WDYR for react profiling

* perf: reduced post content re-rendering

* perf: post content view and it child optimization

* perf: add memoization in post editor

* perf: add memoization in postCommnetsView

* perf: improved endorsed comment view rendering

* perf: improved re-rendering in reply component

* fix: uncomment questionType commentsView

* fix: removed console errors in postContent area

* perf: reduced postType and postId dependancy

* perf: improved re-rendering in discussionHome

* perf: improved re-rendering of postsList and its child components

* perf: improved re-rendering of legacyTopic and learner sidebar

* fix: postFilterBar filter was not updating

* fix: resolve duplicate comment posts issue

* fix: memory leaking issue in comments view

* fix: duplicate topic posts in inContext sidebar

* perf: add lazy loading

* chore: remove WDYR configuration

* fix: alert banner padding

* chore: update package-lock file

src/discussions/empty-posts/EmptyPosts.jsx

@@ -1,9 +1,9 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import propTypes from 'prop-types';
 
 import { useDispatch, useSelector } from 'react-redux';
 
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 
 import { useIsOnDesktop } from '../data/hooks';
 import { selectAreThreadsFiltered, selectPostThreadCount } from '../data/selectors';
@@ -11,16 +11,16 @@ import messages from '../messages';
 import { messages as postMessages, showPostEditor } from '../posts';
 import EmptyPage from './EmptyPage';
 
-function EmptyPosts({ intl, subTitleMessage }) {
+const EmptyPosts = ({ subTitleMessage }) => {
+  const intl = useIntl();
   const dispatch = useDispatch();
-
+  const isOnDesktop = useIsOnDesktop();
   const isFiltered = useSelector(selectAreThreadsFiltered);
   const totalThreads = useSelector(selectPostThreadCount);
-  const isOnDesktop = useIsOnDesktop();
 
-  function addPost() {
-    return dispatch(showPostEditor());
-  }
+  const addPost = useCallback(() => (
+    dispatch(showPostEditor())
+  ), []);
 
   let title = messages.noPostSelected;
   let subTitle = null;
@@ -49,7 +49,7 @@ function EmptyPosts({ intl, subTitleMessage }) {
       fullWidth={fullWidth}
     />
   );
-}
+};
 
 EmptyPosts.propTypes = {
   subTitleMessage: propTypes.shape({
@@ -57,7 +57,6 @@ EmptyPosts.propTypes = {
     defaultMessage: propTypes.string,
     description: propTypes.string,
   }).isRequired,
-  intl: intlShape.isRequired,
 };
 
-export default injectIntl(EmptyPosts);
+export default React.memo(EmptyPosts);