chore: Move to Typescript (#2783)

This PR moves the entire project to Typescript. Due to the ~1000 ignores this will lead to a messy codebase for a while, but the churn is worth it – all of those ignore comments are places that were never type-safe previously.

closes #1282

app/components/PlaceholderText.tsx

@@ -0,0 +1,54 @@
+import * as React from "react";
+import styled from "styled-components";
+import { randomInteger } from "@shared/random";
+import Flex from "~/components/Flex";
+import { pulsate } from "~/styles/animations";
+
+type Props = {
+  header?: boolean;
+  height?: number;
+  minWidth?: number;
+  maxWidth?: number;
+  delay?: number;
+};
+
+class PlaceholderText extends React.Component<Props> {
+  width = randomInteger(this.props.minWidth || 75, this.props.maxWidth || 100);
+
+  shouldComponentUpdate() {
+    return false;
+  }
+
+  render() {
+    return (
+      <Mask
+        width={this.width}
+        height={this.props.height}
+        delay={this.props.delay}
+        header={this.props.header}
+      />
+    );
+  }
+}
+
+const Mask = styled(Flex)<{
+  width: number;
+  height?: number;
+  delay?: number;
+  header?: boolean;
+}>`
+  width: ${(props) => (props.header ? props.width / 2 : props.width)}%;
+  height: ${(props) =>
+    props.height ? props.height : props.header ? 24 : 18}px;
+  margin-bottom: 6px;
+  border-radius: 6px;
+  background-color: ${(props) => props.theme.divider};
+  animation: ${pulsate} 2s infinite;
+  animation-delay: ${(props) => props.delay || 0}s;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+`;
+
+export default PlaceholderText;