Merge branch 'master' into ahtisham/INF-780

Co-authored-by: adeel.tajamul <adeel.tajamul@arbisoft.com>

src/components/HTMLLoader.jsx

@@ -13,12 +13,12 @@ const defaultSanitizeOptions = {
 };
 
 function HTMLLoader({
-  htmlNode, componentId, cssClassName, testId,
+  htmlNode, componentId, cssClassName, testId, delay,
 }) {
   const sanitizedMath = DOMPurify.sanitize(htmlNode, { ...defaultSanitizeOptions });
   const previewRef = useRef();
 
-  const debouncedPostContent = useDebounce(htmlNode, 500);
+  const debouncedPostContent = useDebounce(htmlNode, delay);
 
   useEffect(() => {
     let promise = Promise.resolve(); // Used to hold chain of typesetting calls
@@ -45,6 +45,7 @@ HTMLLoader.propTypes = {
   componentId: PropTypes.string,
   cssClassName: PropTypes.string,
   testId: PropTypes.string,
+  delay: PropTypes.number,
 };
 
 HTMLLoader.defaultProps = {
@@ -52,6 +53,7 @@ HTMLLoader.defaultProps = {
   componentId: null,
   cssClassName: '',
   testId: '',
+  delay: 0,
 };
 
 export default HTMLLoader;

src/components/PostPreviewPane.jsx

@@ -29,7 +29,13 @@ function PostPreviewPane({
             className="float-right p-3"
             iconClassNames="icon-size"
           />
-          <HTMLLoader htmlNode={htmlNode} cssClassName="text-primary" componentId="post-preview" testId="post-preview" />
+          <HTMLLoader
+            htmlNode={htmlNode}
+            cssClassName="text-primary"
+            componentId="post-preview"
+            testId="post-preview"
+            delay={500}
+          />
         </div>
       )}
       <div className="d-flex justify-content-end">

src/discussions/post-comments/data/hooks.js

@@ -2,6 +2,8 @@ import { useEffect } from 'react';
 
 import { useDispatch, useSelector } from 'react-redux';
 
+import { sendTrackEvent } from '@edx/frontend-platform/analytics';
+
 import { EndorsementStatus } from '../../../data/constants';
 import { useDispatchWithState } from '../../../data/hooks';
 import { selectThread } from '../../posts/data/selectors';
@@ -11,6 +13,16 @@ import {
 } from './selectors';
 import { fetchThreadComments } from './thunks';
 
+function trackLoadMoreEvent(postId, params) {
+  sendTrackEvent(
+    'edx.forum.responses.loadMore',
+    {
+      postId,
+      params,
+    },
+  );
+}
+
 export function usePost(postId) {
   const dispatch = useDispatch();
   const thread = useSelector(selectThread(postId));
@@ -31,11 +43,15 @@ export function usePostComments(postId, endorsed = null) {
   const hasMorePages = useSelector(selectThreadHasMorePages(postId, endorsed));
   const currentPage = useSelector(selectThreadCurrentPage(postId, endorsed));
 
-  const handleLoadMoreResponses = async () => dispatch(fetchThreadComments(postId, {
-    endorsed,
-    page: currentPage + 1,
-    reverseOrder,
-  }));
+  const handleLoadMoreResponses = async () => {
+    const params = {
+      endorsed,
+      page: currentPage + 1,
+      reverseOrder,
+    };
+    await dispatch(fetchThreadComments(postId, params));
+    trackLoadMoreEvent(postId, params);
+  };
 
   useEffect(() => {
     dispatch(fetchThreadComments(postId, {