fix fetch loading

app/(pages)/projects/[id]/page.tsx

@@ -1,8 +1,7 @@
-import { Metadata } from "next"
-
-import { ProjectInterface } from "@/lib/types"
 import { ProjectContent } from "../sections/ProjectContent"
 import { getProjects, Project } from "@/lib/content"
+import { ProjectInterface } from "@/lib/types"
+import { Metadata } from "next"
 
 type PageProps = {
   params: { id: string }
@@ -50,6 +49,14 @@ export async function generateMetadata({
   }
 }
 
+export async function generateStaticParams() {
+  const projects = await getProjects()
+
+  return projects.map((project) => ({
+    id: project.id,
+  }))
+}
+
 export default async function ProjectDetailPage({ params }: PageProps) {
   return <ProjectContent id={params?.id?.toLowerCase()} />
 }

app/(pages)/projects/sections/ProjectContent.tsx

@@ -65,7 +65,7 @@ const markdownComponents = {
 }
 
 export const ProjectContent = ({ id }: { id: string }) => {
-  const { getProjectById } = useProjects()
+  const { getProjectById, isLoading } = useProjects()
   const { project } = getProjectById(id) ?? {}
 
   const hasSocialLinks = Object.keys(project?.links ?? {}).length > 0
@@ -81,10 +81,14 @@ export const ProjectContent = ({ id }: { id: string }) => {
 
   const isResearchProject = project?.category === ProjectCategory.RESEARCH
 
-  if (!project?.id) {
+  if (!isLoading && !project?.id) {
     notFound()
   }
 
+  if (isLoading) {
+    return null
+  }
+
   return (
     <section className="bg-project-page-gradient dark:bg-transparent-gradient relative">
       <AppLink