From 7db602274914bfe35c0925f6abbb85d7095d7363 Mon Sep 17 00:00:00 2001
From: Guus van Meerveld <mail@guusvanmeerveld.dev>
Date: Sun, 24 Mar 2024 16:23:32 +0100
Subject: [PATCH] nav: fix suspense not having fallback

---
 src/app/elements.tsx             | 10 +++++++---
 src/components/{ => Nav}/Nav.tsx | 10 ++--------
 src/components/Nav/NavClient.tsx | 12 ++++++++++++
 3 files changed, 21 insertions(+), 11 deletions(-)
 rename src/components/{ => Nav}/Nav.tsx (87%)
 create mode 100644 src/components/Nav/NavClient.tsx

diff --git a/src/app/elements.tsx b/src/app/elements.tsx
index 8b6beb0..6c5e012 100644
--- a/src/app/elements.tsx
+++ b/src/app/elements.tsx
@@ -1,13 +1,17 @@
-"use client";
+import { Suspense } from "react";
 
-import { Nav } from "@/components/Nav";
+import { Nav } from "@/components/Nav/Nav";
+import { NavClient } from "@/components/Nav/NavClient";
 
 import { Component } from "@/typings/component";
 
 export const Elements: Component = ({ children }) => {
 	return (
 		<>
-			<Nav />
+			<Suspense fallback={<Nav pathname="" />}>
+				<NavClient />
+			</Suspense>
+
 			{children}
 		</>
 	);
diff --git a/src/components/Nav.tsx b/src/components/Nav/Nav.tsx
similarity index 87%
rename from src/components/Nav.tsx
rename to src/components/Nav/Nav.tsx
index 442bfd6..22bbf19 100644
--- a/src/components/Nav.tsx
+++ b/src/components/Nav/Nav.tsx
@@ -1,7 +1,5 @@
-"use client";
-
 import NextLink from "next/link";
-import { usePathname } from "next/navigation";
+import { FC } from "react";
 
 import { Button } from "@nextui-org/button";
 import { Link } from "@nextui-org/link";
@@ -12,13 +10,11 @@ import {
 	NavbarItem
 } from "@nextui-org/navbar";
 
-import { Component } from "@/typings/component";
-
 // import { Search } from "./Search";
 
 export const navHeight = 64;
 
-export const Nav: Component = () => {
+export const Nav: FC<{ pathname: string }> = ({ pathname }) => {
 	const navItems = [
 		{
 			title: "Trending",
@@ -34,8 +30,6 @@ export const Nav: Component = () => {
 		}
 	];
 
-	const pathname = usePathname();
-
 	return (
 		<Navbar>
 			<NavbarBrand>
diff --git a/src/components/Nav/NavClient.tsx b/src/components/Nav/NavClient.tsx
new file mode 100644
index 0000000..3b034dd
--- /dev/null
+++ b/src/components/Nav/NavClient.tsx
@@ -0,0 +1,12 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+import { FC } from "react";
+
+import { Nav } from "./Nav";
+
+export const NavClient: FC = () => {
+	const pathname = usePathname();
+
+	return <Nav pathname={pathname} />;
+};