Adopt progress api in demo

Author: simolus3

demos/supabase-todolist/lib/widgets/guard_by_sync.dart

@@ -0,0 +1,53 @@
+import 'package:flutter/material.dart';
+import 'package:powersync/powersync.dart' hide Column;
+import 'package:powersync_flutter_demo/powersync.dart';
+
+/// A widget that shows [child] after a complete sync on the database has
+/// completed and a progress bar before that.
+class GuardBySync extends StatelessWidget {
+  final Widget child;
+
+  /// When set, wait only for a complete sync within the [BucketPriority]
+  /// instead of a full sync.
+  final BucketPriority? priority;
+
+  const GuardBySync({
+    super.key,
+    required this.child,
+    this.priority,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return StreamBuilder<SyncStatus>(
+      stream: db.statusStream,
+      initialData: db.currentStatus,
+      builder: (context, snapshot) {
+        final status = snapshot.requireData;
+        final (didSync, progress) = switch (priority) {
+          null => (
+              status.hasSynced ?? false,
+              status.downloadProgress?.progress
+            ),
+          var priority? => (
+              status.statusForPriority(priority).hasSynced ?? false,
+              status.downloadProgress?.progressFor(priority)
+            ),
+        };
+
+        if (didSync) {
+          return child;
+        } else {
+          return Center(
+            child: Column(
+              children: [
+                const Text('Busy with sync...'),
+                LinearProgressIndicator(value: progress),
+              ],
+            ),
+          );
+        }
+      },
+    );
+  }
+}

demos/supabase-todolist/lib/widgets/lists_page.dart

@@ -1,6 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:powersync/powersync.dart';
-import 'package:powersync_flutter_demo/powersync.dart';
+import 'package:powersync_flutter_demo/widgets/guard_by_sync.dart';
 
 import './list_item.dart';
 import './list_item_dialog.dart';
@@ -46,29 +46,23 @@ final class ListsWidget extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return FutureBuilder(
-      future: db.waitForFirstSync(priority: _listsPriority),
-      builder: (context, snapshot) {
-        if (snapshot.connectionState == ConnectionState.done) {
-          return StreamBuilder(
-            stream: TodoList.watchListsWithStats(),
-            builder: (context, snapshot) {
-              if (snapshot.data case final todoLists?) {
-                return ListView(
-                  padding: const EdgeInsets.symmetric(vertical: 8.0),
-                  children: todoLists.map((list) {
-                    return ListItemWidget(list: list);
-                  }).toList(),
-                );
-              } else {
-                return const CircularProgressIndicator();
-              }
-            },
-          );
-        } else {
-          return const Text('Busy with sync...');
-        }
-      },
+    return GuardBySync(
+      priority: _listsPriority,
+      child: StreamBuilder(
+        stream: TodoList.watchListsWithStats(),
+        builder: (context, snapshot) {
+          if (snapshot.data case final todoLists?) {
+            return ListView(
+              padding: const EdgeInsets.symmetric(vertical: 8.0),
+              children: todoLists.map((list) {
+                return ListItemWidget(list: list);
+              }).toList(),
+            );
+          } else {
+            return const CircularProgressIndicator();
+          }
+        },
+      ),
     );
   }