Debounce page refreshes triggered via Turbo streams

Fix Turbo 8 refresh debounce in frontend hotwired#1093

src/core/session.js

@@ -12,7 +12,7 @@ import { ScrollObserver } from "../observers/scroll_observer"
 import { StreamMessage } from "./streams/stream_message"
 import { StreamMessageRenderer } from "./streams/stream_message_renderer"
 import { StreamObserver } from "../observers/stream_observer"
-import { clearBusyState, dispatch, findClosestRecursively, getVisitAction, markAsBusy } from "../util"
+import { clearBusyState, dispatch, findClosestRecursively, getVisitAction, markAsBusy, debounce } from "../util"
 import { PageView } from "./drive/page_view"
 import { FrameElement } from "../elements/frame_element"
 import { Preloader } from "./drive/preloader"
@@ -44,6 +44,7 @@ export class Session {
 
   constructor(recentRequests) {
     this.recentRequests = recentRequests
+    this.refresh = debounce(this.refresh.bind(this), 150)
   }
 
   start() {

src/tests/functional/page_refresh_stream_action_tests.js

@@ -1,6 +1,6 @@
 import { test } from "@playwright/test"
 import { assert } from "chai"
-import { nextBeat } from "../helpers/page"
+import { getFromLocalStorage, nextBeat } from "../helpers/page"
 
 test.beforeEach(async ({ page }) => {
   await page.goto("/src/tests/fixtures/page_refresh_stream_action.html")
@@ -42,6 +42,21 @@ test("fetch injects a Turbo-Request-Id with a UID generated automatically", asyn
   }
 })
 
+test("debounce stream page refreshes", async ({ page }) => {
+  page.evaluate(() => {
+    localStorage.setItem("visitsCount", 0)
+    addEventListener("turbo:visit", () => {
+      localStorage.setItem("visitsCount", localStorage.getItem("visitsCount") + 1)
+    })
+  })
+
+  await page.click("#refresh button")
+  await page.click("#refresh button")
+  await nextBeat()
+
+  assert.equal(await getFromLocalStorage(page, "visitsCount"), 1)
+})
+
 async function textContent(page) {
   const messages = await page.locator("#content")
   return await messages.textContent()

src/tests/helpers/page.js

@@ -61,7 +61,7 @@ export async function isScrolledToSelector(page, selector) {
 }
 
 export function nextBeat() {
-  return sleep(100)
+  return sleep(250)
 }
 
 export function nextBody(_page, timeout = 500) {

src/util.js

@@ -215,3 +215,13 @@ export async function around(callback, reader) {
 
   return [before, after]
 }
+
+export function debounce(fn, delay) {
+  let timeoutId = null
+
+  return (...args) => {
+    const callback = () => fn.apply(this, args)
+    clearTimeout(timeoutId)
+    timeoutId = setTimeout(callback, delay)
+  }
+}