editing assignments

nextjs/src/app/course/[courseName]/layout.tsx

@@ -2,6 +2,7 @@ import { dehydrate, HydrationBoundary } from "@tanstack/react-query";
 import { getQueryClient } from "@/app/providersQueryClientUtils";
 import { hydrateCourse } from "@/hooks/hookHydration";
 import CourseContextProvider from "./context/CourseContextProvider";
+import { Suspense } from "react";
 
 export default async function CourseLayout({
   children,
@@ -10,7 +11,7 @@ export default async function CourseLayout({
   children: React.ReactNode;
   params: { courseName: string };
 }) {
-  const decodedCourseName = decodeURIComponent(courseName)
+  const decodedCourseName = decodeURIComponent(courseName);
   if (courseName.includes(".js.map")) {
     console.log("cannot load course that is .js.map " + decodedCourseName);
     return <div></div>;
@@ -22,8 +23,12 @@ export default async function CourseLayout({
 
   // console.log("hydrated course state", courseName, dehydratedState);
   return (
-    <CourseContextProvider localCourseName={decodedCourseName}>
-      <HydrationBoundary state={dehydratedState}>{children}</HydrationBoundary>
-    </CourseContextProvider>
+    <Suspense>
+      <CourseContextProvider localCourseName={decodedCourseName}>
+        <HydrationBoundary state={dehydratedState}>
+          {children}
+        </HydrationBoundary>
+      </CourseContextProvider>
+    </Suspense>
   );
 }