Convert placeholder components to TSX

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

@@ -1,7 +1,11 @@
-import PropTypes from 'prop-types';
 import * as React from 'react';
 
-const PlaceholderAvatar = ({ size }) => {
+interface IPlaceholderAvatar {
+  size: number,
+}
+
+/** Fake avatar to display while data is loading. */
+const PlaceholderAvatar: React.FC<IPlaceholderAvatar> = ({ size }) => {
   const style = React.useMemo(() => {
     if (!size) {
       return {};
@@ -17,13 +21,8 @@ const PlaceholderAvatar = ({ size }) => {
     <div
       className='rounded-full bg-slate-200 dark:bg-slate-700'
       style={style}
-      alt=''
     />
   );
 };
 
-PlaceholderAvatar.propTypes = {
-  size: PropTypes.number.isRequired,
-};
-
 export default PlaceholderAvatar;

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

@@ -1,9 +1,14 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 
 import { randomIntFromInterval, generateText } from '../utils';
 
-const PlaceholderDisplayName = ({ minLength, maxLength }) => {
+interface IPlaceholderDisplayName {
+  maxLength: number,
+  minLength: number,
+}
+
+/** Fake display name to show when data is loading. */
+const PlaceholderDisplayName: React.FC<IPlaceholderDisplayName> = ({ minLength, maxLength }) => {
   const length = randomIntFromInterval(maxLength, minLength);
   const acctLength = randomIntFromInterval(maxLength, minLength);
 
@@ -15,9 +20,4 @@ const PlaceholderDisplayName = ({ minLength, maxLength }) => {
   );
 };
 
-PlaceholderDisplayName.propTypes = {
-  maxLength: PropTypes.number.isRequired,
-  minLength: PropTypes.number.isRequired,
-};
-
 export default PlaceholderDisplayName;

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

@@ -1,9 +1,14 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 
 import { randomIntFromInterval, generateText } from '../utils';
 
-const PlaceholderStatusContent = ({ minLength, maxLength }) => {
+interface IPlaceholderStatusContent {
+  maxLength: number,
+  minLength: number,
+}
+
+/** Fake status content while data is loading. */
+const PlaceholderStatusContent: React.FC<IPlaceholderStatusContent> = ({ minLength, maxLength }) => {
   const length = randomIntFromInterval(maxLength, minLength);
 
   return (
@@ -13,9 +18,4 @@ const PlaceholderStatusContent = ({ minLength, maxLength }) => {
   );
 };
 
-PlaceholderStatusContent.propTypes = {
-  maxLength: PropTypes.number.isRequired,
-  minLength: PropTypes.number.isRequired,
-};
-
 export default PlaceholderStatusContent;