message: Handle data fetching and loading slightly better.
diff: @@ -6,17 +6,27 @@ import Header from '../components/Header';
  import App from '../components/App';
  import Footer from '../components/Footer';
  -async function getGraveyardData() {
  - const req = await fetch('https://killedbygoogle.com/graveyard.json');
  +export default class HomePage extends Component {
  +
  + constructor(props) {
  + super(props);
  + this.state = {
  + items: []
  + };
  +
  + }
  +
  + async componentDidMount() {
  + const req = await fetch('/graveyard.json');
  const res = await req.json();
  const data = await res.sort(
  (a, b) => new Date(b.dateClose) - new Date(a.dateClose)
  );
  - return <App items={data} />;
  + this.setState({
  + items: data
  + });
  }
  -export default class HomePage extends Component {
  -
  analytics() {
  if (process.env.NODE_ENV === 'production' )
  return (<script async defer data-website-id="87417ccb-e93c-4789-aad3-576d80124db8" src="https://analytics.bale.media/umami.js"></script>);
  @@ -28,7 +38,6 @@ export default class HomePage extends Component {
  }
  render() {
  - const { data } = this.props;
  return (
  <>
  <Head>
  @@ -60,9 +69,13 @@ export default class HomePage extends Component {
  <script id="mcjs" src="chimp.js"></script>
  {this.analytics()}
  </Head>
  +
  + {this.state.items.length ? <>
  <Header />
  - {getGraveyardData()}
  + <App items={this.state.items} />
  <Footer />
  + </>: 'loading' }
  +
  {this.card()}
  </>
  );
  