diff --git a/app/soapbox/features/placeholder/components/placeholder_account.js b/app/soapbox/features/placeholder/components/placeholder_account.js
deleted file mode 100644
index 4d638046bc..0000000000
Binary files a/app/soapbox/features/placeholder/components/placeholder_account.js and /dev/null differ
diff --git a/app/soapbox/features/placeholder/components/placeholder_account.tsx b/app/soapbox/features/placeholder/components/placeholder_account.tsx
new file mode 100644
index 0000000000..ad31db3a43
--- /dev/null
+++ b/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;
diff --git a/app/soapbox/features/placeholder/components/placeholder_card.js b/app/soapbox/features/placeholder/components/placeholder_card.tsx
similarity index 85%
rename from app/soapbox/features/placeholder/components/placeholder_card.js
rename to app/soapbox/features/placeholder/components/placeholder_card.tsx
index 87b7e5caf9..92911b9d64 100644
Binary files a/app/soapbox/features/placeholder/components/placeholder_card.js and b/app/soapbox/features/placeholder/components/placeholder_card.tsx differ
diff --git a/app/soapbox/features/placeholder/components/placeholder_chat.js b/app/soapbox/features/placeholder/components/placeholder_chat.js
deleted file mode 100644
index a3763b4164..0000000000
Binary files a/app/soapbox/features/placeholder/components/placeholder_chat.js and /dev/null differ
diff --git a/app/soapbox/features/placeholder/components/placeholder_chat.tsx b/app/soapbox/features/placeholder/components/placeholder_chat.tsx
new file mode 100644
index 0000000000..6b587f03da
--- /dev/null
+++ b/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;
diff --git a/app/soapbox/features/placeholder/components/placeholder_hashtag.js b/app/soapbox/features/placeholder/components/placeholder_hashtag.js
deleted file mode 100644
index 81c7882384..0000000000
Binary files a/app/soapbox/features/placeholder/components/placeholder_hashtag.js and /dev/null differ
diff --git a/app/soapbox/features/placeholder/components/placeholder_hashtag.tsx b/app/soapbox/features/placeholder/components/placeholder_hashtag.tsx
new file mode 100644
index 0000000000..28dceec72a
--- /dev/null
+++ b/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;
diff --git a/app/soapbox/features/placeholder/components/placeholder_material_status.js b/app/soapbox/features/placeholder/components/placeholder_material_status.js
deleted file mode 100644
index 3199d42aa2..0000000000
Binary files a/app/soapbox/features/placeholder/components/placeholder_material_status.js and /dev/null differ
diff --git a/app/soapbox/features/placeholder/components/placeholder_material_status.tsx b/app/soapbox/features/placeholder/components/placeholder_material_status.tsx
new file mode 100644
index 0000000000..28581cb099
--- /dev/null
+++ b/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;
diff --git a/app/soapbox/features/placeholder/components/placeholder_notification.js b/app/soapbox/features/placeholder/components/placeholder_notification.tsx
similarity index 94%
rename from app/soapbox/features/placeholder/components/placeholder_notification.js
rename to app/soapbox/features/placeholder/components/placeholder_notification.tsx
index e56f90c588..bb99eeb5bd 100644
Binary files a/app/soapbox/features/placeholder/components/placeholder_notification.js and b/app/soapbox/features/placeholder/components/placeholder_notification.tsx differ
diff --git a/app/soapbox/features/placeholder/components/placeholder_status.tsx b/app/soapbox/features/placeholder/components/placeholder_status.tsx
index a11823f8a8..d67c41204b 100644
--- a/app/soapbox/features/placeholder/components/placeholder_status.tsx
+++ b/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,