Merge pull request #159 from powersync-ja/fix-diagnostics-status

[diagnostics-app] Fix sync status

Author: rkistner

tools/diagnostics-app/src/app/views/layout.tsx

@@ -28,14 +28,14 @@ import React from 'react';
 import { LOGIN_ROUTE, SCHEMA_ROUTE, SQL_CONSOLE_ROUTE, SYNC_DIAGNOSTICS_ROUTE } from '@/app/router';
 import { useNavigationPanel } from '@/components/navigation/NavigationPanelContext';
 import { signOut, sync, syncErrorTracker } from '@/library/powersync/ConnectionManager';
-import { usePowerSync, useStatus } from '@powersync/react';
+import { usePowerSync } from '@powersync/react';
 import { useNavigate } from 'react-router-dom';
 
 export default function ViewsLayout({ children }: { children: React.ReactNode }) {
   const powerSync = usePowerSync();
   const navigate = useNavigate();
 
-  const syncStatus = useStatus();
+  const [syncStatus, setSyncStatus] = React.useState(sync.syncStatus);
   const [syncError, setSyncError] = React.useState<Error | null>(null);
   const { title } = useNavigationPanel();
 
@@ -86,6 +86,16 @@ export default function ViewsLayout({ children }: { children: React.ReactNode })
     [powerSync]
   );
 
+  // Cannot use `useStatus()`, since we're not using the default sync implementation.
+  React.useEffect(() => {
+    const l = sync.registerListener({
+      statusChanged: (status) => {
+        setSyncStatus(status);
+      }
+    });
+    return () => l();
+  }, []);
+
   React.useEffect(() => {
     const l = syncErrorTracker.registerListener({
       lastErrorUpdated(error) {