feat: added delay in post preview to avoid flashing of content

src/components/HTMLLoader.jsx

@@ -5,6 +5,8 @@ import DOMPurify from 'dompurify';
 
 import { logError } from '@edx/frontend-platform/logging';
 
+import { useDebounce } from '../discussions/data/hooks';
+
 const defaultSanitizeOptions = {
   USE_PROFILES: { html: true },
   ADD_ATTR: ['columnalign'],
@@ -16,19 +18,21 @@ function HTMLLoader({
   const sanitizedMath = DOMPurify.sanitize(htmlNode, { ...defaultSanitizeOptions });
   const previewRef = useRef();
 
+  const debouncedPostContent = useDebounce(htmlNode, 500);
+
   useEffect(() => {
     let promise = Promise.resolve(); // Used to hold chain of typesetting calls
-
     function typeset(code) {
       promise = promise.then(() => window.MathJax?.typesetPromise(code()))
         .catch((err) => logError(`Typeset failed: ${err.message}`));
       return promise;
     }
-
-    typeset(() => {
-      previewRef.current.innerHTML = sanitizedMath;
-    });
-  }, [htmlNode]);
+    if (debouncedPostContent) {
+      typeset(() => {
+        previewRef.current.innerHTML = sanitizedMath;
+      });
+    }
+  }, [debouncedPostContent]);
 
   return (
     <div ref={previewRef} className={cssClassName} id={componentId} data-testid={testId} />