Complete "Loading Data"

2025-04-01 11:32:54 +02:00
parent 90c0dd6812
commit 4330157491
2 changed files with 35 additions and 10 deletions
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,9 +1,10 @@
 import type { Metadata } from "next";
-import React from "react";
+import React, { Suspense } from "react";

 import "./globals.css";
 import Form from "next/form";
-import Link from "next/link";
+import ContactList from "@/app/sidebar-contacts";
+import { getContacts } from "@/app/data";

 export const metadata: Metadata = {
  title: "Next.js Address Book",
@@ -15,6 +16,8 @@ export default function RootLayout({
 }: Readonly<{
  children: React.ReactNode;
 }>) {
+  const contacts = getContacts();
+
  return (
    <html lang="en">
    <body>
@@ -40,14 +43,9 @@ export default function RootLayout({
        </Form>
      </div>
      <nav>
-        <ul>
-          <li>
-            <Link href={`/contacts/1`}>Your Name</Link>
-          </li>
-          <li>
-            <Link href={`/contacts/2`}>Your Friend</Link>
-          </li>
-        </ul>
+        <Suspense fallback={<div>Loading...</div>}>
+          <ContactList contacts={contacts}/>
+        </Suspense>
      </nav>
    </div>
    <div id={'detail'}>