fix: layout shifting,add skeleton card when loading (#1455)

Co-authored-by: shaikzeeshan <shaikzeeshan999@gmail.com undefined>
mediar-ai · Feb 21, 2025 · f10cc92 · f10cc92
1 parent 6f3f832
commit f10cc92
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 19 deletions.
diff --git a/pipes/rewind/src/app/search/page.tsx b/pipes/rewind/src/app/search/page.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { DatePickerWithRange } from "@/components/date-range-picker";
-import { ImageGrid, MainImage } from "@/components/image-card";
+import { ImageGrid, MainImage, SkeletonCard } from "@/components/image-card";
 import { SearchBar } from "@/components/search-bar";
 import { Button } from "@/components/ui/button";
 import { useDebounce } from "@/lib/hooks/use-debounce";
@@ -122,7 +122,21 @@ export default function Page() {
 				</div>
 			)}
 
-			{querys.query ? (
+			{!isSearching && searchResults.length === 0 && querys.query ? (
+				<div className="h-64 w-96 flex mx-auto items-center justify-center whitespace-nowrap">
+					<p className="text-sm text-gray-500">
+						No results found for "{querys.query}"
+					</p>
+				</div>
+			) : null}
+
+			{isSearching &&
+				searchResults.length === 0 &&
+				Array.from({ length: 6 }).map((_, index) => (
+					<SkeletonCard key={`skeleton-${index}`} />
+				))}
+
+			{querys.query && !(searchResults.length === 0) ? (
 				<div className="h-64 flex items-end">
 					<ImageGrid searchResult={searchResults} pageRef={pageRef} />
 				</div>

diff --git a/pipes/rewind/src/components/current-frame.tsx b/pipes/rewind/src/components/current-frame.tsx
@@ -19,7 +19,7 @@ export const CurrentFrame = () => {
 	return (
 		<div
 			className={cn(
-				"grid  md:gap-4 gap-y-4 w-4/5 mx-auto h-auto max-h-[60vh] max-w-[50vw] overflow-hidden",
+				"grid  md:gap-4 gap-y-4 w-4/5 mx-auto min-h-[40%] max-h-[50%] max-w-[55vw] overflow-hidden",
 			)}
 		>
 			<div className={cn("relative group w-full")}>

diff --git a/pipes/rewind/src/components/image-card.tsx b/pipes/rewind/src/components/image-card.tsx
@@ -7,6 +7,17 @@ import { throttle } from "lodash";
 import { Loader2 } from "lucide-react";
 import { useKeywordParams } from "@/lib/hooks/use-keyword-params";
 
+export const SkeletonCard = () => (
+	<div className="flex flex-col shrink-0 w-56 h-full relative overflow-hidden rounded-lg bg-white shadow-sm">
+		<div className="aspect-video bg-neutral-200 animate-pulse" />
+		<div className="p-3 space-y-2">
+			<div className="h-4 bg-neutral-200 rounded animate-pulse" />
+			<div className="h-3 bg-neutral-200 rounded animate-pulse w-3/4" />
+			<div className="h-3 bg-neutral-200 rounded animate-pulse w-1/2" />
+		</div>
+	</div>
+);
+
 export const ImageGrid = ({
 	searchResult,
 	pageRef,
@@ -200,22 +211,6 @@ export const ImageGrid = ({
 						))}
 					</div>
 				</div>
-				{isSearching ? (
-					<div className="h-64 w-96 mx-auto flex items-center justify-center">
-						<div className="flex flex-col items-center gap-2">
-							<Loader2 className="h-8 w-8 animate-spin text-gray-500" />
-							<p className="text-sm text-gray-500">
-								Searching through your history...
-							</p>
-						</div>
-					</div>
-				) : searchResults.length === 0 && query ? (
-					<div className="h-64 w-96 flex mx-auto items-center justify-center">
-						<p className="text-sm text-gray-500">
-							No results found for "{query}"
-						</p>
-					</div>
-				) : null}
 			</div>
 		</div>
 	);