From 86c9f6f85624cb5aff78674a69edfa0ce6d0aa6a Mon Sep 17 00:00:00 2001
From: SkateSpots <skatespots>
Date: Sat, 3 Oct 2026 10:34:25 +0700
Subject: [PATCH] fix(reputation): skeleton loading + no empty-card flash
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The marketplace Reputation tab showed a bare 'Loading...' text under
'Reviews & trade records', and TradeRecommendationsCard rendered its
'No recommendations yet.' card while still loading (then it vanished for a
self/empty view) — together they read as broken.

- Reviews/trade-records now render row-shaped skeletons while loading.
- TradeRecommendationsCard renders nothing while its query is loading when the
  count is 0 (and only shows for a non-self viewer who can add one).
---
 src/components/TradeRecommendationsCard.tsx |  6 ++++--
 src/components/TradeReputationPanel.tsx     | 21 ++++++++++++++++++++-
 2 files changed, 24 insertions(+), 3 deletions(-)

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 (
+    <div className="flex items-start gap-3 rounded-xl border border-white/8 bg-white/[0.03] p-3">
+      <Skeleton className="h-9 w-9 shrink-0 rounded-full" />
+      <div className="min-w-0 flex-1 space-y-2">
+        <Skeleton className="h-3.5 w-40" />
+        <Skeleton className="h-3 w-full" />
+        <Skeleton className="h-3 w-24" />
+      </div>
+    </div>
+  );
+}
+
 /**
  * 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 }) {
         </h3>
 
         {isLoading ? (
-          <p className="text-sm text-gray-500">{t('common.loading')}</p>
+          <div className="space-y-2">
+            <ReviewSkeleton />
+            <ReviewSkeleton />
+            <ReviewSkeleton />
+          </div>
         ) : attestations.length === 0 ? (
           <Card className="border-dashed border-white/10">
             <CardContent className="py-10 text-center">