Invalidation when creating new is correct, but the invalidation when editing a contact doesn't work properly.

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

@@ -2,12 +2,16 @@ import Form from "next/form";
 import { fetchContact } from "@/app/(sidebar)/loaders";
 import { notFound, redirect } from "next/navigation";
 import { updateContact } from "@/app/data";
+import { revalidatePath } from "next/cache";
 
 
 async function editContact(contactId: string, formData: FormData) {
   "use server";
   const updates = Object.fromEntries(formData);
   await updateContact(contactId, updates);
+  revalidatePath('/(sidebar)', 'layout');
+  revalidatePath(`/contacts/${contactId}`, 'page');
+  revalidatePath(`/contacts/${contactId}/edit`, 'page');
   redirect(`/contacts/${contactId}`);  // This makes the server component data be reloaded.
   /*
    * The server component architecture is a HTMX-like structure where the component rendered is STATE-LESS

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

@@ -1,6 +1,7 @@
 import { notFound } from "next/navigation";
 import Contact from "@/app/(sidebar)/contacts/[contactId]/Contact";
 import { fetchContact } from "@/app/(sidebar)/loaders";
+import React, { Suspense } from "react";
 
 export default async function ContactPage({
   params
@@ -14,6 +15,8 @@ export default async function ContactPage({
   });
 
   return (
+    <Suspense fallback={<div>Loading contact...</div>}>
       <Contact contact={contact}/>
+    </Suspense>
   );
 }

src/app/(sidebar)/layout.tsx

@@ -9,7 +9,7 @@ import { fetchContacts } from "@/app/(sidebar)/loaders";
 async function newContact() {
   "use server";
   await createEmptyContact();
-  revalidatePath('/');
+  revalidatePath('/(sidebar)', 'layout');
 }
 
 export default function SidebarRootLayout({

src/app/(sidebar)/loaders.ts

@@ -1,11 +1,13 @@
 import { getContact, getContacts } from "@/app/data";
 
+// This files is a non-needed interface file. I can directly call getContact/s into Server Components.
+
 export const fetchContacts = async () => {
-  console.log("fetch contacts")
+  console.log("fetch contacts");
   return await getContacts();
 };
 
 export const fetchContact = async (contactId: string) => {
-  console.log(`fetch contact ${contactId}`)
+  console.log(`fetch contact ${contactId}`);
   return await getContact(contactId);
 };