diff --git a/packages/pl-fe/src/features/status/components/thread.tsx b/packages/pl-fe/src/features/status/components/thread.tsx index 915a902fa..21b2c0cfd 100644 --- a/packages/pl-fe/src/features/status/components/thread.tsx +++ b/packages/pl-fe/src/features/status/components/thread.tsx @@ -325,54 +325,59 @@ const Thread: React.FC = ({ react: handleHotkeyReact, }; - const focusedStatus = ( -
- {status.deleted ? ( - - ) : ( - -
+ const children = useMemo(() => { + const focusedStatus = ( +
+ {status.deleted ? ( + + ) : ( + +
- + -
+
- -
-
- )} + +
+ + )} - {hasDescendants && ( -
- )} -
- ); + {hasDescendants && ( +
+ )} +
+ ); - const children: JSX.Element[] = []; + const children: JSX.Element[] = []; - if (isModal) { - // Add padding to the top of the Thread (for Media Modal) - children.push(
); - } + if (isModal) { + // Add padding to the top of the Thread (for Media Modal) + children.push(
); + } - const renderedAncestors = useMemo(() => renderChildren(ancestorsIds), [ancestorsIds]); - const renderedDescendants = useMemo(() => renderChildren(descendantsIds), [descendantsIds]); + const renderedAncestors = renderChildren(ancestorsIds); + const renderedDescendants = renderChildren(descendantsIds); + + children.push(...renderedAncestors, focusedStatus, ...renderedDescendants); + + return children; + }, [ancestorsIds, descendantsIds, status.deleted, status.id, isModal]); - children.push(...renderedAncestors, focusedStatus, ...renderedDescendants); return (