TimoUttenweiler/lead-scraper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Indeterminate Progress-Anzeige bei Anymailfinder Bulk-Warten

Browse Source 
- Wenn current=0 und total>0: Shimmer-Animation statt leerer Balken
- Bouncing Dots + "Warte auf Anymailfinder-Server..." Text
- Hinweis "dauert ca. 1–3 Min. für X Domains"

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Timo Uttenweiler
2026-03-20 17:44:53 +01:00
parent 8fb881cbbc
commit 8dc135a8f7
2 changed files with 46 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
components/shared/ProgressCard.tsx
View File

@@ -12,6 +12,8 @@ interface ProgressCardProps {
export function ProgressCard({ title, current, total, subtitle, status = "running" }: ProgressCardProps) {
const pct = total > 0 ? Math.round((current / total) * 100) : 0;
// Indeterminate = läuft aber noch kein Fortschritt (z.B. warten auf Anymailfinder Bulk)
const indeterminate = status === "running" && current === 0 && total > 0;
return (
<div className="bg-[#111118] border border-[#1e1e2e] rounded-xl p-5 space-y-4">
@@ -25,22 +27,47 @@ export function ProgressCard({ title, current, total, subtitle, status = "runnin
<div className="space-y-2">
<div className="flex justify-between text-xs text-gray-400">
<span>{current.toLocaleString()} / {total.toLocaleString()}</span>
<span>{pct}%</span>
{indeterminate ? (
<>
<span className="flex items-center gap-1.5">
<span className="inline-block w-1.5 h-1.5 rounded-full bg-blue-400 animate-bounce" style={{ animationDelay: "0ms" }} />
<span className="inline-block w-1.5 h-1.5 rounded-full bg-blue-400 animate-bounce" style={{ animationDelay: "150ms" }} />
<span className="inline-block w-1.5 h-1.5 rounded-full bg-blue-400 animate-bounce" style={{ animationDelay: "300ms" }} />
<span className="text-blue-300 ml-1">Warte auf Anymailfinder-Server...</span>
</span>
<span className="text-gray-600">{total} Domains</span>
</>
) : (
<>
<span>{current.toLocaleString()} / {total.toLocaleString()}</span>
<span>{pct}%</span>
</>
)}
</div>
<div className="h-2 bg-[#1e1e2e] rounded-full overflow-hidden">
<div
className={cn(
"h-full rounded-full transition-all duration-500",
status === "failed"
? "bg-red-500"
: status === "complete"
? "bg-green-500"
: "bg-gradient-to-r from-blue-500 to-purple-600 animate-pulse"
)}
style={{ width: `${pct}%` }}
/>
<div className="h-2 bg-[#1e1e2e] rounded-full overflow-hidden relative">
{indeterminate ? (
<div className="absolute inset-0 overflow-hidden rounded-full">
<div className="h-full w-1/3 bg-gradient-to-r from-transparent via-blue-500 to-transparent animate-[shimmer_1.5s_ease-in-out_infinite] rounded-full" />
</div>
) : (
<div
className={cn(
"h-full rounded-full transition-all duration-500",
status === "failed"
? "bg-red-500"
: status === "complete"
? "bg-green-500"
: "bg-gradient-to-r from-blue-500 to-purple-600"
)}
style={{ width: `${Math.max(pct, status === "running" ? 2 : 0)}%` }}
/>
)}
</div>
{indeterminate && (
<p className="text-[11px] text-gray-600">
Batch-Verarbeitung läuft auf Anymailfinder-Servern. Dauert ca. 1–3 Min. für {total} Domains.
</p>
)}
</div>
</div>
);