diff --git a/app/soapbox/features/ui/components/pending_status.js b/app/soapbox/features/ui/components/pending_status.js
index dd9327979..13daa5928 100644
--- a/app/soapbox/features/ui/components/pending_status.js
+++ b/app/soapbox/features/ui/components/pending_status.js
@@ -12,6 +12,11 @@ import Avatar from 'soapbox/components/avatar';
import DisplayName from 'soapbox/components/display_name';
import AttachmentThumbs from 'soapbox/components/attachment_thumbs';
import PollPreview from './poll_preview';
+import PlaceholderCard from 'soapbox/features/placeholder/components/placeholder_card';
+
+const shouldHaveCard = pendingStatus => {
+ return Boolean(pendingStatus.get('content').match(/https?:\/\/\S*/));
+};
const mapStateToProps = (state, props) => {
const { idempotencyKey } = props;
@@ -24,6 +29,23 @@ const mapStateToProps = (state, props) => {
export default @connect(mapStateToProps)
class PendingStatus extends ImmutablePureComponent {
+ renderMedia = () => {
+ const { status } = this.props;
+
+ if (status.get('media_attachments') && !status.get('media_attachments').isEmpty()) {
+ return (
+
+ );
+ } else if (shouldHaveCard(status)) {
+ return ;
+ } else {
+ return null;
+ }
+ }
+
render() {
const { status, className, showThread } = this.props;
if (!status) return null;
@@ -67,11 +89,7 @@ class PendingStatus extends ImmutablePureComponent {
collapsable
/>
-
-
+ {this.renderMedia()}
{status.get('poll') && }
{showThread && status.get('in_reply_to_id') && status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) && (