Merge branch 'thread-connector-fix' into 'develop'

Fix alignment on ThreadConnector

See merge request soapbox-pub/soapbox!2493

app/soapbox/features/feed-filtering/feed-carousel.tsx

@@ -207,7 +207,7 @@ const FeedCarousel = () => {
                   style={{ width: widthPerAvatar || 'auto' }}
                   key={idx}
                 >
-                  <PlaceholderAvatar size={56} withText />
+                  <PlaceholderAvatar size={56} withText className='py-3' />
                 </div>
               ))
             ) : (

app/soapbox/features/placeholder/components/placeholder-avatar.tsx

@@ -1,3 +1,4 @@
+import clsx from 'clsx';
 import React from 'react';
 
 import { Stack } from 'soapbox/components/ui';
@@ -5,10 +6,11 @@ import { Stack } from 'soapbox/components/ui';
 interface IPlaceholderAvatar {
   size: number
   withText?: boolean
+  className?: string
 }
 
 /** Fake avatar to display while data is loading. */
-const PlaceholderAvatar: React.FC<IPlaceholderAvatar> = ({ size, withText = false }) => {
+const PlaceholderAvatar: React.FC<IPlaceholderAvatar> = ({ size, withText = false, className }) => {
   const style = React.useMemo(() => {
     if (!size) {
       return {};
@@ -21,7 +23,10 @@ const PlaceholderAvatar: React.FC<IPlaceholderAvatar> = ({ size, withText = fals
   }, [size]);
 
   return (
-    <Stack space={2} className='animate-pulse py-3 text-center'>
+    <Stack
+      space={2}
+      className={clsx('animate-pulse text-center', className)}
+    >
       <div
         className='mx-auto block rounded-full bg-primary-50 dark:bg-primary-800'
         style={style}

app/soapbox/features/placeholder/components/placeholder-status.tsx

@@ -8,11 +8,11 @@ import PlaceholderDisplayName from './placeholder-display-name';
 import PlaceholderStatusContent from './placeholder-status-content';
 
 interface IPlaceholderStatus {
-  variant?: 'rounded' | 'slim'
+  variant?: 'rounded' | 'slim' | 'default'
 }
 
 /** Fake status to display while data is loading. */
-const PlaceholderStatus: React.FC<IPlaceholderStatus> = ({ variant = 'rounded' }) => (
+const PlaceholderStatus: React.FC<IPlaceholderStatus> = ({ variant }) => (
   <div
     className={clsx({
       'status-placeholder bg-white dark:bg-primary-900': true,

app/soapbox/features/status/components/thread-status.tsx

@@ -46,7 +46,7 @@ const ThreadStatus: React.FC<IThreadStatus> = (props): JSX.Element => {
         // @ts-ignore FIXME
         <StatusContainer {...props} showGroup={false} />
       ) : (
-        <PlaceholderStatus variant='slim' />
+        <PlaceholderStatus variant='default' />
       )}
     </div>
   );