fix: add suspense to tag

SidonieBouthors · Aug 17, 2024 · 7e99c63 · 7e99c63
1 parent ed4eaa1
commit 7e99c63
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 5 deletions.
diff --git a/app/share/page.tsx b/app/share/page.tsx
@@ -1,8 +1,8 @@
 import ArticleBlock from "@components/ArticleBlock";
 import { posts, Post } from "@content";
 import { Metadata } from "next";
-import TagFilteredList from "@/components/TagFilteredList";
-import { Tag } from "@components/Tag";
+import TagFilteredList from "@components/TagFilteredList";
+import Tag from "@components/Tag";
 
 export const metadata: Metadata = {
   title: "Share",

diff --git a/components/ArticleBlock.tsx b/components/ArticleBlock.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { format } from "date-fns";
 import Link from "next/link";
 import { CalendarIcon } from "./icons/CalendarIcon";
-import { Tag } from "@components/Tag";
+import Tag from "@components/Tag";
 
 interface ArticleBlockProps {
   slug: string;

diff --git a/components/Tag.tsx b/components/Tag.tsx
@@ -1,7 +1,7 @@
 "use client";
 
-import Link from "next/link";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { Suspense } from "react";
 
 interface TagProps {
   tag: string;
@@ -12,7 +12,7 @@ interface TagProps {
  * A tag component that can be used to filter content by tag.
  * If no children are provided, the tag string will be displayed.
  */
-export function Tag({ tag, children }: TagProps) {
+function SuspenseTag({ tag, children }: TagProps) {
   const searchParams = useSearchParams();
   const pathname = usePathname();
   const { replace } = useRouter();
@@ -50,3 +50,11 @@ export function Tag({ tag, children }: TagProps) {
     </button>
   );
 }
+
+export default function Tag({ tag, children }: TagProps) {
+  return (
+    <Suspense>
+      <SuspenseTag tag={tag}>{children}</SuspenseTag>
+    </Suspense>
+  );
+}