From 27cc0025729cf0a5e06b1639e906d80861140b9f Mon Sep 17 00:00:00 2001
From: Chewbacca <dice.warrant-02@icloud.com>
Date: Wed, 3 May 2023 11:13:47 -0400
Subject: [PATCH] Fix alignment on ThreadConnector

---
 app/soapbox/features/feed-filtering/feed-carousel.tsx    | 2 +-
 .../placeholder/components/placeholder-avatar.tsx        | 9 +++++++--
 .../placeholder/components/placeholder-status.tsx        | 4 ++--
 app/soapbox/features/status/components/thread-status.tsx | 2 +-
 4 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/app/soapbox/features/feed-filtering/feed-carousel.tsx b/app/soapbox/features/feed-filtering/feed-carousel.tsx
index 9d62538ce..f437aad0c 100644
--- a/app/soapbox/features/feed-filtering/feed-carousel.tsx
+++ b/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>
               ))
             ) : (
diff --git a/app/soapbox/features/placeholder/components/placeholder-avatar.tsx b/app/soapbox/features/placeholder/components/placeholder-avatar.tsx
index 6eb479f13..058904001 100644
--- a/app/soapbox/features/placeholder/components/placeholder-avatar.tsx
+++ b/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}
diff --git a/app/soapbox/features/placeholder/components/placeholder-status.tsx b/app/soapbox/features/placeholder/components/placeholder-status.tsx
index 06d6ff1a2..739c96c5c 100644
--- a/app/soapbox/features/placeholder/components/placeholder-status.tsx
+++ b/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,
diff --git a/app/soapbox/features/status/components/thread-status.tsx b/app/soapbox/features/status/components/thread-status.tsx
index c3ff7bc65..8f3e5b249 100644
--- a/app/soapbox/features/status/components/thread-status.tsx
+++ b/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>
   );