Edit Contact but without loading?

src/app/(sidebar)/contacts/[contactId]/Contact.tsx

@@ -3,6 +3,7 @@
 import { ContactRecord } from "@/app/data";
 import Form from "next/form";
 import { use } from "react";
+import { useRouter } from "next/navigation";
 
 export default function Contact({
   contact
@@ -10,6 +11,7 @@ export default function Contact({
   contact: Promise<ContactRecord>
 }) {
   const c = use(contact);
+  const router = useRouter();
 
   return (
     <div id="contact">
@@ -47,9 +49,12 @@ export default function Contact({
         {c.notes ? <p>{c.notes}</p> : null}
 
         <div>
-          <Form action="edit">
-            <button type="submit">Edit</button>
-          </Form>
+          <button
+            type="button"
+            onClick={() => router.push(`/contacts/${c.id}/edit`)}
+          >
+            Edit
+          </button>
 
           <Form
             action="destroy"

src/app/(sidebar)/contacts/[contactId]/edit/loading.tsx

@@ -0,0 +1,5 @@
+export default function ContactLoading() {
+  return (
+    <div>Loading Edit Contact...</div>
+  );
+}

src/app/(sidebar)/contacts/[contactId]/edit/page.tsx

@@ -0,0 +1,69 @@
+import Form from "next/form";
+import { fetchContact } from "@/app/(sidebar)/loaders";
+import { notFound } from "next/navigation";
+
+
+export default async function EditContactPage({
+  params
+}: {
+  params: Promise<{ contactId: string }>
+}) {
+  const { contactId } = await params;
+  const contact = await fetchContact(contactId).then((c) => {
+    if (c === null) notFound();
+    return c;
+  });
+
+  return (
+    <Form key={contact.id} id="contact-form" formMethod="post" action=".">
+      <p>
+        <span>Name</span>
+        <input
+          aria-label="First name"
+          defaultValue={contact.first}
+          name="first"
+          placeholder="First"
+          type="text"
+        />
+        <input
+          aria-label="Last name"
+          defaultValue={contact.last}
+          name="last"
+          placeholder="Last"
+          type="text"
+        />
+      </p>
+      <label>
+        <span>Twitter</span>
+        <input
+          defaultValue={contact.twitter}
+          name="twitter"
+          placeholder="@jack"
+          type="text"
+        />
+      </label>
+      <label>
+        <span>Avatar URL</span>
+        <input
+          aria-label="Avatar URL"
+          defaultValue={contact.avatar}
+          name="avatar"
+          placeholder="https://example.com/avatar.jpg"
+          type="text"
+        />
+      </label>
+      <label>
+        <span>Notes</span>
+        <textarea
+          defaultValue={contact.notes}
+          name="notes"
+          rows={6}
+        />
+      </label>
+      <p>
+        <button type="submit">Save</button>
+        <button type="button">Cancel</button>
+      </p>
+    </Form>
+  );
+}

src/app/(sidebar)/contacts/[contactId]/page.tsx

@@ -1,6 +1,6 @@
-import { getContact } from "@/app/data";
 import { notFound } from "next/navigation";
 import Contact from "@/app/(sidebar)/contacts/[contactId]/Contact";
+import { fetchContact } from "@/app/(sidebar)/loaders";
 
 export default async function ContactPage({
   params
@@ -8,7 +8,7 @@ export default async function ContactPage({
   params: Promise<{ contactId: string }>
 }) {
   const { contactId } = await params;
-  const contact = getContact(contactId).then((c) => {
+  const contact = fetchContact(contactId).then((c) => {
     if (c === null) notFound();
     return c;
   });

src/app/(sidebar)/layout.tsx

@@ -2,8 +2,9 @@ import React, { Suspense } from "react";
 import Link from "next/link";
 import Form from "next/form";
 import ContactList from "./sidebar-contacts";
-import { createEmptyContact, getContacts } from "@/app/data";
+import { createEmptyContact } from "@/app/data";
 import { revalidatePath } from "next/cache";
+import { fetchContacts } from "@/app/(sidebar)/loaders";
 
 async function newContact() {
   "use server";
@@ -16,7 +17,7 @@ export default function SidebarRootLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  const contacts = getContacts();
+  const contacts = fetchContacts();
 
   return (
     <>

src/app/(sidebar)/loaders.ts

@@ -0,0 +1,10 @@
+import { getContact, getContacts } from "@/app/data";
+import { cache } from "react";
+
+export const fetchContacts = cache(async () => {
+  return await getContacts();
+});
+
+export const fetchContact = cache(async (contactId: string) => {
+  return await getContact(contactId);
+});