fix(connected-users): cancel frame requests

Instead of ignoring a refresh request when an animation frame callback has already been scheduled, cancel the scheduled callback and schedule a new one. This way when the callback actually runs it'll have the most up-to-date state.
mjpieters · Apr 13, 2023 · bf7f30b · bf7f30b
1 parent c330328
commit bf7f30b
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 48 deletions.
diff --git a/scripts/connected-users/src/users/controller.ts b/scripts/connected-users/src/users/controller.ts
@@ -29,56 +29,63 @@ export class UserListController extends Stacks.StacksController {
     this.updateUsers()
   }
 
+  private refreshId: number | null = null
+
   updateUsers(): void {
-    this.countTarget.innerHTML = this.userRowTargets.length.toString()
-    // replace sparse user cards with full versions
-    // preserves the first child of an existing s-user-card div if the row is
-    // marked with data-user-card-keep-first="true"
-    const hydrationRows = new Map(
-      this.userRowTargets.reduce(
-        (entries, row) =>
-          row.dataset.hydrated === 'true'
-            ? entries
-            : [...entries, [parseInt(row.dataset.uid || '0'), row]],
-        [] as [number, HTMLDivElement][]
+    if (this.refreshId !== null) window.cancelAnimationFrame(this.refreshId)
+    this.refreshId = window.requestAnimationFrame(async () => {
+      this.countTarget.innerHTML = this.userRowTargets.length.toString()
+      // replace sparse user cards with full versions
+      // preserves the first child of an existing s-user-card div if the row is
+      // marked with data-user-card-keep-first="true"
+      const hydrationRows = new Map(
+        this.userRowTargets.reduce(
+          (entries, row) =>
+            row.dataset.hydrated === 'true'
+              ? entries
+              : [...entries, [parseInt(row.dataset.uid || '0'), row]],
+          [] as [number, HTMLDivElement][]
+        )
       )
-    )
-    if (hydrationRows.size === 0) return
-    window.requestAnimationFrame(async () => {
-      for await (const user of api.users([...hydrationRows.keys()])) {
-        const userRow = hydrationRows.get(user.user_id)
-        if (!userRow) continue
-        const firstChild =
-          userRow.dataset.userCardKeepFirst === 'true'
-            ? userRow
-                .querySelector<HTMLDivElement>('.s-user-card :first-child')
-                ?.cloneNode(true)
-            : null
-        const existingCard =
-          userRow.querySelector<HTMLDivElement>('.s-user-card')
-        if (existingCard) existingCard.replaceWith(user.node)
-        else userRow.replaceChildren(user.node)
-        const newCard = userRow.querySelector('.s-user-card')
-        newCard?.classList.add(...this.userCardClasses)
-        if (firstChild) {
-          newCard?.insertAdjacentElement(
-            'afterbegin',
-            firstChild as HTMLElement
-          )
+      try {
+        if (hydrationRows.size === 0) return
+        for await (const user of api.users([...hydrationRows.keys()])) {
+          const userRow = hydrationRows.get(user.user_id)
+          if (!userRow) continue
+          const firstChild =
+            userRow.dataset.userCardKeepFirst === 'true'
+              ? userRow
+                  .querySelector<HTMLDivElement>('.s-user-card :first-child')
+                  ?.cloneNode(true)
+              : null
+          const existingCard =
+            userRow.querySelector<HTMLDivElement>('.s-user-card')
+          if (existingCard) existingCard.replaceWith(user.node)
+          else userRow.replaceChildren(user.node)
+          const newCard = userRow.querySelector('.s-user-card')
+          newCard?.classList.add(...this.userCardClasses)
+          if (firstChild) {
+            newCard?.insertAdjacentElement(
+              'afterbegin',
+              firstChild as HTMLElement
+            )
+          }
+          userRow.dataset.hydrated = 'true'
         }
-        userRow.dataset.hydrated = 'true'
+        // signal the Mod User Quicklinks Everywhere script
+        this.dispatch('moduserquicklinks', { prefix: '' })
+        this.dispatch('usersHydrated', {
+          detail: this.userRowTargets.reduce(
+            (uids, r) =>
+              r.querySelector('s-user-card__deleted') === null
+                ? [...uids, parseInt(r.dataset.uid || '0')]
+                : uids,
+            [] as number[]
+          ),
+        })
+      } finally {
+        this.refreshId = null
       }
-      // signal the Mod User Quicklinks Everywhere script
-      this.dispatch('moduserquicklinks', { prefix: '' })
-      this.dispatch('usersHydrated', {
-        detail: this.userRowTargets.reduce(
-          (uids, r) =>
-            r.querySelector('s-user-card__deleted') === null
-              ? [...uids, parseInt(r.dataset.uid || '0')]
-              : uids,
-          [] as number[]
-        ),
-      })
     })
   }
 }
diff --git a/scripts/connected-users/src/xrefIPAddresses/controller.ts b/scripts/connected-users/src/xrefIPAddresses/controller.ts
@@ -430,7 +430,7 @@ export class XRefConnectedUsersController extends Stacks.StacksController {
   private refreshId: number | null = null
 
   private refresh(): void {
-    if (this.refreshId !== null) return
+    if (this.refreshId !== null) window.cancelAnimationFrame(this.refreshId)
     this.refreshId = window.requestAnimationFrame(() => {
       this.threshold = 0
       this.updateFocusedUsersList()

diff --git a/scripts/connected-users/src/xrefIPAddresses/ipGroup.ts b/scripts/connected-users/src/xrefIPAddresses/ipGroup.ts
@@ -174,7 +174,7 @@ export class IpGroupController extends Stacks.StacksController {
   refresh(showOnlyConnected?: boolean) {
     if (showOnlyConnected !== undefined)
       this.showOnlyConnected = showOnlyConnected
-    if (this.refreshId !== null) return
+    if (this.refreshId !== null) window.cancelAnimationFrame(this.refreshId)
     this.refreshId = window.requestAnimationFrame(() => {
       this.updateClasses()
       this.refreshId = null