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