Fix infinite looping sync updates

apps/passport-client/pages/index.tsx

@@ -304,9 +304,7 @@ const AppStateProvider: React.FC<AppStateProviderProps> = ({
 
   const update = useCallback(
     (diff: Partial<AppState>): void => {
-      if (Object.keys(diff).length > 0) {
-        setState(Object.assign(state, diff));
-      }
+      setState(Object.assign(state, diff));
 
       // In a React class component, the `setState` method has a second
       // parameter, which is a callback function that React will invoke when
@@ -329,9 +327,7 @@ const AppStateProvider: React.FC<AppStateProviderProps> = ({
       // object directly. It will then emit an event, which is what the rest of
       // the app uses to work around the fact that it also can't track changes
       // to the state object.
-      if (Object.keys(diff).length > 0) {
-        setLastDiff(diff);
-      }
+      setLastDiff(diff);
     },
     [state]
   );

apps/passport-client/src/dispatch.ts

@@ -1014,13 +1014,13 @@ async function sync(state: AppState, update: ZuUpdate): Promise<void> {
 
       // sync() is triggered via dispatch on any update, so if we make changes
       // we know we'll be called again the latest AppState snapshot.  If we
-      // have no changes, we can force another sync via and empty update, to
-      // ensure we didn't miss any important states.
+      // have no changes, we can force another sync via dispatch, to ensure we
+      // didn't miss any important states.
       if (stateChanges) {
         update(stateChanges);
       } else if (skippedSyncUpdates > 0) {
         console.log("[SYNC] running an extra sync in case of missed updates");
-        update({});
+        window.setTimeout(() => dispatch({ type: "sync" }, state, update), 0);
       }
       skippedSyncUpdates = 0;
     } finally {