diff --git a/app/javascript/flavours/glitch/components/mentions_placeholder.jsx b/app/javascript/flavours/glitch/components/mentions_placeholder.jsx
new file mode 100644
index 00000000000000..dde4d77a8494db
--- /dev/null
+++ b/app/javascript/flavours/glitch/components/mentions_placeholder.jsx
@@ -0,0 +1,29 @@
+import ImmutablePropTypes from 'react-immutable-proptypes';
+
+import { Permalink } from 'flavours/glitch/components/permalink';
+
+export const MentionsPlaceholder = ({ status }) => {
+ if (status.get('spoiler_text').length === 0 || !status.get('mentions')) {
+ return null;
+ }
+
+ return (
+
+ {status.get('mentions').map(item => (
+
+ @{item.get('username')}
+
+ )).reduce((aggregate, item) => [...aggregate, item, ' '], [])}
+
+ );
+};
+
+MentionsPlaceholder.propTypes = {
+ status: ImmutablePropTypes.map.isRequired,
+};
+
\ No newline at end of file
diff --git a/app/javascript/flavours/glitch/components/status.jsx b/app/javascript/flavours/glitch/components/status.jsx
index 276fff6ada244f..f45b41e9238e4f 100644
--- a/app/javascript/flavours/glitch/components/status.jsx
+++ b/app/javascript/flavours/glitch/components/status.jsx
@@ -28,6 +28,7 @@ import { Avatar } from './avatar';
import { AvatarOverlay } from './avatar_overlay';
import { DisplayName } from './display_name';
import { getHashtagBarForStatus } from './hashtag_bar';
+import { MentionsPlaceholder } from './mentions_placeholder';
import { Permalink } from './permalink';
import StatusActionBar from './status_action_bar';
import StatusContent from './status_content';
@@ -698,7 +699,6 @@ class Status extends ImmutablePureComponent {
{status.get('spoiler_text').length > 0 && }
- { /* TODO: mention placeholders */ }
{expanded && (
<>
)}
+ {/* This is a glitch-soc addition to have a placeholder */}
+ {!expanded && }
+
)}
- {/* TODO: mention placeholders */}
{expanded && (
<>
)}
+ {/* This is a glitch-soc addition to have a placeholder */}
+ {!expanded && }
+