File size: 2,849 Bytes
b5442b0 f0f5bef b5442b0 6d6ee02 b5442b0 f0f5bef b5442b0 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 | // Animated progress for a photo search. The search is a single server call (embed -> search -> rank
// all happen server-side in ~1s), so this walks through the real stages on a short timer with an
// indeterminate bar, and surfaces how many dogs the photo is being compared against.
import { useEffect, useState } from "react";
// Minimum time the progress panel stays up, so the staged steps play out at a readable pace even
// when the search itself returns in a fraction of a second. The callers await this before showing
// results.
export const MIN_PROGRESS_MS = 1600;
export default function SearchProgress({
mode = "match",
count,
}: {
mode?: "match" | "breed";
count?: number;
}) {
const dogs = count && count > 0 ? count.toLocaleString() : null;
const steps =
mode === "breed"
? ["Reading the image", "Classifying across 120 breeds", "Ranking the closest look-alikes"]
: [
"Extracting features",
dogs ? `Searching ${dogs} dogs` : "Searching the database",
"Ranking the closest matches",
];
const subtitle =
mode === "breed"
? "Classifying against 120 known breeds"
: dogs
? `Comparing against ${dogs} found & unclaimed dogs`
: null;
const [step, setStep] = useState(0);
useEffect(() => {
const id = setInterval(() => setStep((s) => Math.min(s + 1, steps.length - 1)), 600);
return () => clearInterval(id);
}, [steps.length]);
const pct = [34, 68, 95][step];
return (
<div className="card" role="status" aria-live="polite">
<div className="flex items-center gap-3">
<span
className="h-5 w-5 shrink-0 rounded-full border-2 border-leaf-200 border-t-leaf-600 animate-spin motion-reduce:animate-none"
aria-hidden
/>
<div className="min-w-0 flex-1">
<p className="font-semibold text-sm">{steps[step]}…</p>
{subtitle && <p className="text-xs text-gray-500">{subtitle}</p>}
</div>
</div>
<div className="mt-3 h-2 rounded-full bg-gray-100 overflow-hidden">
<div
className="h-full rounded-full bg-leaf-500 transition-all duration-500 ease-out"
style={{ width: `${pct}%` }}
/>
</div>
<ol className="mt-3 grid gap-1">
{steps.map((s, i) => (
<li
key={s}
className={`flex items-center gap-2 text-xs ${
i < step ? "text-leaf-700" : i === step ? "text-leaf-700 font-medium" : "text-gray-400"
}`}
>
<span
aria-hidden
className={`h-2 w-2 shrink-0 rounded-full border ${
i <= step ? "bg-leaf-500 border-leaf-500" : "bg-transparent border-gray-300"
}`}
/>
{s}
</li>
))}
</ol>
</div>
);
}
|