JezzWTF/phokus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(onboarding): play animations once with replay, fix search demo results

Browse Source 
Two refinements from testing:
- the gallery-reveal, pipeline-drain, and search-typing animations looped
  forever; they now play once and stop, with a Replay button to re-run
- the search demo's result tiles didn't match the queries. Now: a filename
  search returns one exact file, '/s golden sunset over water' shows only
  ocean-sunset stills (added a second), and '/t landscape' shows the three
  actual landscapes (valleys + alpine lake), not a foggy forest
This commit is contained in:
LyAhn
2026-06-13 09:19:38 +01:00
parent f8e981c6f6
commit 09810cb868
5 changed files with 121 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/onboarding/StepPipeline.tsx
+45 -29
View File
@@ -1,29 +1,40 @@
import { useEffect, useState } from "react";
import { FakeProgressBar, FakeStageTag } from "./fakes";
import { FakeProgressBar, FakeStageTag, ReplayButton } from "./fakes";
const STAGES = ["Thumbnails", "Metadata", "Embeddings", "Tags"] as const;
const STAGE_TOTAL = 128;
const TICK_MS = 90;
const STEP_PER_TICK = 6;
const TICK_MS = 80;
const STEP_PER_TICK = 8;
/// A looping, entirely fake render of the background-tasks bar: each stage
/// drains in order, then the cycle restarts.
/// A one-shot fake of the background-tasks bar: each stage drains in order,
/// then it stops at "all done" with a replay control.
export function StepPipeline() {
const [stageIndex, setStageIndex] = useState(0);
const [done, setDone] = useState(0);
const [filled, setFilled] = useState(0);
const finished = stageIndex >= STAGES.length;
useEffect(() => {
const timer = setInterval(() => {
setDone((current) => {
if (current + STEP_PER_TICK < STAGE_TOTAL) return current + STEP_PER_TICK;
setStageIndex((stage) => (stage + 1) % STAGES.length);
return 0;
});
if (finished) return;
const timer = setTimeout(() => {
// Read from the closure and call setters directly — nesting one setter
// inside another's updater double-advances under React StrictMode.
if (filled + STEP_PER_TICK < STAGE_TOTAL) {
setFilled(filled + STEP_PER_TICK);
} else {
setStageIndex(stageIndex + 1);
setFilled(0);
}
}, TICK_MS);
return () => clearInterval(timer);
}, []);
return () => clearTimeout(timer);
}, [filled, stageIndex, finished]);
const remaining = STAGE_TOTAL - done;
const replay = () => {
setStageIndex(0);
setFilled(0);
};
const remaining = STAGE_TOTAL - filled;
return (
<div>
@@ -41,32 +52,37 @@ export function StepPipeline() {
<div className="mt-3 rounded-lg border border-white/[0.07] bg-white/[0.02] px-4 py-3">
<div className="flex items-center gap-3">
<span className="relative flex h-1.5 w-1.5 shrink-0">
<span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-blue-400 opacity-60" />
<span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-blue-400" />
{!finished ? (
<span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-blue-400 opacity-60" />
) : null}
<span className={`relative inline-flex h-1.5 w-1.5 rounded-full ${finished ? "bg-emerald-400" : "bg-blue-400"}`} />
</span>
<span className="text-[13px] font-medium text-white/60">Holiday Photos</span>
<div className="flex items-center gap-1.5">
{STAGES.map((stage, i) => (
<FakeStageTag
key={stage}
label={i === stageIndex ? `${stage} · ${remaining}` : stage}
state={i < stageIndex ? "done" : i === stageIndex ? "active" : "waiting"}
label={!finished && i === stageIndex ? `${stage} · ${remaining}` : stage}
state={finished || i < stageIndex ? "done" : i === stageIndex ? "active" : "waiting"}
/>
))}
</div>
<FakeProgressBar fraction={done / STAGE_TOTAL} className="ml-auto w-24" />
<FakeProgressBar fraction={finished ? 1 : filled / STAGE_TOTAL} className="ml-auto w-24" />
</div>
</div>
<div className="mt-6 divide-y divide-white/[0.05] text-xs leading-relaxed text-gray-500">
<p className="py-2.5">
<span className="text-gray-300">It's all interruptible.</span> Close the app whenever you like —
the queue picks up where it left off next launch.
</p>
<p className="py-2.5">
<span className="text-gray-300">Per-folder control.</span> Right-click a folder in the sidebar to
pause its background work, and click the bar itself to expand a detailed per-folder view.
</p>
<div className="mt-6 flex items-start justify-between gap-4">
<div className="divide-y divide-white/[0.05] text-xs leading-relaxed text-gray-500">
<p className="pb-2.5">
<span className="text-gray-300">It's all interruptible.</span> Close the app whenever you like —
the queue picks up where it left off next launch.
</p>
<p className="pt-2.5">
<span className="text-gray-300">Per-folder control.</span> Right-click a folder in the sidebar to
pause its background work, and click the bar itself to expand a detailed per-folder view.
</p>
</div>
{finished ? <ReplayButton onClick={replay} /> : null}
</div>
</div>
);