Fix dialog closing animation jank

Signed-off-by: Ajay Bura <ajbura@gmail.com>

src/app/molecules/dialog/Dialog.jsx

@@ -10,14 +10,17 @@ import ScrollView from '../../atoms/scroll/ScrollView';
 import RawModal from '../../atoms/modal/RawModal';
 
 function Dialog({
-  className, isOpen, title,
+  className, isOpen, title, onAfterOpen, onAfterClose,
-  contentOptions, onRequestClose, children,
+  contentOptions, onRequestClose, closeFromOutside, children,
 }) {
   return (
     <RawModal
       className={`${className === null ? '' : `${className} `}dialog-model`}
       isOpen={isOpen}
+      onAfterOpen={onAfterOpen}
+      onAfterClose={onAfterClose}
       onRequestClose={onRequestClose}
+      closeFromOutside={closeFromOutside}
       size="small"
     >
       <div className="dialog">
@@ -44,7 +47,10 @@ function Dialog({
 Dialog.defaultProps = {
   className: null,
   contentOptions: null,
+  onAfterOpen: null,
+  onAfterClose: null,
   onRequestClose: null,
+  closeFromOutside: true,
 };
 
 Dialog.propTypes = {
@@ -52,7 +58,10 @@ Dialog.propTypes = {
   isOpen: PropTypes.bool.isRequired,
   title: PropTypes.string.isRequired,
   contentOptions: PropTypes.node,
+  onAfterOpen: PropTypes.func,
+  onAfterClose: PropTypes.func,
   onRequestClose: PropTypes.func,
+  closeFromOutside: PropTypes.bool,
   children: PropTypes.node.isRequired,
 };
 

src/app/organisms/profile-viewer/ProfileViewer.jsx

@@ -253,11 +253,10 @@ function ProfileViewer() {
     };
   }, []);
 
-  useEffect(() => {
+  const handleAfterClose = () => {
-    if (isOpen) return;
     setUserId(null);
     setRoomId(null);
-  }, [isOpen]);
+  };
 
   function renderProfile() {
     const member = room.getMember(userId) || mx.getUser(userId) || {};
@@ -298,10 +297,11 @@ function ProfileViewer() {
       className="profile-viewer__dialog"
       isOpen={isOpen}
       title={`${username} in ${room?.name ?? ''}`}
+      onAfterClose={handleAfterClose}
       onRequestClose={() => setIsOpen(false)}
       contentOptions={<IconButton src={CrossIC} onClick={() => setIsOpen(false)} tooltip="Close" />}
     >
-      {isOpen && renderProfile()}
+      {roomId ? renderProfile() : <div />}
     </Dialog>
   );
 }

src/app/organisms/read-receipts/ReadReceipts.jsx

@@ -30,12 +30,10 @@ function ReadReceipts() {
     };
   }, []);
 
-  useEffect(() => {
+  const handleAfterClose = () => {
-    if (isOpen === false) {
+    setReaders([]);
-      setReaders([]);
+    setRoomId(null);
-      setRoomId(null);
+  };
-    }
-  }, [isOpen]);
 
   function renderPeople(userId) {
     const room = initMatrix.matrixClient.getRoom(roomId);
@@ -62,6 +60,7 @@ function ReadReceipts() {
     <Dialog
       isOpen={isOpen}
       title="Seen by"
+      onAfterClose={handleAfterClose}
       onRequestClose={() => setIsOpen(false)}
       contentOptions={<IconButton src={CrossIC} onClick={() => setIsOpen(false)} tooltip="Close" />}
     >