diff --git a/__tests__/components/home/explore-waves/ExploreWaveCard.test.tsx b/__tests__/components/home/explore-waves/ExploreWaveCard.test.tsx index 49bde4f956..2e414879ad 100644 --- a/__tests__/components/home/explore-waves/ExploreWaveCard.test.tsx +++ b/__tests__/components/home/explore-waves/ExploreWaveCard.test.tsx @@ -83,6 +83,9 @@ describe("ExploreWaveCard", () => { expect(lastContentDisplayProps).toMatchObject({ linkify: false, + shouldClamp: false, + className: expect.stringContaining("tw-items-start"), + textClassName: expect.stringContaining("tw-line-clamp-2"), content: { segments: [{ type: "text", content: "Description preview" }], apiMedia: [], diff --git a/components/home/explore-waves/ExploreWaveCard.tsx b/components/home/explore-waves/ExploreWaveCard.tsx index b25912d1a9..d895ba40fa 100644 --- a/components/home/explore-waves/ExploreWaveCard.tsx +++ b/components/home/explore-waves/ExploreWaveCard.tsx @@ -11,7 +11,6 @@ import { getScaledImageUri, ImageScale } from "@/helpers/image.helpers"; import { getWaveRoute } from "@/helpers/navigation.helpers"; import Image from "next/image"; import Link from "next/link"; -import { ChatBubbleBottomCenterIcon } from "@heroicons/react/24/outline"; interface ExploreWaveCardProps { readonly wave: ApiWave; @@ -48,7 +47,7 @@ export function ExploreWaveCard({ wave }: ExploreWaveCardProps) { >
{wave.picture && ( @@ -67,9 +66,16 @@ export function ExploreWaveCard({ wave }: ExploreWaveCardProps) { {wave.name} + {descriptionPreview && ( + + )} + {hasDrops && ( -
- +
+ + + + {getTimeAgoShort(lastMessageTime)} ยท{" "} {wave.metrics.drops_count.toLocaleString()} @@ -79,22 +85,10 @@ export function ExploreWaveCard({ wave }: ExploreWaveCardProps) { )} {!hasDrops && ( -
+
No drops yet
)} - - {descriptionPreview && ( -
-
-
- -
- )}
); @@ -113,8 +107,8 @@ function MessagePreviewContent({ ); diff --git a/components/home/explore-waves/ExploreWaveCardSkeleton.tsx b/components/home/explore-waves/ExploreWaveCardSkeleton.tsx index 22f13918d0..bf98e6f188 100644 --- a/components/home/explore-waves/ExploreWaveCardSkeleton.tsx +++ b/components/home/explore-waves/ExploreWaveCardSkeleton.tsx @@ -4,21 +4,21 @@ export function ExploreWaveCardSkeleton() { return (
{/* Image Skeleton */} -
+
{/* Content Skeleton */}
{/* Wave Name Skeleton */}
- {/* Metadata Skeleton */} -
- {/* Message Preview Skeleton */} -
-
-
+
+
+
+ + {/* Metadata Skeleton */} +
); diff --git a/components/home/explore-waves/ExploreWavesSection.tsx b/components/home/explore-waves/ExploreWavesSection.tsx index 6b29d9275a..87d92b6f8d 100644 --- a/components/home/explore-waves/ExploreWavesSection.tsx +++ b/components/home/explore-waves/ExploreWavesSection.tsx @@ -82,7 +82,7 @@ export function ExploreWavesSection({
-
+
{isLoading ? Array.from({ length: limit }).map((_, index) => (