diff --git a/DESIGN.md b/DESIGN.md index e53fceca..49ff3069 100644 --- a/DESIGN.md +++ b/DESIGN.md @@ -494,7 +494,11 @@ Do not add motion for decoration. New animation must honor names, counts, progress percentages or addition/deletion colors. - Replace skeletons as data arrives, without a minimum display delay. Stored manifest loading uses the same diff-frame skeleton without unmounting Pierre. - Background Sync preserves the existing review and usable controls. Errors and + Open available stored snapshots while load-time Sync continues; use skeletons + only for unavailable data. Replace each file preview independently as it arrives. + Keep the header busy indicator active through collection and preview loading. + Background Sync preserves the existing review and usable controls; newer heads + use the existing “Newer snapshot” notice and explicit “View latest” action. Errors and empty results replace placeholders with their existing explanation and actions. ## Responsive design diff --git a/apps/web/src/Header.tsx b/apps/web/src/Header.tsx index dfdc5bf3..bed00573 100644 --- a/apps/web/src/Header.tsx +++ b/apps/web/src/Header.tsx @@ -1,4 +1,9 @@ -import { FolderSyncIcon, ListTreeIcon, RefreshCwIcon } from "lucide-react"; +import { + FolderSyncIcon, + ListTreeIcon, + LoaderCircleIcon, + RefreshCwIcon, +} from "lucide-react"; import { Button } from "@/components/ui/button"; import { AccountButton } from "./account.tsx"; import { ThemeButton } from "./ThemeButton.tsx"; @@ -74,10 +79,20 @@ export function Header() { size="icon" aria-label="Sync all checkouts" title="Sync all checkouts (Alt+R)" - aria-busy={collecting} + aria-busy={collecting || diff.busy} onClick={refresh} > -