From 8039772d05c061a1cb4745bbdfa32c595d43b6a6 Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Wed, 22 Jun 2022 08:57:22 -0400
Subject: [PATCH] Extend PlaceholderAvatar component to support "withText" prop

---
 .../components/placeholder_avatar.tsx         | 21 +++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/app/soapbox/features/placeholder/components/placeholder_avatar.tsx b/app/soapbox/features/placeholder/components/placeholder_avatar.tsx
index a9740e86a..8f6959d15 100644
--- a/app/soapbox/features/placeholder/components/placeholder_avatar.tsx
+++ b/app/soapbox/features/placeholder/components/placeholder_avatar.tsx
@@ -1,11 +1,14 @@
 import * as React from 'react';
 
+import { Stack } from 'soapbox/components/ui';
+
 interface IPlaceholderAvatar {
-  size: number,
+  size: number
+  withText?: boolean
 }
 
 /** Fake avatar to display while data is loading. */
-const PlaceholderAvatar: React.FC<IPlaceholderAvatar> = ({ size }) => {
+const PlaceholderAvatar: React.FC<IPlaceholderAvatar> = ({ size, withText = false }) => {
   const style = React.useMemo(() => {
     if (!size) {
       return {};
@@ -18,10 +21,16 @@ const PlaceholderAvatar: React.FC<IPlaceholderAvatar> = ({ size }) => {
   }, [size]);
 
   return (
-    <div
-      className='rounded-full bg-slate-200 dark:bg-slate-700'
-      style={style}
-    />
+    <Stack space={3} className='animate-pulse text-center'>
+      <div
+        className='block mx-auto rounded-full bg-slate-200 dark:bg-slate-700'
+        style={style}
+      />
+
+      {withText && (
+        <div style={{ width: size, height: 20 }} className='rounded-full bg-slate-200 dark:bg-slate-700' />
+      )}
+    </Stack>
   );
 };