add Skeleton loading

Zaid-maker · Jan 18, 2024 · 30caa00 · 30caa00
1 parent ebcee8c
commit 30caa00
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 4 deletions.
diff --git a/app/(browse)/search/_components/results.tsx b/app/(browse)/search/_components/results.tsx
@@ -1,6 +1,7 @@
 import { getSearch } from "@/lib/search-service";
 import React from "react";
-import { ResultsCard } from "./results-card";
+import { ResultCardSkeleton, ResultsCard } from "./results-card";
+import { Skeleton } from "@/components/ui/skeleton";
 
 interface ResultsProps {
   term?: string;
@@ -27,3 +28,16 @@ export const Results = async ({ term }: ResultsProps) => {
     </div>
   );
 };
+
+export const ResultsSkeleton = () => {
+  return (
+    <div>
+      <Skeleton className="h-8 w-[290px] mb-4" />
+      <div className="flex flex-col gap-y-4">
+        {[...Array(4)].map((_, i) => (
+          <ResultCardSkeleton key={i} />
+        ))}
+      </div>
+    </div>
+  );
+};
diff --git a/app/(browse)/search/page.tsx b/app/(browse)/search/page.tsx
@@ -1,6 +1,6 @@
 import { redirect } from "next/navigation";
-import React from "react";
-import { Results } from "./_components/results";
+import React, { Suspense } from "react";
+import { Results, ResultsSkeleton } from "./_components/results";
 
 interface SearchPageProps {
   searchParams: {
@@ -15,7 +15,9 @@ const SearchPage = ({ searchParams }: SearchPageProps) => {
 
   return (
     <div className="h-full p-8 max-w-screen-2xl mx-auto">
-      <Results term={searchParams.term} />
+      <Suspense fallback={<ResultsSkeleton />}>
+        <Results term={searchParams.term} />
+      </Suspense>
     </div>
   );
 };