diff --git a/apps/client/src/setup.tsx b/apps/client/src/setup.tsx index 847b489102..db3fc8c569 100644 --- a/apps/client/src/setup.tsx +++ b/apps/client/src/setup.tsx @@ -69,19 +69,61 @@ function SetupOptions({ setState }: { setState: (state: State) => void }) { ); } -function SyncInProgress() { - const { outstandingPullCount, totalPullCount, initialized } = useOutstandingSyncInfo(); +type SyncStep = "connecting" | "syncing" | "finalizing"; - const progress = totalPullCount - ? Math.round(((totalPullCount - outstandingPullCount) / totalPullCount) * 100) +function getSyncStep(stats: { outstandingPullCount: number; totalPullCount: number | null; initialized: boolean }): SyncStep { + if (stats.initialized) { + return "finalizing"; // will reload momentarily + } + if (stats.totalPullCount !== null && stats.outstandingPullCount > 0) { + return "syncing"; + } + if (stats.totalPullCount !== null && stats.outstandingPullCount === 0) { + return "finalizing"; + } + return "connecting"; +} + +function SyncInProgress() { + const stats = useOutstandingSyncInfo(); + const step = getSyncStep(stats); + + useEffect(() => { + if (stats.initialized) { + location.reload(); + } + }, [stats.initialized]); + + const steps: { key: SyncStep; label: string }[] = [ + { key: "connecting", label: t("setup.sync-step-connecting") }, + { key: "syncing", label: t("setup.sync-step-syncing") }, + { key: "finalizing", label: t("setup.sync-step-finalizing") } + ]; + + const currentIndex = steps.findIndex((s) => s.key === step); + + const progress = stats.totalPullCount + ? Math.round(((stats.totalPullCount - stats.outstandingPullCount) / stats.totalPullCount) * 100) : 0; return (
{t("setup.sync-in-progress-description")}
- -{progress}% ({totalPullCount ? totalPullCount - outstandingPullCount : 0} / {totalPullCount ?? "?"})
+ +