Convert most Placeholder components into TSX

app/soapbox/features/placeholder/components/placeholder_account.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import PlaceholderAvatar from './placeholder_avatar';
+import PlaceholderDisplayName from './placeholder_display_name';
+
+/** Fake account to display while data is loading. */
+const PlaceholderAccount: React.FC = () => {
+  return (
+    <div className='account'>
+      <div className='account__wrapper'>
+        <span className='account__display-name'>
+          <div className='account__avatar-wrapper'>
+            <PlaceholderAvatar size={36} />
+          </div>
+          <PlaceholderDisplayName minLength={3} maxLength={25} />
+        </span>
+      </div>
+    </div>
+  );
+};
+
+export default PlaceholderAccount;

app/soapbox/features/placeholder/components/placeholder_chat.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import { randomIntFromInterval, generateText } from '../utils';
+
+import PlaceholderAvatar from './placeholder_avatar';
+import PlaceholderDisplayName from './placeholder_display_name';
+
+/** Fake chat to display while data is loading. */
+const PlaceholderChat: React.FC = () => {
+  const messageLength = randomIntFromInterval(5, 75);
+
+  return (
+    <div className='chat-list-item chat-list-item--placeholder'>
+      <div className='account'>
+        <div className='account__wrapper'>
+          <div className='account__display-name'>
+            <div className='account__avatar-wrapper'>
+              <PlaceholderAvatar size={36} />
+            </div>
+            <PlaceholderDisplayName minLength={3} maxLength={25} />
+            <span className='chat__last-message'>
+              {generateText(messageLength)}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PlaceholderChat;

app/soapbox/features/placeholder/components/placeholder_hashtag.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { generateText, randomIntFromInterval } from '../utils';
+
+/** Fake hashtag to display while data is loading. */
+const PlaceholderHashtag: React.FC = () => {
+  const length = randomIntFromInterval(15, 30);
+
+  return (
+    <div className='placeholder-hashtag'>
+      <div className='trends__item'>
+        <div className='trends__item__name'>
+          {generateText(length)}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PlaceholderHashtag;

app/soapbox/features/placeholder/components/placeholder_material_status.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import PlaceholderStatus from './placeholder_status';
+
+/** Fake material status to display while data is loading. */
+const PlaceholderMaterialStatus: React.FC = () => {
+  return (
+    <div className='material-status' tabIndex={-1} aria-hidden>
+      <div className='material-status__status' tabIndex={0}>
+        <PlaceholderStatus />
+      </div>
+    </div>
+  );
+};
+
+export default PlaceholderMaterialStatus;

app/soapbox/features/placeholder/components/placeholder_status.tsx

@@ -9,7 +9,8 @@ interface IPlaceholderStatus {
   thread?: boolean
 }
 
-const PlaceholderStatus = ({ thread = false }: IPlaceholderStatus) => (
+/** Fake status to display while data is loading. */
+const PlaceholderStatus: React.FC<IPlaceholderStatus> = ({ thread = false }) => (
   <div
     className={classNames({
       'status-placeholder bg-white dark:bg-slate-800': true,