defer shows loader

app/routes/_index/route.tsx

@@ -1,17 +1,18 @@
 import type { LoaderFunctionArgs } from "@remix-run/node";
-import { json, NavLink, useLoaderData } from "@remix-run/react";
+import { Await, defer, NavLink, useLoaderData } from "@remix-run/react";
 import classes from "./index.module.css";
 import { Shows } from "~/components/Shows";
 import Layout from "~/components/Layout";
 import SocialIcons from "~/components/SocialIcons";
 import NewsletterSignup from "~/components/NewsletterSignup";
+import { Suspense } from "react";
 
 export const loader = async ({ context: { payload } }: LoaderFunctionArgs) => {
   // today, 00:00:00
   const today = new Date();
   today.setHours(0, 0, 0, 0);
 
-  const shows = await payload.find({
+  const shows = payload.find({
     collection: "shows",
     sort: "date",
     where: {
@@ -20,7 +21,8 @@ export const loader = async ({ context: { payload } }: LoaderFunctionArgs) => {
       },
     },
   });
-  return json({ shows }, { status: 200 });
+
+  return defer({ shows }, { status: 200 });
 };
 
 export default function Index() {
@@ -30,7 +32,11 @@ export default function Index() {
     <Layout className={classes.container}>
       <h1>Walls & Birds</h1>
       <h2 className={classes.tour}>tour dates</h2>
-      <Shows shows={shows} className={classes.shows} />
+      <Suspense fallback={<div>Loading...</div>}>
+        <Await resolve={shows}>
+          {(shows) => <Shows shows={shows} className={classes.shows} />}
+        </Await>
+      </Suspense>
 
       <hr />
       <h2>email newsletter</h2>