diff --git a/src/components/TradeRecommendationsCard.tsx b/src/components/TradeRecommendationsCard.tsx index 8e56aa4..373bb1b 100644 --- a/src/components/TradeRecommendationsCard.tsx +++ b/src/components/TradeRecommendationsCard.tsx @@ -48,8 +48,10 @@ export function TradeRecommendationsCard({ pubkey, className }: { pubkey: string const isSelf = user?.pubkey === pubkey; const count = recs?.length ?? 0; - // Nothing to show: no recommendations and the viewer can't add one. - if (!isLoading && count === 0 && (!user || isSelf)) return null; + // Don't flash an empty "No recommendations yet." card while the query is still + // loading (it then vanishes for a self/empty view) — render nothing until we + // know, and only show the card when there's something (or the viewer can add). + if (count === 0 && (isLoading || !user || isSelf)) return null; const handleRecommend = async () => { setBusy(true); diff --git a/src/components/TradeReputationPanel.tsx b/src/components/TradeReputationPanel.tsx index f3cefb1..f7bb677 100644 --- a/src/components/TradeReputationPanel.tsx +++ b/src/components/TradeReputationPanel.tsx @@ -3,6 +3,7 @@ import { Link } from 'react-router-dom'; import type { NostrEvent } from '@nostrify/nostrify'; import { Star, ThumbsUp, ArrowUpRight } from 'lucide-react'; import { Card, CardContent } from '@/components/ui/card'; +import { Skeleton } from '@/components/ui/skeleton'; import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'; import { TradeReputationCard } from '@/components/TradeReputationCard'; import { TradeRecommendationsCard } from '@/components/TradeRecommendationsCard'; @@ -72,6 +73,20 @@ function ReviewRow({ ev, selfPubkey }: { ev: NostrEvent; selfPubkey: string }) { ); } +/** Loading placeholder shaped like a review row. */ +function ReviewSkeleton() { + return ( +
+ +
+ + + +
+
+ ); +} + /** * Marketplace → Reputation tab: this trader's reputation, peer recommendations, * and their trade records / reviews (from kind-31871 attestations). @@ -112,7 +127,11 @@ export function TradeReputationPanel({ pubkey }: { pubkey: string }) { {isLoading ? ( -

{t('common.loading')}

+
+ + + +
) : attestations.length === 0 ? (