Add progress indicator to demos

Author: simolus3

demos/react-native-supabase-todolist/app/views/todos/lists.tsx

@@ -7,16 +7,16 @@ import prompt from 'react-native-prompt-android';
 import { router, Stack } from 'expo-router';
 import { LIST_TABLE, TODO_TABLE, ListRecord } from '../../../library/powersync/AppSchema';
 import { useSystem } from '../../../library/powersync/system';
-import { useQuery, useStatus } from '@powersync/react-native';
+import { useQuery } from '@powersync/react-native';
 import { ListItemWidget } from '../../../library/widgets/ListItemWidget';
+import { GuardBySync } from '../../../library/widgets/GuardBySync';
 
 const description = (total: number, completed: number = 0) => {
   return `${total - completed} pending, ${completed} completed`;
 };
 
 const ListsViewWidget: React.FC = () => {
   const system = useSystem();
-  const status = useStatus();
   const { data: listRecords } = useQuery<ListRecord & { total_tasks: number; completed_tasks: number }>(`
       SELECT
         ${LIST_TABLE}.*, COUNT(${TODO_TABLE}.id) AS total_tasks, SUM(CASE WHEN ${TODO_TABLE}.completed = true THEN 1 ELSE 0 END) as completed_tasks
@@ -78,26 +78,26 @@ const ListsViewWidget: React.FC = () => {
           );
         }}
       />
-      <ScrollView key={'lists'} style={{ maxHeight: '90%' }}>
-        {!status.hasSynced ? (
-          <Text>Busy with sync...</Text>
-        ) : (
-          listRecords.map((r) => (
-            <ListItemWidget
-              key={r.id}
-              title={r.name}
-              description={description(r.total_tasks, r.completed_tasks)}
-              onDelete={() => deleteList(r.id)}
-              onPress={() => {
-                router.push({
-                  pathname: 'views/todos/edit/[id]',
-                  params: { id: r.id }
-                });
-              }}
-            />
-          ))
-        )}
-      </ScrollView>
+      <GuardBySync>
+        <ScrollView key={'lists'} style={{ maxHeight: '90%' }}>
+          {(
+            listRecords.map((r) => (
+              <ListItemWidget
+                key={r.id}
+                title={r.name!}
+                description={description(r.total_tasks, r.completed_tasks)}
+                onDelete={() => deleteList(r.id)}
+                onPress={() => {
+                  router.push({
+                    pathname: 'views/todos/edit/[id]',
+                    params: { id: r.id }
+                  });
+                }}
+              />
+            ))
+          )}
+        </ScrollView>
+      </GuardBySync>
 
       <StatusBar style={'light'} />
     </View>

demos/react-native-supabase-todolist/library/widgets/GuardBySync.tsx

@@ -0,0 +1,40 @@
+import { useStatus } from '@powersync/react';
+import { FC, ReactNode } from 'react';
+import { View } from 'react-native';
+import { Text, LinearProgress } from '@rneui/themed';
+
+/**
+ * A component that renders its child if the database has been synced at least once and shows
+ * a progress indicator otherwise.
+ */
+export const GuardBySync: FC<{ children: ReactNode; priority?: number }> = ({ children, priority }) => {
+  const status = useStatus();
+
+  const hasSynced = priority == null ? status.hasSynced : status.statusForPriority(priority).hasSynced;
+  if (hasSynced) {
+    return children;
+  }
+
+  // If we haven't completed a sync yet, show a progress indicator!
+  const allProgress = status.downloadProgress;
+  const progress = priority == null ? allProgress : allProgress?.untilPriority(priority);
+
+  return (
+    <View>
+      {progress != null ? (
+        <>
+          <LinearProgress variant="determinate" value={progress.downloadedFraction} />
+          {progress.downloadedOperations == progress.totalOperations ? (
+            <Text>Applying server-side changes</Text>
+          ) : (
+            <Text>
+              Downloaded {progress.downloadedOperations} out of {progress.totalOperations}.
+            </Text>
+          )}
+        </>
+      ) : (
+        <LinearProgress variant="indeterminate" />
+      )}
+    </View>
+  );
+};

demos/react-supabase-todolist/src/app/views/todo-lists/page.tsx

@@ -18,6 +18,7 @@ import { LISTS_TABLE } from '@/library/powersync/AppSchema';
 import { NavigationPage } from '@/components/navigation/NavigationPage';
 import { SearchBarWidget } from '@/components/widgets/SearchBarWidget';
 import { TodoListsWidget } from '@/components/widgets/TodoListsWidget';
+import { GuardBySync } from '@/components/widgets/GuardBySync';
 
 export default function TodoListsPage() {
   const powerSync = usePowerSync();
@@ -53,7 +54,9 @@ export default function TodoListsPage() {
         </S.FloatingActionButton>
         <Box>
           <SearchBarWidget />
-          {!status.hasSynced ? <p>Busy with sync...</p> : <TodoListsWidget />}
+          <GuardBySync>
+            <TodoListsWidget />
+          </GuardBySync>
         </Box>
         {/* TODO use a dialog service in future, this is just a simple example app */}
         <Dialog

demos/react-supabase-todolist/src/components/widgets/GuardBySync.tsx

@@ -0,0 +1,42 @@
+import { Box, LinearProgress, Stack, Typography } from '@mui/material';
+import { useStatus } from '@powersync/react';
+import { FC, ReactNode } from 'react';
+
+/**
+ * A component that renders its child if the database has been synced at least once and shows
+ * a progress indicator otherwise.
+ */
+export const GuardBySync: FC<{ children: ReactNode; priority?: number }> = ({ children, priority }) => {
+    const status = useStatus();
+  
+    const hasSynced = priority == null ? status.hasSynced : status.statusForPriority(priority).hasSynced;
+    if (hasSynced) {
+      return children;
+    }
+  
+    // If we haven't completed a sync yet, show a progress indicator!
+    const allProgress = status.downloadProgress;
+    const progress = priority == null ? allProgress : allProgress?.untilPriority(priority);
+  
+    return (
+      <Stack direction="column" spacing={1} sx={{p: 4}} alignItems="stretch">
+        {progress != null ? (
+          <>
+            <LinearProgress variant="determinate" value={progress.downloadedFraction * 100} />
+            <Box sx={{alignSelf: "center"}}>
+                {progress.downloadedOperations == progress.totalOperations ? (
+                <Typography>Applying server-side changes</Typography>
+                ) : (
+                <Typography>
+                    Downloaded {progress.downloadedOperations} out of {progress.totalOperations}.
+                </Typography>
+                )}
+            </Box>
+          </>
+        ) : (
+          <LinearProgress variant="indeterminate" />
+        )}
+      </Stack>
+    );
+  };
+  

packages/common/src/client/sync/stream/AbstractStreamingSyncImplementation.ts

@@ -165,23 +165,21 @@ export abstract class AbstractStreamingSyncImplementation
   private pendingCrudUpload?: Promise<void>;
 
   syncStatus: SyncStatus;
-  private syncStatusOptions: SyncStatusOptions;
   triggerCrudUpload: () => void;
 
   constructor(options: AbstractStreamingSyncImplementationOptions) {
     super();
     this.options = { ...DEFAULT_STREAMING_SYNC_OPTIONS, ...options };
 
-    this.syncStatusOptions = {
+    this.syncStatus = new SyncStatus({
       connected: false,
       connecting: false,
       lastSyncedAt: undefined,
       dataFlow: {
         uploading: false,
         downloading: false
       }
-    };
-    this.syncStatus = new SyncStatus(this.syncStatusOptions);
+    });
     this.abortController = null;
 
     this.triggerCrudUpload = throttleLeadingTrailing(() => {
@@ -660,7 +658,7 @@ The next upload iteration will be delayed.`);
             await this.options.adapter.setTargetCheckpoint(targetCheckpoint);
           } else if (isStreamingSyncData(line)) {
             const { data } = line;
-            const previousProgress = this.syncStatusOptions.dataFlow?.downloadProgress;
+            const previousProgress = this.syncStatus.dataFlowStatus.downloadProgress;
             let updatedProgress: InternalProgressInformation | null = null;
             if (previousProgress) {
               updatedProgress = { ...previousProgress };
@@ -805,7 +803,6 @@ The next upload iteration will be delayed.`);
     });
 
     if (!this.syncStatus.isEqual(updatedStatus)) {
-      Object.assign(this.syncStatusOptions, options);
       this.syncStatus = updatedStatus;
       // Only trigger this is there was a change
       this.iterateListeners((cb) => cb.statusChanged?.(updatedStatus));