fix(toolbar): Use shape sub notifier in toolbar (#1286)

Remove the `setInterval` call used to monitor shapes in the toolbar and
use the new notifier method instead.

.changeset/brown-candles-develop.md

@@ -0,0 +1,5 @@
+---
+"@electric-sql/debug-toolbar": patch
+---
+
+Use shape sync status notifier for updating shapes tab.

components/toolbar/src/api/interface.ts

@@ -31,6 +31,10 @@ export interface ToolbarInterface {
   toggleSatelliteStatus(name: string): Promise<void>
 
   getSatelliteShapeSubscriptions(name: string): DebugShape[]
+  subscribeToSatelliteShapeSubscriptions(
+    name: string,
+    callback: (shapes: DebugShape[]) => void,
+  ): UnsubscribeFunction
 
   resetDb(dbName: string): Promise<void>
   queryDb(dbName: string, statement: Statement): Promise<Row[]>

components/toolbar/src/api/toolbar.ts

@@ -83,6 +83,17 @@ export class Toolbar implements ToolbarInterface {
     )
   }
 
+  subscribeToSatelliteShapeSubscriptions(
+    name: string,
+    callback: (shapes: DebugShape[]) => void,
+  ): UnsubscribeFunction {
+    const sat = this.getSatellite(name)
+    callback(this.getSatelliteShapeSubscriptions(name))
+    return sat.notifier.subscribeToShapeSubscriptionSyncStatusChanges(() =>
+      callback(this.getSatelliteShapeSubscriptions(name)),
+    )
+  }
+
   resetDb(dbName: string): Promise<void> {
     const DBDeleteRequest = window.indexedDB.deleteDatabase(dbName)
     DBDeleteRequest.onsuccess = () =>

components/toolbar/src/tabs/ShapesTab.tsx

@@ -12,13 +12,11 @@ export default function ShapesTab({
   )
 
   useEffect(() => {
-    // TODO: need notifier API for shape status
-    // periodically refresh shape subscriptions
-    const interval = setInterval(
-      () => setShapes(api.getSatelliteShapeSubscriptions(dbName)),
-      500,
+    const unsubscribe = api.subscribeToSatelliteShapeSubscriptions(
+      dbName,
+      setShapes,
     )
-    return () => clearInterval(interval)
+    return unsubscribe
   }, [dbName, api])
 
   if (shapes.length === 0) {