Skip some redundant updates to the grid and spotlight

While debugging our layout shift issue I learned that a single change to the sort order of the participants can cause 3 or 4 redundant emissions of the same items in the same order. Since each of these would cause React to re-render the grid, skipping these spurious emissions seems like an easy performance win.

src/state/CallViewModel.ts

@@ -83,6 +83,7 @@ import { oneOnOneLayout } from "./OneOnOneLayout";
 import { pipLayout } from "./PipLayout";
 import { type EncryptionSystem } from "../e2ee/sharedKeyManagement";
 import { observeSpeaker } from "./observeSpeaker";
+import { shallowEquals } from "../utils/array";
 
 // How long we wait after a focus switch before showing the real participant
 // list again
@@ -705,6 +706,8 @@ export class CallViewModel extends ViewModel {
             bins.sort(([, bin1], [, bin2]) => bin1 - bin2).map(([m]) => m.vm),
           );
     }),
+    distinctUntilChanged(shallowEquals),
+    this.scope.state(),
   );
 
   private readonly spotlight: Observable<MediaViewModel[]> =
@@ -718,6 +721,7 @@ export class CallViewModel extends ViewModel {
           map((speaker) => (speaker ? [speaker] : [])),
         );
       }),
+      distinctUntilChanged(shallowEquals),
       this.scope.state(),
     );
 

src/utils/array.ts

@@ -0,0 +1,16 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only
+Please see LICENSE in the repository root for full details.
+*/
+
+/**
+ * Determine whether two arrays are equal by shallow comparison.
+ */
+export function shallowEquals<A>(first: A[], second: A[]): boolean {
+  if (first.length !== second.length) return false;
+  for (let i = 0; i < first.length; i++)
+    if (first[i] !== second[i]) return false;
+  return true;
+}