refactor(onboarding): play animations once with replay, fix search demo results
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:
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
@@ -1,8 +1,7 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { FakeTile } from "./fakes";
|
||||
import { FakeTile, ReplayButton } from "./fakes";
|
||||
|
||||
const TILE_COUNT = 12;
|
||||
const REVEAL_MS = 350;
|
||||
const REVEAL_MS = 280;
|
||||
|
||||
const TILE_PROPS: { favorite?: boolean; rating?: number; duration?: string }[] = [
|
||||
{},
|
||||
@@ -19,17 +18,20 @@ const TILE_PROPS: { favorite?: boolean; rating?: number; duration?: string }[] =
|
||||
{},
|
||||
];
|
||||
|
||||
/// Placeholder tiles "loading in" one by one, looping, to show how the grid
|
||||
/// fills while thumbnails are generated.
|
||||
const TILE_COUNT = TILE_PROPS.length;
|
||||
|
||||
/// Placeholder tiles "loading in" once (skeleton → image), then stopping fully
|
||||
/// revealed with a replay control.
|
||||
export function StepGalleryPreview() {
|
||||
const [revealed, setRevealed] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setInterval(() => {
|
||||
setRevealed((current) => (current >= TILE_COUNT + 4 ? 0 : current + 1));
|
||||
}, REVEAL_MS);
|
||||
return () => clearInterval(timer);
|
||||
}, []);
|
||||
if (revealed >= TILE_COUNT) return;
|
||||
const timer = setTimeout(() => setRevealed((n) => n + 1), REVEAL_MS);
|
||||
return () => clearTimeout(timer);
|
||||
}, [revealed]);
|
||||
|
||||
const finished = revealed >= TILE_COUNT;
|
||||
|
||||
return (
|
||||
<div>
|
||||
@@ -44,15 +46,18 @@ export function StepGalleryPreview() {
|
||||
))}
|
||||
</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">Click any tile</span> to open the lightbox — keyboard navigation,
|
||||
zoom, inline tag editing, ratings, and a full video player.
|
||||
</p>
|
||||
<p className="py-2.5">
|
||||
<span className="text-gray-300">The toolbar</span> filters by type, favorites, or rating, sorts by
|
||||
date/name/size, and switches grid density.
|
||||
</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">Click any tile</span> to open the lightbox — keyboard navigation,
|
||||
zoom, inline tag editing, ratings, and a full video player.
|
||||
</p>
|
||||
<p className="pt-2.5">
|
||||
<span className="text-gray-300">The toolbar</span> filters by type, favorites, or rating, sorts by
|
||||
date/name/size, and switches grid density.
|
||||
</p>
|
||||
</div>
|
||||
{finished ? <ReplayButton onClick={() => setRevealed(0)} /> : null}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { SEARCH_RESULTS } from "./fakes";
|
||||
import { ReplayButton, SEARCH_RESULTS } from "./fakes";
|
||||
|
||||
const DEMOS = [
|
||||
{
|
||||
query: "beach-day_042.jpg",
|
||||
mode: "Filename",
|
||||
description: "Plain text matches file names — the default, instant search.",
|
||||
description: "Plain text matches file names — the default, instant search. One name, one file.",
|
||||
results: SEARCH_RESULTS.filename,
|
||||
},
|
||||
{
|
||||
@@ -25,25 +25,39 @@ const DEMOS = [
|
||||
const TYPE_MS = 55;
|
||||
const HOLD_MS = 2600;
|
||||
|
||||
/// A mock search bar that "types" each demo query, shows fake results, and
|
||||
/// cycles to the next mode.
|
||||
/// Types each demo query, shows matching results, advances through all three
|
||||
/// modes once, then stops on the last with a replay control.
|
||||
export function StepSearchDemo() {
|
||||
const [demoIndex, setDemoIndex] = useState(0);
|
||||
const [typed, setTyped] = useState(0);
|
||||
const [finished, setFinished] = useState(false);
|
||||
|
||||
const demo = DEMOS[demoIndex];
|
||||
const isLastDemo = demoIndex === DEMOS.length - 1;
|
||||
|
||||
useEffect(() => {
|
||||
if (finished) return;
|
||||
if (typed < demo.query.length) {
|
||||
const timer = setTimeout(() => setTyped((n) => n + 1), TYPE_MS);
|
||||
return () => clearTimeout(timer);
|
||||
}
|
||||
// Fully typed: hold, then advance — or finish on the last demo.
|
||||
const timer = setTimeout(() => {
|
||||
setDemoIndex((i) => (i + 1) % DEMOS.length);
|
||||
setTyped(0);
|
||||
if (isLastDemo) {
|
||||
setFinished(true);
|
||||
} else {
|
||||
setDemoIndex((i) => i + 1);
|
||||
setTyped(0);
|
||||
}
|
||||
}, HOLD_MS);
|
||||
return () => clearTimeout(timer);
|
||||
}, [typed, demo.query.length]);
|
||||
}, [typed, demo.query.length, isLastDemo, finished]);
|
||||
|
||||
const replay = () => {
|
||||
setDemoIndex(0);
|
||||
setTyped(0);
|
||||
setFinished(false);
|
||||
};
|
||||
|
||||
const fullyTyped = typed >= demo.query.length;
|
||||
|
||||
@@ -61,23 +75,26 @@ export function StepSearchDemo() {
|
||||
</svg>
|
||||
<span className="text-sm text-white">
|
||||
{demo.query.slice(0, typed)}
|
||||
<span className="animate-pulse text-gray-500">|</span>
|
||||
{!finished ? <span className="animate-pulse text-gray-500">|</span> : null}
|
||||
</span>
|
||||
<span className="ml-auto shrink-0 rounded-md border border-sky-400/25 bg-sky-500/10 px-2 py-0.5 text-[11px] font-medium text-sky-300">
|
||||
{demo.mode}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Fake results */}
|
||||
<div className={`mt-3 grid grid-cols-3 gap-1.5 transition-opacity duration-300 ${fullyTyped ? "opacity-100" : "opacity-30"}`}>
|
||||
{/* Results — fixed-width tiles, centered, so 1/2/3 results all look right */}
|
||||
<div className={`mt-3 flex flex-wrap justify-center gap-1.5 transition-opacity duration-300 ${fullyTyped ? "opacity-100" : "opacity-30"}`}>
|
||||
{demo.results.map((src, i) => (
|
||||
<div key={`${demoIndex}-${i}`} className="aspect-square overflow-hidden rounded-xl bg-white/[0.04]">
|
||||
<div key={`${demoIndex}-${i}`} className="aspect-square w-36 overflow-hidden rounded-xl bg-white/[0.04]">
|
||||
<img src={src} alt="" className="h-full w-full object-cover" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<p className="mt-4 min-h-10 text-xs leading-relaxed text-gray-500">{demo.description}</p>
|
||||
<div className="mt-4 flex min-h-10 items-start justify-between gap-4">
|
||||
<p className="text-xs leading-relaxed text-gray-500">{demo.description}</p>
|
||||
{finished ? <ReplayButton onClick={replay} /> : null}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
// demo progress — so new users see the real UI's shapes before their own
|
||||
// library exists.
|
||||
import sunset from "../../assets/onboarding/sunset.webp";
|
||||
import sunset2 from "../../assets/onboarding/sunset2.webp";
|
||||
import beach from "../../assets/onboarding/beach.webp";
|
||||
import landscape1 from "../../assets/onboarding/landscape1.webp";
|
||||
import landscape2 from "../../assets/onboarding/landscape2.webp";
|
||||
@@ -37,11 +38,14 @@ export function fakeImage(index: number): string {
|
||||
return FAKE_IMAGES[index % FAKE_IMAGES.length];
|
||||
}
|
||||
|
||||
// Curated result sets so each search demo returns thematically right images.
|
||||
// Result sets matched to what each query would genuinely return.
|
||||
// - filename: one exact file (a filename search hits a specific name)
|
||||
// - semantic "golden sunset over water": only the ocean-sunset stills
|
||||
// - tags "landscape": mountain valleys + the alpine lake (all landscapes)
|
||||
export const SEARCH_RESULTS = {
|
||||
filename: [beach, dunes, sunset], // "beach-day_042.jpg"
|
||||
semantic: [sunset, alpinelake, beach], // "golden sunset over water"
|
||||
tags: [landscape1, landscape2, forest], // "landscape"
|
||||
filename: [beach],
|
||||
semantic: [sunset, sunset2],
|
||||
tags: [landscape1, landscape2, alpinelake],
|
||||
} as const;
|
||||
|
||||
// Abstract gradient blobs/ticks for the Explore & Timeline mini-previews,
|
||||
@@ -133,6 +137,21 @@ export function FakeProgressBar({ fraction, className = "" }: { fraction: number
|
||||
);
|
||||
}
|
||||
|
||||
export function ReplayButton({ onClick, label = "Replay" }: { onClick: () => void; label?: string }) {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClick}
|
||||
className="inline-flex items-center gap-1.5 rounded-md border border-white/10 bg-white/[0.04] px-2.5 py-1 text-[11px] text-gray-400 transition-colors hover:bg-white/10 hover:text-gray-200"
|
||||
>
|
||||
<svg className="h-3 w-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12a7.5 7.5 0 0012.9 5.3M19.5 12A7.5 7.5 0 006.6 6.7M4.5 6.5v3h3M19.5 17.5v-3h-3" />
|
||||
</svg>
|
||||
{label}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
export function formatBytes(bytes: number): string {
|
||||
if (bytes >= 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`;
|
||||
if (bytes >= 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(0)} MB`;
|
||||
|
||||
Reference in New Issue
Block a user