Composer redesign: Adds pending quote (#40829)

app/javascript/mastodon/components/skeleton.tsx

@@ -1,10 +1,18 @@
+import classNames from 'classnames';
+
 interface Props {
   width?: number | string;
   height?: number | string;
 }
 
-export const Skeleton: React.FC<Props> = ({ width, height }) => (
-  <span className='skeleton' style={{ width, height }}>
+export const Skeleton: React.FC<
+  Props & React.ComponentPropsWithRef<'span'>
+> = ({ className, width, height, style, ...props }) => (
+  <span
+    {...props}
+    className={classNames(className, 'skeleton')}
+    style={{ ...style, width, height }}
+  >
     &zwnj;
   </span>
 );

app/javascript/mastodon/components/status/quote.tsx

@@ -9,6 +9,7 @@ import { Link } from 'react-router-dom';
 import { PlayIcon } from '@phosphor-icons/react';
 
 import { revealAccount } from '@/mastodon/actions/accounts_typed';
+import { cancelPasteLinkCompose } from '@/mastodon/actions/compose_typed';
 import { fetchStatus } from '@/mastodon/actions/statuses';
 import type {
   ApiAudioAttachmentJSON,
@@ -42,6 +43,7 @@ import { EmojiHTML } from '../emoji/html';
 import { Icon } from '../icon';
 import { PopoverMenuCard } from '../menu/card';
 import { RelativeTimestamp } from '../relative_timestamp';
+import { Skeleton } from '../skeleton';
 
 import { onStatusLinksDisabled } from './hooks';
 import { StatusImage } from './image';
@@ -70,6 +72,29 @@ export const StatusQuote: React.FC<StatusQuoteProps> = (props) => {
   return <QuotedStatus id={quotedId} />;
 };
 
+export const StatusQuotePending: React.FC = () => {
+  const dispatch = useAppDispatch();
+  const onCancel = useCallback(() => {
+    dispatch(cancelPasteLinkCompose());
+  }, [dispatch]);
+
+  return (
+    <Card onDelete={onCancel}>
+      <CardTitle
+        className={classes.title}
+        image={<Skeleton width={20} height={20} style={{ display: 'block' }} />}
+        afterContent={<Skeleton width='5ch' />}
+      >
+        <Skeleton className='display-name__html' width='10ch' />
+      </CardTitle>
+      <CardBody className={classes.body} noClamp>
+        <Skeleton width='100%' />
+        <Skeleton width='100%' />
+      </CardBody>
+    </Card>
+  );
+};
+
 export const QuotedStatus: React.FC<{
   id: string;
   clamp?: boolean;

app/javascript/mastodon/features/compose/redesign/attachments.tsx

@@ -1,5 +1,6 @@
 import type React from 'react';
 
+import { StatusQuotePending } from '@/mastodon/components/status/quote';
 import { useAppSelector } from '@/mastodon/store';
 
 import classes from './attachments.module.scss';
@@ -14,11 +15,10 @@ import { ComposeUpload } from './upload';
 export const ComposeAttachments: React.FC<{ className?: string }> = ({
   className,
 }) => {
-  const { hasPoll, hasAttachments, quotedStatusId } = useAppSelector(
-    selectComposeHasAttachments,
-  );
+  const { hasPoll, hasAttachments, quotedStatusId, isFetchingLink } =
+    useAppSelector(selectComposeHasAttachments);
 
-  if (!hasPoll && !hasAttachments && !quotedStatusId) {
+  if (!hasPoll && !hasAttachments && !quotedStatusId && !isFetchingLink) {
     return null;
   }
 
@@ -27,6 +27,7 @@ export const ComposeAttachments: React.FC<{ className?: string }> = ({
       {hasPoll && <ComposePoll />}
       {hasAttachments && <ComposeMediaAttachments />}
       {quotedStatusId && <ComposeQuote id={quotedStatusId} />}
+      {!quotedStatusId && isFetchingLink && <StatusQuotePending />}
     </div>
   );
 };

app/javascript/mastodon/features/compose/redesign/selectors.ts

@@ -83,13 +83,21 @@ export const selectComposeHasAttachments = createAppSelector(
         | Immutable.List<unknown>
         | undefined,
     (state) => Number(state.compose.get('pending_media_attachments')),
+    (state) => state.compose.get('fetching_link') !== null,
   ],
-  (hasPoll, quotedStatusId, attachments, pendingAttachments) => {
+  (
+    hasPoll,
+    quotedStatusId,
+    attachments,
+    pendingAttachments,
+    isFetchingLink,
+  ) => {
     return {
       hasPoll,
       hasAttachments:
         (attachments && attachments.size > 0) || pendingAttachments > 0,
       quotedStatusId,
+      isFetchingLink,
     };
   },
 );