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 ( +
{t('common.loading')}
+