fixed issue with suspense boundary

1 files changed, 56 insertions, 48 deletions

diff --git a/src/app/track/page.tsx b/src/app/track/page.tsx
index 77fa81a..22d5722 100644
--- a/src/app/track/page.tsx
+++ b/src/app/track/page.tsx
@@ -1,5 +1,5 @@
 'use client';
-import { useEffect, useState } from 'react'
+import { useEffect, useState, Suspense } from 'react'
 import Search from './url'
 import Header from '../components/Header'
 
@@ -16,19 +16,7 @@ interface TrackData {
 }
 
 export default function Track() {
-    const [data, setData] = useState<TrackData | null>(null);
-    const params = Search();
-    useEffect(() => {
-            async function fetchData() {
-                if (params == null) return;
 
-                const res = await fetch(`https://haystack-khaki.vercel.app/api/pkg/${params}`);
-                const json = await res.json();
-
-                setData(json);
-            }
-            fetchData();
-        }, [params]);
     return (
         <>
             <Header title="Track" description="Tracking your packages" />
@@ -39,42 +27,62 @@ export default function Track() {
                         <button type="submit" className="px-5 py-2 bg-blue-600 hover:bg-blue-500 active:bg-blue-700 rounded-md">Track</button>
                     </div>
                 </form>
-                {params ? (
-                    data ? (
-                        <div className="pt-2">
-                            {!data.abandon && !data.delivered && (
-                              <div className="p-3 bg-indigo-800 rounded-sm my-2">Package is in transit</div>
-                            )}
-                            {data.signature && (
-                              <div className="p-3 bg-yellow-800 rounded-sm my-2">Signature is required when the package arrive</div>
-                            )}
-                            {data.abandon && (
-                              <div className="p-3 bg-red-800 rounded-sm my-2">Package has been abandoned</div>
-                            )}
-                            {data.delivered && (
-                                <div className="p-3 bg-green-800 rounded-sm my-2">Package has delivered</div>
-                            )}
-                            <div className="p-3 bg-gray-700 rounded-sm">
-                                <h1 className="text-xl">Origin: {data.sender}</h1>
-                                <h1 className="text-xl">Delivering to: {data.receiver}</h1>
-                            </div>
-                            <h1 className="text-lg my-2">Delivery progress</h1>
-                            <div className="flex flex-col gap-2">
-                            {[...data.history]
-                                    .sort((a, b) => new Date(b.time).getTime() - new Date(a.time).getTime())
-                                    .map((history, idx) => (
-                                        <div key={idx} className="p-3 bg-gray-700 rounded-sm">
-                                            <div>{history.info}</div>
-                                            <div className="text-sm">{history.location}</div>
-                                            <div>{new Date(history.time).toLocaleString()}</div>
-                                        </div>
-                                    ))}
-                            </div>
+                <Suspense fallback={<div>Loading...</div>}>
+                    <TrackContent />
+                </Suspense>
+            </div>
+        </>
+    )
+}
 
+function TrackContent() {
+    const [data, setData] = useState<TrackData | null>(null);
+    const params = Search();
+    useEffect(() => {
+        async function fetchData() {
+            if (params == null) return;
+
+            const res = await fetch(`https://haystack-khaki.vercel.app/api/pkg/${params}`);
+            const json = await res.json();
+
+            setData(json);
+        }
+        fetchData();
+    }, [params]);
+    if (!params) return null;
+    if (!data) return <div>Loading...</div>;
+    return (
+        <div className="pt-2">
+            {!data.abandon && !data.delivered && (
+                <div className="p-3 bg-indigo-800 rounded-sm my-2">Package is in transit</div>
+            )}
+            {data.signature && (
+                <div className="p-3 bg-yellow-800 rounded-sm my-2">Signature is required when the package arrive</div>
+            )}
+            {data.abandon && (
+                <div className="p-3 bg-red-800 rounded-sm my-2">Package has been abandoned</div>
+            )}
+            {data.delivered && (
+                <div className="p-3 bg-green-800 rounded-sm my-2">Package has delivered</div>
+            )}
+            <div className="p-3 bg-gray-700 rounded-sm">
+                <h1 className="text-xl">Origin: {data.sender}</h1>
+                <h1 className="text-xl">Delivering to: {data.receiver}</h1>
+            </div>
+            <h1 className="text-lg my-2">Delivery progress</h1>
+            <div className="flex flex-col gap-2">
+                {[...data.history]
+                    .sort((a, b) => new Date(b.time).getTime() - new Date(a.time).getTime())
+                    .map((history, idx) => (
+                        <div key={idx} className="p-3 bg-gray-700 rounded-sm">
+                            <div>{history.info}</div>
+                            <div className="text-sm">{history.location}</div>
+                            <div>{new Date(history.time).toLocaleString()}</div>
                         </div>
-                    ) : "Loading..."
-                ) : null}
+                    ))}
             </div>
-        </>
+
+        </div>
+
     )
-}
\ No newline at end of file
+}