Fix navbar hydration error/layout shift

src/app/projects/page.tsx

@@ -1,11 +1,21 @@
+'use client';
+
+import { useEffect, useState } from "react";
 import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "~/components/ui/card";
 import { Badge } from "~/components/ui/badge";
 import Link from "next/link";
-import { ArrowUpRight, Sparkles } from "lucide-react";
+import { ArrowUpRight } from "lucide-react";
 import { projects } from "~/lib/data";
 import Image from "next/image";
+import { CardSkeleton } from "~/components/ui/skeletons";
 
 export default function ProjectsPage() {
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    setLoading(false);
+  }, []);
+
   return (
     <div className="space-y-8">
       <section className="prose prose-zinc dark:prose-invert max-w-none">
@@ -17,7 +27,14 @@ export default function ProjectsPage() {
       </section>
 
       <div className="space-y-6">
-        {projects.map((project, index) => (
+        {loading ? (
+          <>
+            <CardSkeleton />
+            <CardSkeleton />
+            <CardSkeleton />
+          </>
+        ) : (
+          projects.map((project, index) => (
             <Card key={index}>
               <div className="flex flex-col lg:flex-row">
                 <div className="flex-1">
@@ -67,7 +84,8 @@ export default function ProjectsPage() {
                 )}
               </div>
             </Card>
-        ))}
+          ))
+        )}
       </div>
     </div>
   );

src/app/publications/page.tsx

@@ -6,6 +6,7 @@ import { useEffect, useState } from "react";
 import { Badge } from "~/components/ui/badge";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/components/ui/card";
 import { Skeleton } from "~/components/ui/skeleton";
+import { CardSkeleton } from "~/components/ui/skeletons";
 import type { Publication } from "~/lib/bibtex";
 import { parseBibtex } from "~/lib/bibtex";
 
@@ -67,15 +68,11 @@ export default function PublicationsPage() {
 
       <div className="space-y-6">
         {loading ? (
-          <Card>
-            <CardHeader className="pb-2">
-              <Skeleton className="h-6 w-1/2" />
-            </CardHeader>
-            <CardContent>
-              <Skeleton className="h-4 w-full" />
-              <Skeleton className="h-4 w-full mt-2" />
-            </CardContent>
-          </Card>
+          <>
+            <CardSkeleton />
+            <CardSkeleton />
+            <CardSkeleton />
+          </>
         ) : (
           publications.map((pub, index) => (
             <Card key={index}>

src/components/Navigation.tsx

@@ -4,7 +4,7 @@ import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { useTheme } from 'next-themes';
 import { useState, useEffect } from 'react';
-import { Home, FolderGit2, FileText, BookOpenText, Menu, X, Sun, Moon } from 'lucide-react';
+import { Home, FolderGit2, FileText, BookOpenText, Menu, X, Sun, Moon, SunMoon } from 'lucide-react';
 
 // Define the nav items without icons
 const navItems = [
@@ -25,6 +25,10 @@ export function Navigation() {
     setMounted(true);
   }, []);
 
+  // Determine the icon to show based on the theme
+  const themeIcon = theme === 'dark' ? <Sun size={20} /> : <Moon size={20} />;
+  const defaultThemeIcon =  <SunMoon size={20} />; // Default icon for server-side rendering
+
   return (
     <>
       {/* Backdrop overlay - faster fade */}
@@ -44,15 +48,14 @@ export function Navigation() {
               <span className="text-lg font-bold">Sean O'Connor</span>
             </Link>
             <div className="flex items-center space-x-4">
-              {mounted && (
+              {/* Render the theme icon as a placeholder */}
               <button
                 onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
                 className="text-sm font-medium text-muted-foreground hover:text-primary flex items-center lg:hidden"
                 aria-label="Toggle theme"
               >
-                  {theme === 'dark' ? <Sun size={20} /> : <Moon size={20} />}
+                {mounted ? themeIcon : defaultThemeIcon} {/* Use the default icon for server-side rendering */}
               </button>
-              )}
               <button
                 onClick={() => setIsOpen(!isOpen)}
                 className="text-gray-500 hover:text-primary focus:outline-none relative h-6 w-6 lg:hidden"
@@ -80,15 +83,13 @@ export function Navigation() {
                   </Link>
                 );
               })}
-              {mounted && (
               <button
                 onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
                 className="ml-4 text-sm font-medium text-muted-foreground hover:text-primary flex items-center"
                 aria-label="Toggle theme"
               >
-                  {theme === 'dark' ? <Sun size={20} /> : <Moon size={20} />}
+                {mounted ? themeIcon : defaultThemeIcon} {/* Use the default icon for server-side rendering */}
               </button>
-              )}
             </div>
           </div>
         </div>

src/components/ui/skeletons.tsx

@@ -0,0 +1,40 @@
+import { Card, CardContent, CardHeader } from "./card";
+import { Skeleton } from "./skeleton";
+
+export function CardSkeleton() {
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <Skeleton className="h-6 w-1/3" />
+          <Skeleton className="h-5 w-5 rounded-full" />
+        </div>
+        <Skeleton className="h-4 w-full mt-2" />
+      </CardHeader>
+      <CardContent>
+        <Skeleton className="h-4 w-full" />
+        <Skeleton className="h-4 w-5/6 mt-2" />
+        <div className="flex gap-2 mt-4">
+          <Skeleton className="h-5 w-16" />
+          <Skeleton className="h-5 w-16" />
+          <Skeleton className="h-5 w-16" />
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+export function AboutCardSkeleton() {
+  return (
+    <Card>
+      <CardHeader>
+        <Skeleton className="h-6 w-1/4" />
+      </CardHeader>
+      <CardContent className="space-y-2">
+        <Skeleton className="h-4 w-full" />
+        <Skeleton className="h-4 w-full" />
+        <Skeleton className="h-4 w-3/4" />
+      </CardContent>
+    </Card>
+  );
+}