feat(standalone/setup): add a progress bar for sync status

apps/client/src/setup.tsx

@@ -70,26 +70,32 @@ function SetupOptions({ setState }: { setState: (state: State) => void }) {
 }
 
 function SyncInProgress() {
-    const { outstandingPullCount, initialized } = useOutstandingSyncInfo();
+    const { outstandingPullCount, totalPullCount, initialized } = useOutstandingSyncInfo();
+
+    const progress = totalPullCount
+        ? Math.round(((totalPullCount - outstandingPullCount) / totalPullCount) * 100)
+        : 0;
 
     return (
         <div class="page sync-in-progress">
             <h1>{t("setup.sync-in-progress-title")}</h1>
             <p>{t("setup.sync-in-progress-description")}</p>
-            <Spinner />
-            <p>Outstanding sync objects: {outstandingPullCount}</p>
+            <progress value={totalPullCount ? totalPullCount - outstandingPullCount : 0} max={totalPullCount ?? 0} />
+            <p>{progress}% ({totalPullCount ? totalPullCount - outstandingPullCount : 0} / {totalPullCount ?? "?"})</p>
         </div>
     );
 }
 
 function useOutstandingSyncInfo() {
     const [ outstandingPullCount, setOutstandingPullCount ] = useState(0);
+    const [ totalPullCount, setTotalPullCount ] = useState<number | null>(null);
     const [ initialized, setInitialized ] = useState(false);
 
     async function refresh() {
-        const { outstandingPullCount, initialized } = await server.get("sync/stats");
-        setOutstandingPullCount(outstandingPullCount);
-        setInitialized(initialized);
+        const resp = await server.get<{ outstandingPullCount: number; totalPullCount: number | null; initialized: boolean }>("sync/stats");
+        setOutstandingPullCount(resp.outstandingPullCount);
+        setTotalPullCount(resp.totalPullCount);
+        setInitialized(resp.initialized);
     }
 
     useEffect(() => {
@@ -98,7 +104,7 @@ function useOutstandingSyncInfo() {
 
         return () => clearInterval(interval);
     }, []);
-    return { outstandingPullCount, initialized };
+    return { outstandingPullCount, totalPullCount, initialized };
 }
 
 function Spinner() {

packages/trilium-core/src/routes/api/sync.ts

@@ -46,7 +46,8 @@ function getStats() {
 
     const stats = {
         initialized: getSql().getValue("SELECT value FROM options WHERE name = 'initialized'") === "true",
-        outstandingPullCount: syncService.getOutstandingPullCount()
+        outstandingPullCount: syncService.getOutstandingPullCount(),
+        totalPullCount: syncService.getTotalPullCount()
     };
 
     getLog().info(`Returning sync stats: ${JSON.stringify(stats)}`);

packages/trilium-core/src/services/sync.ts

@@ -26,6 +26,7 @@ import { getCrypto } from "./encryption/crypto.js";
 let proxyToggle = true;
 
 let outstandingPullCount = 0;
+let totalPullCount: number | null = null;
 
 interface CheckResponse {
     maxEntityChangeId: number;
@@ -172,6 +173,10 @@ async function pullChanges(syncContext: SyncContext) {
 
         outstandingPullCount = resp.outstandingPullCount;
 
+        if (totalPullCount === null) {
+            totalPullCount = entityChanges.length + outstandingPullCount;
+        }
+
         const pulledDate = Date.now();
 
         getSql().transactional(() => {
@@ -201,6 +206,8 @@ async function pullChanges(syncContext: SyncContext) {
     }
 
     log.info("Finished pull");
+
+    totalPullCount = null;
 }
 
 async function pushChanges(syncContext: SyncContext) {
@@ -450,6 +457,10 @@ function getOutstandingPullCount() {
     return outstandingPullCount;
 }
 
+function getTotalPullCount() {
+    return totalPullCount;
+}
+
 function startSyncTimer() {
     becca_loader.beccaLoaded.then(() => {
         setInterval(cls.wrap(sync), 60000);
@@ -467,6 +478,7 @@ export default {
     login,
     getEntityChangeRecords,
     getOutstandingPullCount,
+    getTotalPullCount,
     getMaxEntityChangeId,
     startSyncTimer
 };