Skip to content

Commit 46de495

Browse files
DevanshuNEUDevanshuNEU
committed
fix: remove empty results card - only show when loading/results exist
1 parent 020699a commit 46de495

1 file changed

Lines changed: 97 additions & 104 deletions

File tree

‎frontend/src/components/landing/Hero.tsx‎

Lines changed: 97 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -133,115 +133,108 @@ export function Hero({ onResultsReady }: Props) {
133133
))}
134134
</motion.div>
135135

136-
{/* Result card with mouse-following glow */}
137-
<motion.div
138-
className="mt-8"
139-
initial={{ opacity: 0, y: 20 }}
140-
animate={{ opacity: 1, y: 0 }}
141-
transition={{ duration: 0.5, delay: 0.3 }}
142-
>
143-
<div
144-
ref={cardRef}
145-
onMouseMove={handleMouseMove}
146-
className="relative group"
147-
>
148-
{/* Mouse glow effect */}
149-
<div
150-
className="absolute -inset-px rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"
151-
style={{
152-
background: `radial-gradient(400px circle at ${mousePos.x}px ${mousePos.y}px, rgba(59,130,246,0.15), transparent 40%)`
153-
}}
154-
/>
155-
156-
{/* Card */}
157-
<div className="relative rounded-xl border border-white/[0.08] bg-zinc-900/50 backdrop-blur-sm overflow-hidden">
158-
<AnimatePresence mode="wait">
159-
{loading ? (
160-
<motion.div
161-
key="loading"
162-
initial={{ opacity: 0 }}
163-
animate={{ opacity: 1 }}
164-
exit={{ opacity: 0 }}
165-
className="p-6"
166-
>
167-
<div className="flex items-center gap-3 mb-4">
168-
<Loader2 className="w-4 h-4 animate-spin text-blue-400" />
169-
<span className="text-sm text-zinc-500">Searching {repo.name}...</span>
170-
</div>
171-
<div className="space-y-3 animate-pulse">
172-
<div className="h-5 w-48 bg-white/5 rounded" />
173-
<div className="h-3 w-32 bg-white/5 rounded" />
174-
<div className="h-24 bg-white/[0.02] rounded-lg mt-3" />
175-
</div>
176-
</motion.div>
177-
) : topResult ? (
178-
<motion.div
179-
key="result"
180-
initial={{ opacity: 0 }}
181-
animate={{ opacity: 1 }}
182-
exit={{ opacity: 0 }}
183-
>
184-
{/* Header */}
185-
<div className="px-5 py-3 border-b border-white/[0.06] flex items-center justify-between bg-white/[0.02]">
186-
<div className="flex items-center gap-3">
187-
<div className="flex items-center gap-2">
188-
<div className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse" />
189-
<span className="text-xs text-zinc-500">Found in {searchTime}ms</span>
136+
{/* Result card - only shows when loading or has results */}
137+
<AnimatePresence>
138+
{(loading || topResult) && (
139+
<motion.div
140+
className="mt-8"
141+
initial={{ opacity: 0, y: 20, height: 0 }}
142+
animate={{ opacity: 1, y: 0, height: 'auto' }}
143+
exit={{ opacity: 0, y: -10, height: 0 }}
144+
transition={{ duration: 0.3 }}
145+
>
146+
<div
147+
ref={cardRef}
148+
onMouseMove={handleMouseMove}
149+
className="relative group"
150+
>
151+
{/* Mouse glow effect */}
152+
<div
153+
className="absolute -inset-px rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"
154+
style={{
155+
background: `radial-gradient(400px circle at ${mousePos.x}px ${mousePos.y}px, rgba(59,130,246,0.15), transparent 40%)`
156+
}}
157+
/>
158+
159+
{/* Card */}
160+
<div className="relative rounded-xl border border-white/[0.08] bg-zinc-900/50 backdrop-blur-sm overflow-hidden">
161+
<AnimatePresence mode="wait">
162+
{loading ? (
163+
<motion.div
164+
key="loading"
165+
initial={{ opacity: 0 }}
166+
animate={{ opacity: 1 }}
167+
exit={{ opacity: 0 }}
168+
className="p-6"
169+
>
170+
<div className="flex items-center gap-3 mb-4">
171+
<Loader2 className="w-4 h-4 animate-spin text-blue-400" />
172+
<span className="text-sm text-zinc-500">Searching {repo.name}...</span>
190173
</div>
191-
<span className="text-xs px-2 py-0.5 rounded-full bg-emerald-500/10 text-emerald-400 font-medium">
192-
{Math.round(topResult.score * 100)}% match
193-
</span>
194-
</div>
195-
<span className="text-xs text-zinc-600">{repo.name}</span>
196-
</div>
197-
198-
{/* Content */}
199-
<div className="p-5">
200-
<div className="flex items-start gap-3 mb-4">
201-
<div className="flex-1">
202-
<div className="flex items-center gap-2">
203-
<span className="font-mono text-sm font-semibold text-white">{topResult.name}</span>
204-
<span className="text-[10px] px-1.5 py-0.5 rounded bg-violet-500/10 text-violet-400 uppercase font-medium">
205-
{topResult.type}
174+
<div className="space-y-3 animate-pulse">
175+
<div className="h-5 w-48 bg-white/5 rounded" />
176+
<div className="h-3 w-32 bg-white/5 rounded" />
177+
<div className="h-24 bg-white/[0.02] rounded-lg mt-3" />
178+
</div>
179+
</motion.div>
180+
) : topResult ? (
181+
<motion.div
182+
key="result"
183+
initial={{ opacity: 0 }}
184+
animate={{ opacity: 1 }}
185+
exit={{ opacity: 0 }}
186+
>
187+
{/* Header */}
188+
<div className="px-5 py-3 border-b border-white/[0.06] flex items-center justify-between bg-white/[0.02]">
189+
<div className="flex items-center gap-3">
190+
<div className="flex items-center gap-2">
191+
<div className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse" />
192+
<span className="text-xs text-zinc-500">Found in {searchTime}ms</span>
193+
</div>
194+
<span className="text-xs px-2 py-0.5 rounded-full bg-emerald-500/10 text-emerald-400 font-medium">
195+
{Math.round(topResult.score * 100)}% match
206196
</span>
207197
</div>
208-
<div className="text-xs text-zinc-600 font-mono mt-1">{topResult.file_path}</div>
198+
<span className="text-xs text-zinc-600">{repo.name}</span>
199+
</div>
200+
201+
{/* Content */}
202+
<div className="p-5">
203+
<div className="flex items-start gap-3 mb-4">
204+
<div className="flex-1">
205+
<div className="flex items-center gap-2">
206+
<span className="font-mono text-sm font-semibold text-white">{topResult.name}</span>
207+
<span className="text-[10px] px-1.5 py-0.5 rounded bg-violet-500/10 text-violet-400 uppercase font-medium">
208+
{topResult.type}
209+
</span>
210+
</div>
211+
<div className="text-xs text-zinc-600 font-mono mt-1">{topResult.file_path}</div>
212+
</div>
213+
</div>
214+
215+
{/* Code preview */}
216+
<div className="relative rounded-lg overflow-hidden">
217+
<div className="absolute inset-0 bg-gradient-to-br from-blue-500/5 to-violet-500/5" />
218+
<pre className="relative text-xs text-zinc-300 bg-black/40 p-4 overflow-x-auto font-mono leading-relaxed">
219+
<code>{topResult.content?.slice(0, 250)}...</code>
220+
</pre>
221+
</div>
209222
</div>
210-
</div>
211-
212-
{/* Code preview */}
213-
<div className="relative rounded-lg overflow-hidden">
214-
<div className="absolute inset-0 bg-gradient-to-br from-blue-500/5 to-violet-500/5" />
215-
<pre className="relative text-xs text-zinc-300 bg-black/40 p-4 overflow-x-auto font-mono leading-relaxed">
216-
<code>{topResult.content?.slice(0, 250)}...</code>
217-
</pre>
218-
</div>
219-
</div>
220223

221-
{/* Footer */}
222-
{results.length > 1 && (
223-
<div className="px-5 py-3 border-t border-white/[0.06] bg-white/[0.01]">
224-
<span className="text-xs text-zinc-600">+{results.length - 1} more results</span>
225-
</div>
226-
)}
227-
</motion.div>
228-
) : (
229-
<motion.div
230-
key="empty"
231-
initial={{ opacity: 0 }}
232-
animate={{ opacity: 1 }}
233-
className="p-10 text-center"
234-
>
235-
<div className="w-12 h-12 rounded-full bg-white/5 flex items-center justify-center mx-auto mb-3">
236-
<Search className="w-5 h-5 text-zinc-600" />
237-
</div>
238-
<p className="text-sm text-zinc-500">Search to see results</p>
239-
</motion.div>
240-
)}
241-
</AnimatePresence>
242-
</div>
243-
</div>
244-
</motion.div>
224+
{/* Footer */}
225+
{results.length > 1 && (
226+
<div className="px-5 py-3 border-t border-white/[0.06] bg-white/[0.01]">
227+
<span className="text-xs text-zinc-600">+{results.length - 1} more results</span>
228+
</div>
229+
)}
230+
</motion.div>
231+
) : null}
232+
</AnimatePresence>
233+
</div>
234+
</div>
235+
</motion.div>
236+
)}
237+
</AnimatePresence>
245238

246239
{/* CTA */}
247240
<motion.div

0 commit comments

Comments
 (0)