Suspense boundary for useSearchParams

ASPP · Aug 9, 2024 · dcf2362 · dcf2362
1 parent 3e0f9f6
commit dcf2362
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 8 deletions.
diff --git a/app/civiewer.tsx b/app/civiewer.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useSearchParams } from 'next/navigation'
+import { useSearchParams } from 'next/navigation';
 import { useEffect, useState } from "react";
 
 
@@ -45,7 +45,7 @@ export default function CIViewer() {
 
   useEffect(() => {
     if (!jsonPage) return;
-    
+
     fetch(jsonPage)
       .then(response => response.json())
       .then(setData);
@@ -54,8 +54,6 @@ export default function CIViewer() {
   if (!jsonPage) return (<p>No data</p>);
 
   return (
-    <>
-      <CITable data={data}></CITable>
-    </>
+    <CITable data={data}></CITable>
   );
 }
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,12 +1,13 @@
-import Image from "next/image";
-import CITable from "./civiewer";
 import CIViewer from "./civiewer";
+import { Suspense } from 'react';
 
 export default function Home() {
   return (
     <main className="flex min-h-screen flex-col items-center justify-between p-24">
       <div className="z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex">
-        <CIViewer></CIViewer>
+        <Suspense>
+          <CIViewer></CIViewer>
+        </Suspense>
       </div>
     </main>
   );